VibeMKT Hub

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

TRAE × 网站内容卡片设计 Skill

网站内容卡片设计 Skill有 6 个执行步骤，其中 6 步可以在 TRAE 里直接完成。它能把成果渲染成可直接查看的页面，正好对应这个 Skill 里最吃工具的一段。这个 Skill 用到的能力它全部原生支持，不需要额外的手工衔接。

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

WHY TRAE

适配结论

TRAE 适合在网站项目里边做边看内容卡片

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

TRAE 适合在网站项目里边做边看内容卡片。市场同事提供真实样本与主要动作，开发在组件中调整图片、标题、说明、元数据和 CTA；具备页面预览时，可以切换桌面与手机宽度，直接核对长标题、缺图、悬停和焦点状态。

页面预览

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

CAPABILITY × STEP

核心差异

在网站预览中对照长标题、缺图和手机单列状态

网站内容卡片设计 Skill 共 6 个环节。TRAE 可直接执行 6 个环节（含 2 个仅需判断的环节）。判断质量取决于输入资料与具体推理。

6步可直接执行
无有条件支持的步骤
无需手工衔接的步骤
100%原生覆盖率
TRAE 跑 网站内容卡片设计 Skill 的逐步对照 · 每步要做什么见 网站内容卡片设计 Skill原生页面
步骤所需能力等级在 TRAE 下具体怎么做
01 先确认卡片承载什么内容和动作 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
02 用真实样本筛选必要字段 读本地资料 直接执行 直接交给 TRAE：它能直接读取本机目录里的资料。
03 排出图片、标题和说明的视觉层级 写本地文件 直接执行 直接交给 TRAE：它能把过程文件和成果直接落盘保存。
04 把单卡设计与外层排列分开 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
05 补齐响应式和交互状态 写本地文件页面预览 直接执行 直接交给 TRAE：它能把过程文件和成果直接落盘保存。
06 检查缩略图、链接和所在页面语义 读本地资料页面预览 直接执行 直接交给 TRAE：它能直接读取本机目录里的资料。

卡片规格写得再完整，也要放进真实页面才知道是否好用。TRAE 可以让设计和开发围绕同一项目检查代表状态：正常图片、缺图、长标题、长摘要和不同 CTA。反馈写清页面、屏幕宽度和具体问题，下一轮就能直接定位到组件或样式。

  1. 01

    确认卡片类型、浏览任务与主要动作

    打开目标页面与组件，确认用户是在浏览产品、文章、模板还是工具，并标出唯一主要动作。

  2. 02

    用真实样本筛选字段并确定层级

    把正常与极端内容接入组件，删去无助于浏览的字段，保留真实缺失状态。

  3. 03

    设计卡片结构、图片和交互状态

    在获准网站文件中调整结构和样式，使用轻微阴影或位移表达悬停，避免缩放引发布局跳动。

  4. 04

    在桌面与手机宽度检查代表样稿

    切换多种宽度核对换行、图片裁切、卡片高度、焦点和触屏操作；无法预览时交付静态页面供浏览器检查。

IMPORT · RUN

资料导入与任务下发

启用 Skill 后打开真实页面项目

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

需要准备的资料

  • 目标页面 URL、截图或线框图，以及卡片承载的产品、文章、模板、工具或资源类型
  • 真实内容样本，包括标题、图片、说明、价格、作者、日期、分类或状态等可用字段
  • 页面主要浏览任务、每张卡片的主要动作，以及点击后进入的真实页面或流程
  • 品牌字体、颜色、间距与组件规范，桌面和手机宽度，以及现有 HTML 或前端组件限制

在 TRAE 里是这样推进的

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

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

提供目标路由、卡片组件、样本数据、品牌规范和允许修改的文件，先复制一个代表状态做评审。

COLLABORATE · CHAIN

协作与后续衔接

视觉反馈写成页面加宽度加对象

视觉反馈写成页面加宽度加对象

例如，产品目录在 390px 宽度下，第三张卡片的标题压住按钮，比只说卡片太挤更容易让开发准确修改。

单卡先稳定，再调整外层列数

先确认字段、图片和 CTA，再决定 Grid 或 List 的列数；外层布局变化后重新检查同一组极端样本。

COMBINATION CASE

场景化实战案例

示例：修订模板卡片的手机端层级

示例：修订模板卡片的手机端层级

