VibeMKT Hub

WorkBuddy × 内容与创意 · 原生覆盖 67%

WorkBuddy × 网站列表布局设计 Skill

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

  • 4/6步可直接执行
  • 无需手工衔接的步骤
  • 未进前十在本 Agent 的推荐清单

WHY WORKBUDDY

适配结论

WorkBuddy 适合市场、内容和设计团队把 Excel 文章表、Word 字段说明、PPT 品牌规范与页面截图放进同一任务

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

WorkBuddy 适合市场、内容和设计团队把 Excel 文章表、Word 字段说明、PPT 品牌规范与页面截图放进同一任务。它可以从真实条目中整理标题长度、摘要缺失、日期格式和分类差异，输出列表字段表与评审页，方便设计和开发继续实现。

CAPABILITY × STEP

核心差异

把文章表和页面截图整理成列表评审稿

网站列表布局设计 Skill 共 6 个环节。WorkBuddy 可直接执行 4 个环节（含 2 个仅需判断的环节），2 个需要相应工具与配置。判断质量取决于输入资料与具体推理。

4步可直接执行
2步有条件支持
无需手工衔接的步骤
67%原生覆盖率
WorkBuddy 跑 网站列表布局设计 Skill 的逐步对照 · 每步要做什么见 网站列表布局设计 Skill原生页面
步骤所需能力等级在 WorkBuddy 下具体怎么做
01 先根据浏览任务选择 List 或 Grid 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
02 用真实条目确定保留哪些字段 读本地资料 直接执行 直接交给 WorkBuddy：它能直接读取本机目录里的资料。
03 选择列表变体和内容密度 写本地文件 直接执行 直接交给 WorkBuddy：它能把过程文件和成果直接落盘保存。
04 统一标题位置与可点击范围 写本地文件 直接执行 直接交给 WorkBuddy：它能把过程文件和成果直接落盘保存。
05 分别检查手机和桌面列表 页面预览 有条件 可以做但有条件：WorkBuddy 对页面预览的支持有限制。
06 给无限滚动目录保留分页入口 读本地资料页面预览 有条件 可以做但有条件：WorkBuddy 对页面预览的支持有限制。

内容列表的资料常分散在不同办公文件里：文章清单在 Excel，字段说明在 Word，字体与间距在 PPT，现状问题留在截图中。WorkBuddy 可以把这些内容整理成代表条目、字段层级、桌面与手机密度问题，并标出需要内容、设计或开发确认的项目。

  1. 01

    判断 List 是否适合当前内容

    读取页面目标和截图，确认用户是否主要按标题、日期或状态查找；图片承担主要识别作用时在评审表中保留 Grid 方案。

  2. 02

    用真实条目确定字段与信息层级

    从 Excel、Word、PPT 或 PDF 提取长标题、缺少摘要、不同日期和状态，整理标题、摘要、作者、分类与链接的保留顺序。

  3. 03

    设计列表密度、链接区域和响应式规则

    把简洁、丰富、表格式或带缩略图列表的选择，以及手机全宽、触控区域、换行和整行链接写成可评审规格。

  4. 04

    检查分页、构建内容和真实页面表现

    WorkBuddy 可核对页面导出与截图；构建 HTML、分页链接、可点击范围和触控体验需要开发在真实页面中继续检查。

IMPORT · RUN

资料导入与任务下发

上传内容表、字段说明和页面截图

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

需要准备的资料

  • 目标页面 URL、截图或线框图，以及列表用于博客、文档、搜索结果、资源中心或其他目录的说明
  • 一组真实条目样本，包括标题、摘要、日期、作者、分类、状态、缩略图和链接等可用字段
  • 用户主要按什么信息查找内容、预计条目数量、当前采用 List、Grid 或卡片的原因与问题
  • 品牌字体与间距规范、手机和桌面宽度、现有 HTML、CSS、组件及分页或无限滚动方式

在 WorkBuddy 里是这样推进的

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

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

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

COLLABORATE · CHAIN

协作与后续衔接

字段、视觉和实现分别确认

字段、视觉和实现分别确认

内容负责人确认标题、摘要与元数据，设计负责人确认层级和密度，开发负责人确认链接区域、分页和真实设备表现。

字段确认后再生成设计与开发任务单

先锁定真实条目和必要字段，再把桌面、手机、链接范围与分页要求拆成任务，减少围绕理想占位内容的反复修改。

COMBINATION CASE

场景化实战案例

示例：整理博客文章列表评审稿

示例：整理博客文章列表评审稿

