VibeMKT Hub

TRAE × 内容与创意 · 原生覆盖 71%

TRAE × 网页标签页与折叠区块设计 Skill

网页标签页与折叠区块设计 Skill有 7 个执行步骤，其中 5 步可以在 TRAE 里直接完成。它能把成果渲染成可直接查看的页面，正好对应这个 Skill 里最吃工具的一段。操作前确认属于有条件支持，执行路径和原生能力不同，下面单独说明。

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

WHY TRAE

适配结论

TRAE 适合需要边改边看标签与折叠交互的团队

网页标签页与折叠区块设计 Skill不在 TRAE 的前十推荐里——TRAE更擅长营销工作与网站、落地页和程序化 SEO，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

TRAE 适合需要边改边看标签与折叠交互的团队。Work 先整理页面目标、内容主次和分组，IDE 定位数据与组件，页面预览核对桌面、手机、标签切换、焦点和默认状态。确认文案与目标组件后，可以应用改动并运行构建；真实设备表现和生产发布仍由团队确认。

页面预览

把成果渲染成可直接查看的页面。页面类成果可以直接预览并按屏幕尺寸检查，是它最独特的一项

CAPABILITY × STEP

核心差异

桌面标签与手机折叠可以随改随看

网页标签页与折叠区块设计 Skill 共 7 个环节。TRAE 可直接执行 5 个环节（含 2 个仅需判断的环节），2 个需要相应工具与配置。判断质量取决于输入资料与具体推理。

5步可直接执行
2步有条件支持
无需手工衔接的步骤
71%原生覆盖率
TRAE 跑 网页标签页与折叠区块设计 Skill 的逐步对照 · 每步要做什么见 网页标签页与折叠区块设计 Skill原生页面
步骤所需能力等级在 TRAE 下具体怎么做
01 确认父页面与内容主次 写本地文件页面预览操作前确认 有条件 可以做但有条件：TRAE 对操作前确认的支持有限制。
02 检查各项是否围绕同一主题 联网检索页面预览 直接执行 直接交给 TRAE：它能自己发起搜索并扩展检索词。
03 选择标签页或纵向折叠 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
04 编写描述性标签 打开网页取正文 直接执行 直接交给 TRAE：它能访问原始页面并抽取正文。
05 让正文进入初始 HTML 打开网页取正文页面预览 直接执行 直接交给 TRAE：它能访问原始页面并抽取正文。
06 补齐交互与移动端规格 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
07 回读页面并完成检查 打开网页取正文运行脚本页面预览操作前确认 有条件 可以做但有条件：TRAE 对操作前确认的支持有限制。

TRAE 把任务说明、代码调整和页面预览连续起来。Work 固定主要信息、分组和标签，IDE 从共享数据实现组件，预览窗口检查当前项、键盘焦点、手机滚动和正文完整性。判断标准是切换显示不丢内容，关闭交互后仍能从页面输出中找到全部正文。

  1. 01

    确认父页面与内容主次

    在 Work 读取页面要求、产品资料和现有稿，明确主要信息、补充内容、主 CTA 与代表页面。

  2. 02

    按同一主题分组并选择组件

    在 IDE 对照页面数据和用户问题，整理主题分组、独立页面候选与响应式形式。

  3. 03

    编写标签文案与实现规格

    沿用项目设计系统写具体标签、回答开头、默认状态、焦点和选中关系。

  4. 04

    检查初始 HTML、交互和移动端

    用页面预览检查桌面、平板、手机、键盘焦点、切换和正文，并运行构建任务。

IMPORT · RUN

资料导入与任务下发

在项目导入 Skill、产品资料和代表页面

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

需要准备的资料

  • 父页面 URL、页面类型、目标读者、访问意图和区块预定位置
  • 需要组织的标题、正文、规格、问题或异议，以及各内容项的重要程度
  • 新建区块需说明页面实现方式；改造现有区块时提供组件代码、初始 HTML、默认状态、点击后请求方式和现有样式
  • 桌面与手机布局、键盘操作、品牌语气、设计系统和前端实现限制

在 TRAE 里是这样推进的

研究和写作任务可以在 TRAE Work 中准备资料；落地页、网站和程序化 SEO 项目放进 TRAE IDE。

导入 Skill 后，可以创建研究、文案、设计和开发角色分工完成，再用 MCP 读取已授权的数据和资料。

项目级 Skill 放入 .agents/skills/，把真实内容、目标组件和预览页面纳入工作区，先生成改动清单。

COLLABORATE · CHAIN

协作与后续衔接

围绕页面预览确认内容与交互

围绕页面预览确认内容与交互

产品确认事实，内容确认分组与标签，设计和开发在预览中确认默认状态、焦点和手机形式。

Work 中的分组稿进入 IDE 和预览

先在 Work 固定内容，再在 IDE 修改数据与组件，用预览和构建任务完成检查。

COMBINATION CASE

场景化实战案例

示例：产品页修复手机端规格标签

示例：产品页修复手机端规格标签

假设桌面端四个横向规格标签可用，手机端文字被截断，后续正文还需要点击后请求。

  1. 确认四组内容
  2. 检查组件数据
  3. 改为初始 HTML 全量输出
  4. 手机端改用折叠
  5. 预览三种宽度

