# 网站瀑布流布局设计 Skill 安装指南

> 面向 AI Agent 的机器可读安装说明。HTML 页面不能直接当作 Skill 文件安装。

- 技能包：https://www.vibemarketing.work/packages/skill-masonry-layout/1.0.0/skill-masonry-layout.zip
- 原始 SKILL.md：https://www.vibemarketing.work/raw/skill-masonry-layout/SKILL.md
- 校验：https://www.vibemarketing.work/packages/skill-masonry-layout/1.0.0/SHA256SUMS
- 版本：1.0.0｜许可证：MIT｜上游：https://github.com/kostja94/marketing-skills/blob/70987bad4ebe9dce1f74858c1c64f3f8810f18e4/skills/components/layout/masonry/SKILL.md

## 通用步骤

1. 下载完整 ZIP 并解压，保留 SKILL.md 及全部配套文件。
2. 按下面对应 Agent 的方式放入其技能目录。
3. 安装完成后报告实际安装目录。
4. 用一个只读小任务验证 Skill 已被识别。
5. 若缺少联网、下载或写目录权限，直接告知用户需要手工完成的步骤。

## 各 Agent 安装方式

### WorkBuddy

```text
技能 → 添加技能 → 上传技能 → 选择本地技能包
```

验证：在“已安装”中搜索 Skill 名称，启用后用一个只读样本任务检查是否被正确调用。

### OpenClaw

```text
openclaw skills install ./skill-masonry-layout --as masonry_layout_skill
```

验证：运行 openclaw skills list 确认技能已注册，再用一条只读样本命令检查调用。

### Hermes Agent

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

验证：在消息入口里发一条只读任务，确认 Hermes 报出 Skill 名称与将要执行的步骤。

### Codex

```text
mkdir -p ~/.codex/skills && cp -R ./skill-masonry-layout ~/.codex/skills/
```

验证：让 Codex 列出可用 Skill 并复述本次要执行的步骤，再跑一个只读小任务。

### Claude Code

```text
mkdir -p ~/.claude/skills && cp -R ./skill-masonry-layout ~/.claude/skills/
```

验证：在项目里提一个只读任务并点名 Skill，确认它按 SKILL.md 的步骤复述计划。

### TRAE

```text
在 Skills 设置中导入包含 SKILL.md 的 skill-masonry-layout 目录；项目级 Skill 可放入 .agents/skills/skill-masonry-layout
```

验证：在 Skills 设置里确认已启用，再让它对一个页面或一份材料做只读检查。

### ZCode

```text
mkdir -p ~/.zcode/skills && cp -R ./skill-masonry-layout ~/.zcode/skills/
```

验证：在设置页确认技能已启用，对话中输入 $ 选择技能，再跑一个只读小任务。

## 这个 Skill 做什么

为作品集、案例墙、UGC 图片墙和视觉灵感库设计响应式瀑布流。根据真实图片的宽高比安排列数、间距与阅读顺序，并补齐懒加载和分页入口。

需要准备：目标页面 URL、截图或线框图，以及页面用于作品集、案例墙、UGC 图片墙、活动相册或视觉发现的说明；一组真实图片或视频封面样本，包括宽高尺寸、标题、说明、替代文本、主要链接和可用条件；内容优先顺序、用户主要浏览任务、预计条目数量，以及当前采用 Grid、Masonry、Bento 或 Carousel 的原因与问题；品牌间距与组件规范、手机和桌面宽度、现有 HTML、CSS、前端框架、懒加载、无限滚动与分页方式

最终交付：布局选择说明：Masonry、Grid、Bento 或 Carousel 的适用理由、内容范围与取舍；瀑布流结构稿：列数、列宽、间距、图片宽高比、标题位置、链接区域与内容顺序；实现与响应式说明：CSS Columns、JS 库或 CSS Grid 近似方案，以及手机、平板和桌面变化；检查清单：DOM 阅读顺序、真实素材适配、懒加载、分页 URL、渲染 HTML 与页面表现