VibeMKT Hub

TRAE × SEO 与 GEO · 原生覆盖 100%

TRAE × 网站面包屑导航设计 Skill

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

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

WHY TRAE

适配结论

TRAE 适合在网站项目里边改边看面包屑的桌面与手机表现

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

TRAE 适合在网站项目里边改边看面包屑的桌面与手机表现。内容和 SEO 团队先提供主面包屑路径，开发调整标签、链接、分隔符、末项状态与 BreadcrumbList；具备页面预览时，可以切换不同宽度检查长路径、横向查看、触控区域和标题位置。

页面预览

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

CAPABILITY × STEP

核心差异

在桌面和手机预览里检查长路径与链接状态

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

6步可直接执行
无有条件支持的步骤
无需手工衔接的步骤
100%原生覆盖率
TRAE 跑 网站面包屑导航设计 Skill 的逐步对照 · 每步要做什么见 网站面包屑导航设计 Skill原生页面
步骤所需能力等级在 TRAE 下具体怎么做
01 盘点页面类型与真实层级 读本地资料 直接执行 直接交给 TRAE：它能直接读取本机目录里的资料。
02 选择位置型或属性型路径 纯判断 任意 Agent 纯判断步骤，任何 Agent 都一样，取决于你给的资料质量。
03 为多分类页面确定主面包屑路径 读本地资料 直接执行 直接交给 TRAE：它能直接读取本机目录里的资料。
04 整理标签、链接与末项状态 读本地资料写本地文件 直接执行 直接交给 TRAE：它能直接读取本机目录里的资料。
05 处理手机长路径与可访问性 写本地文件页面预览 直接执行 直接交给 TRAE：它能把过程文件和成果直接落盘保存。
06 核对可见导航与 BreadcrumbList 读本地资料页面预览 直接执行 直接交给 TRAE：它能直接读取本机目录里的资料。

面包屑在桌面看起来正常，到了 390px 宽度可能折成多行、遮住标题或把当前页挤得无法辨认。TRAE 可以在真实页面中切换宽度，检查标签长度、分隔符、横向查看、触控区域、对比度和当前位置，再把问题定位到具体路由、宽度和层级。

  1. 01

    盘点页面类型与真实层级

    打开代表页面和项目文件，对照页面标题、URL、上级栏目与当前面包屑。

  2. 02

    确定面包屑类型和主路径

    按位置型或属性型规则整理代表页面，多分类的主面包屑路径先由负责人确认。

  3. 03

    整理标签、链接与组件规则

    在获准文件中调整标签、分隔符、末项状态和手机长路径处理，并保持页面标题和主要内容层级清楚。

  4. 04

    核对可见导航和 BreadcrumbList

    预览桌面与手机状态，检查链接、触控区域和读屏标记；JSON-LD 名称、顺序与 position 继续从构建 HTML 核对，中间层级再比对绝对 URL。

IMPORT · RUN

资料导入与任务下发

启用 Skill 后打开真实网站项目

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

需要准备的资料

  • 目标页面清单、页面类型、公开 URL、页面标题和当前面包屑截图或代码
  • 网站分类、栏目、产品属性或文档章节的层级关系，以及首页和分类页的规范地址
  • 存在多分类、多语言、旧路径、筛选参数或深层目录时，已经确认的主面包屑路径与栏目归属
  • 现有模板或组件、BreadcrumbList 输出方式、手机宽度、触控区域、文字对比度与读屏检查要求

在 TRAE 里是这样推进的

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

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

提供目标路由、面包屑组件、层级数据、Schema 输出、检查宽度和允许修改的文件，先做一组代表页面。

COLLABORATE · CHAIN

协作与后续衔接

反馈写成路由、宽度和层级

反馈写成路由、宽度和层级

例如，文章页在 390px 宽度下第四级标签被截断，比只说手机端不好看更容易准确修改。

路径先稳定，再调整视觉表现

先确认标签、URL、末项和 JSON-LD，再处理分隔符、间距和长路径；视觉变化后重新检查最窄宽度。

COMBINATION CASE

场景化实战案例

示例：修订商品页的手机面包屑

示例：修订商品页的手机面包屑

假设桌面商品页显示四级属性路径，手机端折成三行并挤压 H1，当前页仍可以点击回自身。

  1. 打开代表商品页
  2. 确认属性型主面包屑路径
  3. 调整长路径与末项状态
  4. 切换桌面和手机宽度
  5. 读取构建 HTML 中的 BreadcrumbList

预期结果：交付组件与样式差异、代表状态截图和结构化数据检查；商品分类归属、正式发布与搜索展示由负责人确认。

