Hermes Agent × 网站瀑布流布局设计 Skill

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

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

案例墙改版常跨内容、设计和开发三段，素材还会分批补齐。Hermes 可以在消息与终端任务中保留已确认的图片顺序、代表样本和待办，再把阶段结果交给下一位负责人；它不提供原生页面预览，因此真实页面视觉仍需人工或外部预览工具确认。

1. 01

   判断 Masonry 是否适合当前内容

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

2. 02

   用真实素材确定比例、顺序和列数

   读取可访问的文本清单，选出横图、竖图、长图、缺图和不同优先级，整理标题、说明、链接与展示顺序。

3. 03

   选择实现方式并设计响应式规则

   用任务单说明列宽、间距、图片比例、手机列数和实现选项，设计或开发完成后再进入页面复查。

4. 04

   检查 DOM 顺序、懒加载、分页和真实页面表现

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

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

• 页面预览

  影响：第 5 步 核对视觉顺序与 DOM 阅读顺序、第 6 步 检查懒加载和无限滚动的可访问入口

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

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

收到新截图或结果时，回到已确认的素材 ID、宽度、顺序和列数逐项对照，避免把不同页面的问题混在一起。

列数、列宽、间距、实现方式、断点与加载策略需要结合真实素材、现有框架和设备宽度确定。素材扫描、组件修改、构建检查和页面预览能否执行，取决于所用 Agent 的工具配置、项目资料与操作权限。

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

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