假设团队有 60 篇文章，信息保存在 Excel，品牌规范在 PPT，页面截图显示作者、日期和分类挤在一行。

  1. 抽取文章字段与标题长度
  2. 标记长标题和缺摘要样本
  3. 确定标题与元数据层级
  4. 整理桌面和手机密度
  5. 生成评审页和责任人表

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

VERIFY · TROUBLESHOOT

效果验证方法

逐项核对标题、摘要、作者、日期、分类、链接和状态是否来自上传资料，缺少内容继续标记待确认，不自动补写文章事实

逐项核对标题、摘要、作者、日期、分类、链接和状态是否来自上传资料，缺少内容继续标记待确认，不自动补写文章事实。

可直接使用的第一个任务

请在 WorkBuddy 中使用「网站列表布局设计 Skill」。本次要完成：博客索引同时显示标题、摘要、作者、日期和分类，信息挤在一起，用户难以顺着标题浏览。我会提供目标页面 URL、截图或线框图，以及列表用于博客、文档、搜索结果、资源中心或其他目录的说明和一组真实条目样本，包括标题、摘要、日期、作者、分类、状态、缩略图和链接等可用字段。请先完成一份小样，交付布局选择说明：List 或 Grid 的适用理由、列表变体与内容范围和列表结构稿：标题、摘要、元数据、缩略图、分隔与整行链接的层级和顺序，并列出需要我核对的事实和数字。

安装后的最小验证任务

安装完成后，先只做第 2 步：让 WorkBuddy 用真实条目确定保留哪些字段，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

WorkBuddy 常见问题

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

6 步里 4 步可直接执行，2 步需要相应工具与配置。请结合逐步说明确认实际做法。

资料要怎么交给 WorkBuddy？

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

装完先做什么验证？

安装完成后，先只做第 2 步：让 WorkBuddy 用真实条目确定保留哪些字段，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

为什么选 WorkBuddy 而不是别的 Agent？

这个 Skill 用到的都是通用能力，7 个 Agent 差别不大，可以按你已经在用的工具来选。

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

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

评审意见回写到同一份字段表

记录保留字段、层级、密度和截断方式的修改原因，并保留日期版本，方便下一轮对照。

列表变体、字段数量、间距、字号、截断方式和断点需要结合真实内容、设备宽度与现有设计系统确定。文件扫描、组件修改、构建检查和页面预览能否执行，取决于所用 Agent 的工具配置、项目资料与操作权限。

INSTALL

安装到 WorkBuddy

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

把提示词复制给 WorkBuddy，它会自己下载 ZIP 并完成安装，装完会报告实际目录。

METHOD 01 · 交给 AI 自己装

复制提示词

适合大多数情况。Agent 会下载 ZIP、解压、放到正确目录，并在缺少权限时告诉你需要手工做哪一步。

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

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

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

  • 转化率
  • AARRR
  • 落地页

分享到 LinkedIn 的标题，别拿页面 Title 直接去灌

文章页点了分享，LinkedIn 和 X 上弹出来的卡片，用的经常是页面后台 Title。后台 Title 是写给搜索和浏览器标签的，里面会塞栏目名、品牌名、竖线分隔，拿到信息流里又长又像后台。分享卡

  • 海外社媒
  • 内容分发
  • 落地页

关键词拓展Skill怎么用：输入输出契约与验收标准

关键词拓展 Skill 的正确用法，是把它当成一个有明确输入输出契约的执行单元：你交给它种子词、业务边界和排除规则，它返回一张带意图标注的候选词表。多数人调用后拿到一堆不可用的词，问题不在 Skill

  • Vibe Marketing
  • SEO
  • 关键词研究

相似关键词该合并还是分开写：三步意图判断法

相似关键词该合并还是分开写，取决于读者要完成的任务是否同一件，而不取决于字面差了几个字。先判断搜索意图、答案框架和独占信息能不能独立成立，再决定一页还是两页。写成两篇却回答同一问题，传统搜索会互相抢排

  • Vibe Marketing
  • SEO
  • 关键词研究

NEXT WORKFLOW

搭配使用

单个列表项内的字段和层级可结合内容卡片设计；图片承担主要识别作用时可考虑网格，逐项聚焦时可考虑轮播，博客栏目规划与内容矩阵另用博客列表页 Skill。

WorkBuddy · SEO 与 GEO#03

WorkBuddy 导航站收录 Skill

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

来源项目 · coreyhaines31/marketingskills ★ 47,379 · Fork 7,380

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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