VERIFY · TROUBLESHOOT

效果验证方法

覆盖三层、四层、多分类、长标签和旧 URL 等状态，桌面与手机都确认内容清楚，构建 HTML 再核对结构化数据

覆盖三层、四层、多分类、长标签和旧 URL 等状态，桌面与手机都确认内容清楚，构建 HTML 再核对结构化数据。

可直接使用的第一个任务

请在 TRAE 中使用「网站面包屑导航设计 Skill」。本次要完成：博客文章同时出现在多个专题中，不同入口生成了不同的面包屑路径。我会提供目标页面清单、页面类型、公开 URL、页面标题和当前面包屑截图或代码和网站分类、栏目、产品属性或文档章节的层级关系，以及首页和分类页的规范地址。请先完成一份小样，交付面包屑路径表：逐类页面列出层级、标签、目标 URL、链接状态和主面包屑路径和组件规格：位置、分隔符、末项状态、长路径处理、手机显示与可访问性要求，并列出需要我核对的事实和数字。

安装后的最小验证任务

安装完成后，先只做第 1 步：让 TRAE 盘点页面类型与真实层级，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

TRAE 常见问题

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

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

资料要怎么交给 TRAE？

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

装完先做什么验证？

安装完成后，先只做第 1 步：让 TRAE 盘点页面类型与真实层级，并把它直接读取本机目录里的资料的过程说出来。这一步是只读的，能确认 Skill 已被识别，也能确认它拿得到需要的资料。

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

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

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

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

按截图、路由和宽度回改组件

每轮保留问题地址、宽度、层级和复现步骤，修订后先复查受影响状态，再跑代表页面组。

页面层级、主面包屑路径和多分类归属需要由内容、商品与 SEO 负责人确认。组件修改、结构化数据输出、页面预览和测试能否执行，取决于所用 Agent 的工具配置、项目文件和操作权限。

INSTALL

安装到 TRAE

把网站面包屑导航设计 Skill装进 TRAE，点几下完成

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

METHOD 01 · 交给 AI 自己装

复制提示词

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

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

FURTHER READING

TRAE 与网站面包屑导航设计相关的实操文章

继续了解网站架构、结构化数据、分类页和内链规划的具体做法。

零点击搜索下的内容策略：页面不只为点击而写

“零点击搜索”说的是越来越多的需求在结果页里被直接满足：答案就在搜索摘要里，或由 AI 答案引擎直接作答并引用来源，用户没有点进任何网页。这不等于搜索流量消失，而是页面被消费的方式变了。策略目标要从“

  • GEO
  • 内容策略
  • AI搜索
  • 零点击搜索

GEO和SEO的区别：从搜索流量到AI答案引擎的范式转移

GEO（生成式引擎优化）不是SEO的升级版，而是针对AI答案引擎的不同优化逻辑。本文从展示形式、排名机制、内容策略和技术实现四个维度对比GEO与SEO的核心差异，帮助营销团队理解两种流量来源的共存策略

  • AI搜索优化
  • 生成式引擎优化
  • 搜索流量
  • SEO

新网站SEO内容先写什么：按搜索意图分层的冷启动选题顺序

新网站 SEO 内容先写什么，取决于一个简单原则：先写有明确搜索需求、且你的页面能直接兑现承诺的内容，而不是先铺资讯、公司介绍或概念长文。冷启动期资源有限，每一篇内容都应优先服务“能被搜索找到、又能把

  • SEO
  • 内容策略
  • 关键词研究

NEXT WORKFLOW

搭配使用

整站页面与 URL 层级先用网站架构规划梳理；多类 JSON-LD 由结构化数据 Skill 处理，电商分类树和站内链接再结合对应 Skill 继续完善。

TRAE · SEO 与 GEO#01

TRAE 网站导航菜单设计 Skill

用 TRAE 完成「SaaS 官网不断增加产品与解决方案，一级菜单超过一屏，访客很难找到定价、文档或联系入口」，最终得到菜单结构、锚文本和多端无障碍检查表。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134
TRAE · 内容与创意#03

TRAE 网站 Favicon 制作 Skill

用 TRAE 完成「搜索结果或浏览器标签仍显示默认图标，需要补齐网站 Favicon 与首页声明」，最终得到尺寸与格式清单：16、32、180、192、512 像素及 SVG、PNG、ICO 用途。

来源项目 · kostja94/marketing-skills ★ 968 · Fork 134

VibeMKT COMMUNITY

加入 VibeMKT 社群

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

加入 VibeMKT 社群的微信二维码

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