Claude Code × 网站瀑布流布局设计 Skill

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

Claude Code 适合在长期维护的网站项目里统一瀑布流组件、素材类型、设计令牌和项目规则。它可以读取 CLAUDE.md 与组件引用关系，找出哪些页面共享列宽、间距、DOM 与懒加载要求，哪些页面需要保留素材和分页特例，再用项目已有 Hooks 或测试核对变更。

案例墙、作品集和 UGC 图片墙可能共享一套 Masonry 基础，却使用不同素材顺序、标题和分页方式。Claude Code 可以先画出组件引用关系，把稳定的列宽、间距、DOM、空间预留与检查步骤写进共享层；页面特例继续留在各自配置中。

1. 01

   判断 Masonry 是否适合当前内容

   读取项目说明、页面清单和组件引用，按素材比例与浏览方式记录 Masonry/Grid 选择及页面例外。

2. 02

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

   比较各图库的数据类型、异常比例、缺失字段和优先顺序，提取共享约束与页面特有内容。

3. 03

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

   把稳定规则落到共享组件、设计令牌或类型约束；实现方式、列数、标题和页面例外保留在真实项目配置中。

4. 04

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

   运行项目已有 Hooks、测试或构建，核对 DOM、图片加载、分页链接和受影响页面；视觉结果仍需在可用预览中确认。

把 Skill 放入项目技能目录，同时提供 CLAUDE.md、Masonry 组件、设计令牌、素材类型、页面清单和测试命令。

抽查案例墙、作品集和 UGC 图片墙，确认共享列宽、DOM 与加载规则可用，同时页面特有顺序、标题和分页仍正确表达。

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

请帮我把「网站瀑布流布局设计 Skill」安装到 Claude Code。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-masonry-layout/1.0.0/skill-masonry-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 Claude Code 的方式安装：mkdir -p ~/.claude/skills && cp -R ./skill-masonry-layout ~/.claude/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在项目里提一个只读任务并点名 Skill，确认它按 SKILL.md 的步骤复述计划。
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 ~/.claude/skills && cp -R ./skill-masonry-layout ~/.claude/skills/