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

网站瀑布流布局设计 Skill不在 OpenClaw 的前十推荐里——OpenClaw更擅长本地工作区、目录化 Skill、命令和批处理，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

OpenClaw 适合把图片目录、内容数据、瀑布流组件、样式文件与构建命令放进同一本地工作区。它可以先只读扫描图片尺寸、空链接、缺失替代文本和分页输出；获得写入授权后，再修订组件并保留前后检查报告。

案例或 UGC 素材达到几百项时，肉眼很难同时发现异常宽高比、缺图、空链接、顺序漂移和分页遗漏。OpenClaw 可以按素材 ID 扫描图片目录与 JSON、CSV、HTML，再读取构建产物，输出具体文件、条目和页面位置。先跑代表样本，规则确认后再扩到完整目录。

1. 01

   判断 Masonry 是否适合当前内容

   读取素材数量、宽高分布和浏览任务，对照视觉发现与结构化比较需求，记录采用 Masonry 或 Grid 的理由。

2. 02

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

   扫描图片目录、CSV、JSON 或 Markdown，选出横图、竖图、长图、缺图和长标题，并核对内容优先顺序。

3. 03

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

   读取现有组件和依赖，比较 CSS Columns、项目已有 JS 方案或 CSS Grid 近似方式；获准后在指定文件中调整列宽、间距与断点。

4. 04

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

   运行项目已有构建与测试，读取输出 HTML、内容顺序、分页 URL 和链接；具备预览能力时再检查宽度，缺少时输出人工检查清单。

用 CLI 安装包含 SKILL.md 的目录，项目内保留 assets、data、component、pages 和 reports 路径，办公资料先转换成 CSV 或 Markdown。

随机抽查素材 ID，在原始文件、内容数据、组件输入和构建 HTML 中逐层对照，确认图片、顺序、标题、链接和分页没有丢失。

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

请帮我把「网站瀑布流布局设计 Skill」安装到 OpenClaw。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-masonry-layout/1.0.0/skill-masonry-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 OpenClaw 的方式安装：openclaw skills install ./skill-masonry-layout --as masonry_layout_skill
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：运行 openclaw skills list 确认技能已注册，再用一条只读样本命令检查调用。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-masonry-layout/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-masonry-layout.md

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