假设桌面端模板卡片有缩略图、名称、两行说明和预览按钮，手机端图片过高，按钮被推到很远。

  1. 接入五条真实模板
  2. 缩短非必要说明
  3. 调整图片容器
  4. 保持预览为主要动作
  5. 对照桌面与手机预览

预期结果：交付组件与样式差异、代表状态截图和剩余问题列表；点击效果仍需上线后的真实数据另行观察。

VERIFY · TROUBLESHOOT

效果验证方法

正常、长标题、缺图、长说明和空元数据同时出现，桌面与手机都确认内容没有遮挡、跳动或操作冲突

正常、长标题、缺图、长说明和空元数据同时出现，桌面与手机都确认内容没有遮挡、跳动或操作冲突。

可直接使用的第一个任务

请在 TRAE 中使用「网站内容卡片设计 Skill」。本次要完成：SaaS 工具目录的卡片同时放功能、价格、标签和多个按钮，访客很难快速比较。我会提供目标页面 URL、截图或线框图，以及卡片承载的产品、文章、模板、工具或资源类型和真实内容样本，包括标题、图片、说明、价格、作者、日期、分类或状态等可用字段。请先完成一份小样，交付卡片字段规格：必填、选填、显示顺序、文字长度和缺失内容处理和代表卡片样稿：图片、标题、说明、元数据与主要 CTA 的视觉层级，并列出需要我核对的事实和数字。

安装后的最小验证任务

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

TRAE 常见问题

  • 没有调用 Skill 时，在 Skills 设置中确认已经启用
  • 项目级 Skill 未出现时，检查 .agents/skills 目录
  • 页面结果不合适时，打开预览并指出具体区块和屏幕尺寸
TRAE 跑网站内容卡片设计 Skill需要改哪几步？

不需要改。6 步用到的能力TRAE全部原生支持，可以按 Skill 的原始方法直接执行。

资料要怎么交给 TRAE？

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

装完先做什么验证？

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

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

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

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

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

按截图位置回改组件

每轮保留问题页面、宽度和状态，修订后只复查受影响位置，再跑一遍全组代表状态。

使用说明：原始文件按固定版本完整保留。中文方案沿用卡片组成、类型、层级、响应式、SEO 与可访问性方法；桌面列数和图片比例只作为参考，应结合真实内容与页面宽度确定。平台适配页中的文件扫描、组件修改、批量检查和定期复查属于延伸做法，需要相应工具、项目资料与操作授权。

INSTALL

安装到 TRAE

把网站内容卡片设计 Skill装进 TRAE，点几下完成

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

METHOD 01 · 交给 AI 自己装

复制提示词

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

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

FURTHER READING

TRAE 与网站内容卡片设计相关的实操文章

继续了解模板页面、营销对比表与网站视觉内容的具体做法。

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

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

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

产品那句话客户复述不出来，销售和市场就会各写一套

市场部改官网，销售改话术，投放改广告，三边各自有一套说法，在不少团队里已经算日常。语气不同还能凑合用。客户听完三遍，仍然复述不出你们到底解决哪一件事，这才麻烦。功能清单越长，这句话越容易丢。产品营销要

  • 定位
  • 销售赋能
  • 产品营销

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

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

  • 转化率
  • AARRR
  • 落地页

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

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

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

竞品分析别从同行名单开始，先找出客户真的拿什么和你比较

市场团队准备改官网首页，先把三家同行交给 AI 研究。首页说了什么、产品有哪些功能、价格怎样分档、案例里用了哪些客户，很快就整理成一份完整的对照表。 开会时，大家依然答不上来：我们的首页究竟要赢过谁？

  • 竞品分析
  • 用户调研
  • 产品营销

试用用户没有付费，团队该先查哪三段数据

假设一个团队月底复盘：14 天试用注册量没有明显下降，付费人数却低于预期。会议很快会出现三种建议——缩短试用期、要求先绑卡、到期前增加优惠提醒。每一种都可能有效，也可能改错位置，因为“试用转付费率”把

  • Vibe Marketing
  • 产品营销
  • 试用转化
  • 用户激活

NEXT WORKFLOW

搭配使用

卡片字段确定后，可继续选择 Grid 或 List 排列；需要建立完整目录页时，再结合模板页面和网站架构规划。

TRAE · 出海增长#01

TRAE 应用商店优化 Skill

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

来源项目 · coreyhaines31/marketingskills ★ 47,379 · Fork 7,380
TRAE · 数据与自动化#02

TRAE 营销动作效果验证 Skill

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

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

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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