Hermes Agent × 网站网格布局设计 Skill

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

Hermes Agent 适合从终端或消息入口分阶段推进网格改版。团队先发送目录摘要、页面目标与代表样本，Hermes 回报 Grid/List 选择和缺少的资料；设计稿或测试地址就绪后，再沿同一任务跟进列数、图片比例、分页与多宽度检查。

目录数据、设计稿和开发页面很少同时准备好。Hermes 可以把任务拆成样本确认、网格规格、页面复查三段，每次只向当前负责人索取下一份资料。它能保留进度并发送阶段结果；本地文件需放进可访问的运行环境，真实页面视觉仍需人工或外部预览工具确认。

1. 01

   判断 Grid 是否适合当前内容

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

2. 02

   用真实样本确定网格项尺寸与间距

   读取可访问的文本清单，选出长标题、缺图和不同状态，整理最小列宽、图片比例与字段问题。

3. 03

   设计响应式列数和组件规则

   用文字任务单说明各宽度列数、间距、换行和主要动作，设计或开发完成后再进入页面复查。

4. 04

   检查图片空间、分页和真实页面表现

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

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

• 页面预览

  影响：第 4 步 为手机、平板和桌面分别检查列数、第 5 步 统一图片比例并提前预留空间、第 6 步 给需要被搜索引擎抓取的重点目录保留分页入口

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

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

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

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

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

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