VibeMKT Hub

WorkBuddy × 内容与创意 · 可处理 6/6 个环节

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

网站瀑布流布局设计 Skill有 6 个执行步骤，WorkBuddy 可以处理 6 步，其中 2 步需要相应工具与配置。它能直接读取本机目录里的资料，正好对应这个 Skill 里最吃工具的一段。页面预览属于有条件支持，执行路径和原生能力不同，下面单独说明。

  • 6个核心环节
  • 6/6当前可处理的环节
  • 未进前十在本 Agent 的推荐清单

WHY WORKBUDDY

适配结论

WorkBuddy 适合内容、品牌和设计团队把 Excel 素材表、PPT 品牌规范、Word 字段说明、PDF 案例稿与页面截图放进同一任务

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

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

CAPABILITY × STEP

核心差异

把素材表、品牌规范和截图整理成瀑布流评审稿

网站瀑布流布局设计 Skill 共 6 个环节。WorkBuddy 可以处理 6 个环节，其中 2 个需要相应工具与配置。实际结果取决于输入资料、已接入工具与运行环境。

6个核心环节
6当前可处理的环节
2个需要工具与配置
无需要团队补充
WorkBuddy 跑 网站瀑布流布局设计 Skill 的逐步对照 · 每步要做什么见 网站瀑布流布局设计 Skill原生页面
步骤所需能力等级在 WorkBuddy 下具体怎么做
01 先判断 Masonry 是否适合当前内容 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
02 用真实素材确认比例与内容顺序 读本地资料 直接执行 直接交给 WorkBuddy：它能直接读取本机目录里的资料。
03 确定列宽、列数和统一间距 写本地文件 直接执行 直接交给 WorkBuddy：它能把过程文件和成果直接落盘保存。
04 按现有项目选择实现方式 读本地资料写本地文件 直接执行 直接交给 WorkBuddy：它能直接读取本机目录里的资料。
05 核对视觉顺序与 DOM 阅读顺序 页面预览 有条件 可以做但有条件：WorkBuddy 对页面预览的支持有限制。
06 检查懒加载和无限滚动的可访问入口 读本地资料页面预览 有条件 可以做但有条件：WorkBuddy 对页面预览的支持有限制。

案例墙和 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、懒加载触发和分页链接需要开发在真实页面继续检查。

IMPORT · RUN

资料导入与任务下发

上传素材表、品牌规范和页面截图

WorkBuddy可以直接读取目录里的资料，把这些文件放在同一个位置即可。

需要准备的资料

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

在 WorkBuddy 里是这样推进的

把产品介绍、客户反馈、销售表格或历史方案拖进 WorkBuddy，并直接说清这次要完成的营销任务。

选择一个 Skill 后，用中文说清要完成的任务。需要多种专业能力时，可以让多个专家分工完成。

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

COLLABORATE · CHAIN

协作与后续衔接

素材、视觉和实现分别确认

内容负责人确认标题、顺序和可用条件，设计负责人确认列宽与间距，开发负责人确认 DOM、懒加载、分页和真实设备表现。

素材清单确认后再生成设计与开发任务单

先锁定真实图片、标题、链接和展示顺序，再把桌面、手机、实现与分页要求拆成任务，减少围绕理想占位图的反复修改。

COMBINATION CASE

场景化实战案例

示例：整理案例作品墙评审稿

假设团队有 48 个案例，图片尺寸和标题保存在 Excel，品牌间距在 PPT，当前页面截图显示长图被等高裁切。

  1. 提取素材尺寸与字段
  2. 标记横图、竖图和长图
  3. 比较 Masonry 与 Grid
  4. 整理桌面和手机规格
  5. 生成评审页与责任人表

预期结果：交付 Excel 素材检查表和 PPT 评审页；组件实现、DOM 顺序、分页链接与真实设备检查由设计和开发继续完成。

VERIFY · TROUBLESHOOT

效果验证方法

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

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

可直接使用的第一个任务

请在 WorkBuddy 中使用「网站瀑布流布局设计 Skill」。本次要完成：客户案例墙同时有横版截图、竖版海报和长图，等高裁切遮住了关键信息。我会提供目标页面 URL、截图或线框图，以及页面用于作品集、案例墙、UGC 图片墙、活动相册或视觉发现的说明和一组真实图片或视频封面样本，包括宽高尺寸、标题、说明、替代文本、主要链接和可用条件。请先完成一份小样，交付布局选择说明：Masonry、Grid、Bento 或 Carousel 的适用理由、内容范围与取舍和瀑布流结构稿：列数、列宽、间距、图片宽高比、标题位置、链接区域与内容顺序，并列出需要我确认的金额、日期、适用人群和目标链接。

安装后的最小验证任务

安装完成后，先只做第 2 步：让 WorkBuddy 用真实素材确认比例与内容顺序，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

WorkBuddy 常见问题

  • 没有读到资料时，把文件重新拖进当前任务
  • 没有调用 Skill 时，直接说出 Skill 名称和要完成的任务
  • 结果太宽泛时，补充真实产品、客户和竞品资料
  • 页面预览相关步骤结果不稳定时，先确认当前环境是否满足条件
