Hermes Agent × 网站列表布局设计 Skill

网站列表布局设计 Skill可以作为独立任务在 Hermes Agent 中使用。具体适配方式、资料交接和需要人工确认的环节见下方说明。

Hermes Agent 适合从终端或消息入口分阶段推进列表改版。团队先发送目录摘要、页面目标与代表条目，Hermes 回报 List/Grid 选择和缺少的资料；设计稿或测试地址就绪后，再沿同一任务继续核对字段、分页和页面结果。

列表改版往往跨内容、设计和开发三段，每次只需向当前负责人索取下一份资料。Hermes 可以在消息与终端任务中保留已确认字段、代表条目和待办，再把阶段结果发给下一位负责人；真实页面视觉仍需人工或外部预览工具确认。

1. 01

   判断 List 是否适合当前内容

   从消息或终端接收页面目标、内容类型和条目数量，先回复 List/Grid 选择理由与仍需提供的资料。

2. 02

   用真实条目确定字段与信息层级

   读取可访问的文本清单，选出长标题、缺摘要和不同状态，整理标题、摘要、日期、作者与分类的层级。

3. 03

   设计列表密度、链接区域和响应式规则

   用文字任务单说明条目间距、整行或标题链接、手机字段取舍和触控区域，设计或开发完成后再进入页面复查。

4. 04

   检查分页、构建内容和真实页面表现

   Hermes 可接收开发检查结果和页面截图；没有原生页面预览时，保留待确认 URL、宽度、分页与操作步骤。

把 Skill 放入 Hermes Skills 目录，通过终端或消息入口发送页面目标、六条样本和现状截图，先要求给出布局判断。

• 页面预览

  影响：第 5 步 分别检查手机和桌面列表、第 6 步 给无限滚动目录保留分页入口

  原因：没有页面预览，网页类成果只能拿到源码

  做法：把 HTML 存到本地用浏览器打开检查

收到新截图或结果时，回到已确认的条目 ID、宽度和字段层级逐项对照，避免把不同页面的问题混在一起。

列表变体、字段数量、间距、字号、截断方式和断点需要结合真实内容、设备宽度与现有设计系统确定。文件扫描、组件修改、构建检查和页面预览能否执行，取决于所用 Agent 的工具配置、项目资料与操作权限。

请帮我把「网站列表布局设计 Skill」安装到 Hermes Agent。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-list-layout/1.0.0/skill-list-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 Hermes Agent 的方式安装：mkdir -p ~/.hermes/skills && cp -R ./skill-list-layout ~/.hermes/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在消息入口里发一条只读任务，确认 Hermes 报出 Skill 名称与将要执行的步骤。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-list-layout/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-list-layout.md

mkdir -p ~/.hermes/skills && cp -R ./skill-list-layout ~/.hermes/skills/