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

网站瀑布流布局设计 Skill不在 WorkBuddy 的前十推荐里——WorkBuddy更擅长中文办公、本地资料和企业协作，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

WorkBuddy 适合内容、品牌和设计团队把 Excel 素材表、PPT 品牌规范、Word 字段说明、PDF 案例稿与页面截图放进同一任务。它可以从真实图片尺寸和内容字段中整理代表样本，输出瀑布流素材清单、结构规格与评审页，方便设计和开发继续实现。

案例墙和 UGC 图片墙的资料常散在多个办公文件里：图片尺寸在 Excel，展示顺序在 Word，品牌间距在 PPT，现状问题留在 PDF 或截图中。WorkBuddy 可以把这些内容整理成横图、竖图、长图和缺图样本，标出列数、间距、标题、链接与手机端需要确认的项目。

1. 01

   判断 Masonry 是否适合当前内容

   读取页面目标、素材表和截图，确认图片高度变化与视觉发现是否占主导；需要整齐比较字段时，在评审稿中保留 Grid 方案。

2. 02

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

   从 Excel、Word、PPT、PDF 和图片中提取尺寸、标题、说明、链接与优先级，选出横图、竖图、长图、缺图和长标题样本。

3. 03

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

   把列宽、间距、自然宽高比、标题位置和手机列数写成可评审规格；CSS 或 JS 的具体选择交给开发结合现有项目确认。

4. 04

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

   WorkBuddy 可核对页面导出与多宽度截图；DOM、渲染 HTML、懒加载触发和分页链接需要开发在真实页面继续检查。

在技能入口导入 Skill，把真实素材清单和当前页面截图加入任务，先要求整理代表样本与缺失字段，不直接修改网站文件。

逐项核对图片尺寸、标题、说明、替代文本、链接和可用条件是否来自上传资料，缺少内容继续标记待确认，不自动补写案例事实。

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

请帮我把「网站瀑布流布局设计 Skill」安装到 WorkBuddy。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-masonry-layout/1.0.0/skill-masonry-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 WorkBuddy 的方式安装：技能 → 添加技能 → 上传技能 → 选择本地技能包
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在“已安装”中搜索 Skill 名称，启用后用一个只读样本任务检查是否被正确调用。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-masonry-layout/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-masonry-layout.md

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