WorkBuddy 跑网站瀑布流布局设计 Skill需要改哪几步？

6 个环节里有 6 个可以处理，其中 2 个需要相应工具与配置。请结合逐步说明确认实际做法。

资料要怎么交给 WorkBuddy？

WorkBuddy可以直接读取目录里的资料，把这些文件放在同一个位置即可。

装完先做什么验证？

安装完成后，先只做第 2 步：让 WorkBuddy 用真实素材确认比例与内容顺序，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

什么任务更适合选 WorkBuddy？

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

WorkBuddy 常见的失败情况有哪些？

没有读到资料时，把文件重新拖进当前任务；没有调用 Skill 时，直接说出 Skill 名称和要完成的任务；结果太宽泛时，补充真实产品、客户和竞品资料。

评审意见回写到同一份素材表

记录图片取舍、内容顺序、列数、间距和手机方案的修改原因，并保留日期版本，方便下一轮对照。

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

INSTALL

安装到 WorkBuddy

把网站瀑布流布局设计 Skill装进 WorkBuddy，点几下完成

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

METHOD 01 · 让 WorkBuddy 引导安装

复制提示词

先下载 ZIP，再按照 WorkBuddy 的提示进入技能板块上传本地技能包；当前任务无法操作技能板块时，由用户完成最后的上传和启用。

请帮我把「网站瀑布流布局设计 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

OTHER AGENTS

跨 Agent 适配对比

TRAE、ZCode在这个 Skill 上覆盖更多环节

下面的步数来自逐步比对。卡在哪一步，就看哪个 AI 能直接完成那一步。

6/6 步可直接执行

TRAE 网站瀑布流布局设计

TRAE在这个 Skill 上直接覆盖 6/6 步，而且能把成果渲染成可直接查看的页面——如果你这次的卡点正是页面预览，换它更省事。

6/6 步可直接执行

ZCode 网站瀑布流布局设计

ZCode在这个 Skill 上直接覆盖 6/6 步，而且能把成果渲染成可直接查看的页面——如果你这次的卡点正是页面预览，换它更省事。

FURTHER READING

WorkBuddy 与网站瀑布流布局设计相关的实操文章

继续了解网站网格、内容卡片、轮播组件与图片优化的具体做法。

营销邮件打开率突然下降，先查送达、名单还是内容

这次营销邮件发出后，打开率比往期低了不少。内容同事先改主题行，运营把发送时间从上午挪到晚上，第二轮数据仍没有起色。这样的排查很常见，问题在于打开率把几件事压成了一个数字：平台怎样统计、邮件有没有被接收

  • Vibe Marketing
  • 营销自动化
  • 内容营销
  • 营销分析

免费工具访问量很高，为什么销售还是收不到好线索

假设一家 SaaS 公司上线了 ROI 计算器。三个月后，工具页的自然流量和使用次数都在涨，市场团队把它当作新的获客入口，销售却说收到的邮箱很难跟进：有人只想算一道题，有人来自目标行业之外，还有人留下

  • SEO
  • B2B获客
  • 增长策略
  • 营销分析

订阅弹窗提交率很高，为什么欢迎邮件还是没人点

订阅弹窗的周报很容易给人一种乐观错觉：新版提交率明显上涨，于是团队宣布测试胜出。打开欢迎邮件报告后，点击、优惠使用和购买却没有同步变化。这是一个假设场景，它说明了一种常见误判——团队赢了弹窗这一段，却

  • 营销自动化
  • 内容营销
  • 转化文案
  • 转化率

播客每期都在更新，为什么用户还是搜不到单集

一档节目已经接上 RSS，Apple Podcasts、Spotify 和 YouTube 都能正常播放。团队每周更新，也会在公众号、社媒和社群里贴链接。可一旦让没听过节目的人直接搜本期讨论的话题，他

  • SEO
  • 内容策略
  • 内容营销
  • 内容运营

转化率掉了别盯按钮颜色，来的人可能已经换了一批

流量结构一变，后台最显眼的数字就是转化率往下掉。很多人的反应是改按钮颜色、改表单字段、再开一轮首屏测试。这些能测，但排在后面。转化率是「来的人里有多少做了你要的动作」，来的人换了，动作完成率一定会动。

  • 转化率
  • AARRR
  • 落地页

NEXT WORKFLOW

搭配使用

单个条目内的字段与链接可结合内容卡片设计；图片比例一致或需要整齐比较时可用网格，一次聚焦少量内容时可用轮播，图片加载与尺寸处理另用对应 Skill。

WorkBuddy · SEO 与 GEO#03

WorkBuddy 导航站收录 Skill

用 WorkBuddy 完成「新产品准备在 Product Hunt 做首发」，最终得到带网址与收录状态的 CSV 跟踪表单。

来源项目 · coreyhaines31/marketingskills ★ 52,924 · Fork 7,914

VibeMKT COMMUNITY

加入 VibeMKT 社群

微信扫码，交流营销 Skill 的选择、安装、试用与业务化改造。

加入 VibeMKT 社群的微信二维码

二维码会持续显示，关闭弹窗后返回当前页面。