ZCode × 网站瀑布流布局设计 Skill

网站瀑布流布局设计 Skill不在 ZCode 的前十推荐里——ZCode更擅长长上下文、长任务、项目文件和远程跟进，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

ZCode 适合在较长项目里维护多个视觉内容页和共享 Masonry 组件。它可以把页面清单、组件引用、素材数据与每轮检查记录放进同一项目，先完成一个代表页面，再按共享规则和页面特例分批推进；离开电脑后也能继续跟进待确认项。

官网可能同时有案例墙、作品集、活动相册和 UGC 图片墙，共享瀑布流基础，却使用不同素材顺序、列数和分页方式。ZCode 可以先建立页面—组件—数据对应表，标出共享的 DOM、间距与加载规则和场景例外。每批完成后记录实际文件、代表状态与待确认问题。

1. 01

   判断 Masonry 是否适合当前内容

   引用页面、组件和素材文件，按页面记录视觉发现、结构化比较、素材比例与 Masonry/Grid 选择。

2. 02

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

   每类页面选择横图、竖图、长图、缺图和长标题，建立共享字段、页面特有顺序和主要链接清单。

3. 03

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

   先完成一个代表页面，确认列宽、间距、DOM、手机列数和实现方式后，再更新共享组件或同族页面。

4. 04

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

   每批回看构建产物、页面预览、文件差异与检查记录；没有实际预览的页面继续保留待检查状态。

在用户 Skills 目录安装后刷新启用，把页面清单、组件路径、素材数据、品牌规范和检查命令加入项目，先选一个代表页面。

页面清单记录样本、文件差异、构建 HTML、分页、桌面与手机结果；没有打开或渲染过的页面继续标记待检查。

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

请帮我把「网站瀑布流布局设计 Skill」安装到 ZCode。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-masonry-layout/1.0.0/skill-masonry-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 ZCode 的方式安装：mkdir -p ~/.zcode/skills && cp -R ./skill-masonry-layout ~/.zcode/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在设置页确认技能已启用，对话中输入 $ 选择技能，再跑一个只读小任务。
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 ~/.zcode/skills && cp -R ./skill-masonry-layout ~/.zcode/skills/