预期结果：交付物应包含分组稿、组件差异和多宽度预览记录；真实设备与发布由团队确认。

VERIFY · TROUBLESHOOT

效果验证方法

分别预览桌面、平板和手机，检查标签顺序、当前状态、焦点、滚动与全部正文

分别预览桌面、平板和手机，检查标签顺序、当前状态、焦点、滚动与全部正文。

可直接使用的第一个任务

请在 TRAE 中使用「网页标签页与折叠区块设计 Skill」。本次要完成：SaaS 产品页要把功能、集成、部署和服务说明分组，同时保留首屏价值主张与主 CTA。我会提供父页面 URL、页面类型、目标读者、访问意图和区块预定位置和需要组织的标题、正文、规格、问题或异议，以及各内容项的重要程度。请先完成一份小样，交付区块选型说明：页面位置、内容主次、横向标签或纵向折叠的选择理由和内容分组表：每组主题、标签或 summary 文案、正文、默认状态和独立页面建议，并列出需要我核对的事实和数字。

安装后的最小验证任务

安装完成后，先只做第 4 步：让 TRAE 编写描述性标签，并把它访问原始页面并抽取正文的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

TRAE 常见问题

  • 没有调用 Skill 时，在 Skills 设置中确认已经启用
  • 项目级 Skill 未出现时，检查 .agents/skills 目录
  • 页面结果不合适时，打开预览并指出具体区块和屏幕尺寸
  • 操作前确认相关步骤结果不稳定时，先确认当前环境是否满足条件
TRAE 跑网页标签页与折叠区块设计 Skill需要改哪几步？

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

资料要怎么交给 TRAE？

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

装完先做什么验证？

安装完成后，先只做第 4 步：让 TRAE 编写描述性标签，并把它访问原始页面并抽取正文的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

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

因为它能把成果渲染成可直接查看的页面，在 7 个 Agent 里具备这些能力的不多。如果你的卡点不在这里，页面下方列出了更合适的选择。

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

没有调用 Skill 时，在 Skills 设置中确认已经启用；项目级 Skill 未出现时，检查 .agents/skills 目录；页面结果不合适时，打开预览并指出具体区块和屏幕尺寸。

按预览结果记录组件问题

记录页面、组件、断点、面板数量和待修问题，修复后在同一组宽度重新检查。

INSTALL

安装到 TRAE

把网页标签页与折叠区块设计 Skill装进 TRAE，点几下完成

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

METHOD 01 · 交给 AI 自己装

复制提示词

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

请帮我把「网页标签页与折叠区块设计 Skill」安装到 TRAE。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-tab-accordion/1.0.0/skill-tab-accordion.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 TRAE 的方式安装：在 Skills 设置中导入包含 SKILL.md 的 skill-tab-accordion 目录；项目级 Skill 可放入 .agents/skills/skill-tab-accordion
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在 Skills 设置里确认已启用，再让它对一个页面或一份材料做只读检查。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-tab-accordion/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-tab-accordion.md

OTHER AGENTS

跨 Agent 适配对比

WorkBuddy、Codex、Claude Code在这个 Skill 上覆盖更多环节

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

3/7 步可直接执行

WorkBuddy 网页标签页与折叠区块设计

WorkBuddy在这个 Skill 上直接覆盖 3/7 步，而且能在敏感写入前请求确认——如果你这次的卡点正是操作前确认，换它更省事。

3/7 步可直接执行

Codex 网页标签页与折叠区块设计

Codex在这个 Skill 上直接覆盖 3/7 步，而且能在敏感写入前请求确认——如果你这次的卡点正是操作前确认，换它更省事。

FURTHER READING

TRAE 与网页标签页与折叠区块设计相关的实操文章

围绕 TRAE 和这个任务的共同标签挑出来的，换成别的 Agent 看到的不是同一批。

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

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

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

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

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

  • 转化率
  • AARRR
  • 落地页

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

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

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

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

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

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

  • Vibe Marketing
  • SEO
  • 关键词研究

NEXT WORKFLOW

搭配使用

按产出物与输入资料的衔接关系计算，都是同一个 Agent 下的版本，装完可以直接接着跑。

TRAE · 出海增长#01

TRAE 应用商店优化 Skill

用 TRAE 完成「App Store 的自然搜索流量已经停滞」，最终得到六维 ASO 评分卡与总分评级。

来源项目 · coreyhaines31/marketingskills ★ 47,379 · Fork 7,380
TRAE · 内容与创意#02

TRAE 网站内容卡片设计 Skill

用 TRAE 完成「SaaS 工具目录的卡片同时放功能、价格、标签和多个按钮，访客很难快速比较」，最终得到卡片字段规格：必填、选填、显示顺序、文字长度和缺失内容处理。

来源项目 · kostja94/marketing-skills ★ 954 · Fork 132
TRAE · 数据与自动化#03

TRAE 营销动作效果验证 Skill

用 TRAE 完成「测了五条短视频开头数据需要决定留哪条」，最终得到包含基线和测试组各核心指标变化的 Markdown 对照表。

来源项目 · ericosiu/ai-marketing-skills ★ 3,488 · Fork 681

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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