1. 为什么要在 Trae 里同时配置 Stitch MCP 和 Skills如果你最近在用 Trae 做前端或者全栈开发大概率会遇到一个尴尬的局面Stitch 的 MCP 服务能连上但每次让 AI 生成页面时它还是按自己的老套路写代码完全不理你项目里已经定好的设计规范。问题不在模型而在于 MCP 只解决了工具调用这一层真正决定 AI 输出风格的 Skills 没装。Stitch MCP 是 Google 提供的一个远程 MCP 服务它把 Stitch 的设计能力生成 UI、导出组件、迭代页面封装成标准 MCP 方法暴露出来。Trae 作为支持 MCP 的 IDE可以直接把这些方法挂到 AI 对话里调用。但 MCP 本身只提供能力不提供约束——比如你希望 AI 生成 React 组件时用 shadcn/ui 的写法、希望它输出设计文档时遵循 design-md 格式这些都得靠 Skills 来注入。所以完整的链路是Trae 通过 MCP 拿到 Stitch 的远程能力再通过 Skills 把项目级的设计规范、组件风格、提示词增强规则喂给 AI两者配合才能让 AI 真正按你的意图干活。而凭证管理这块如果你同时还在用 Claude Code、Cline 或者别的工具每个工具都单独配一遍 API Key 会很乱把 endpoint 统一收到 TaoToken 上管理会省事很多。这篇就按先装 MCP、再装 Skills、最后把调用链路验证一遍的顺序走每一步都给可复制的配置和验证动作。适合已经在用 Trae、想把手上的 AI 工具凭证和技能体系统一起来的开发者。2. 前置准备Stitch API Key 与 TaoToken 凭证在动 Trae 的配置之前有两样东西要先拿到手Stitch 的 API Key以及 TaoToken 的访问凭证。前者是 Stitch MCP 服务本身的鉴权后者是你把模型调用 endpoint 统一收口后要用的 Key。先说 Stitch 这边。Stitch 提供的是远程 MCP 服务所以鉴权走的是 API Key 而不是本地进程。进入 Stitch 的设置页面stitch.withgoogle.com/settings页面上会有一个创建密钥的入口点进去按提示走完创建流程。创建完成后密钥会显示在下方列表里鼠标移上去会出现复制按钮点一下就把密钥拿到剪贴板了。这个 Key 后面要填到 Trae 的 MCP 配置里对应 header 里的X-Goog-Api-Key字段。再说 TaoToken 这边。TaoToken 的作用是把模型调用的 endpoint 统一管理起来你可以在它的控制台里创建 API Key然后把这个 Key 配到各个工具里。具体操作是打开 TaoToken 官网进入控制台在 API Keys 页面创建一个新的 Key。这个 Key 后面会用在 Trae 的模型配置或者 MCP 的转发链路上。这里有个容易踩的坑Stitch 的 API Key 和 TaoToken 的 API Key 是两个完全不同的东西前者是 Google 服务的鉴权后者是你自己网关的鉴权不要混用。我见过有人把 TaoToken 的 Key 填到X-Goog-Api-Key里结果 MCP 一直返回 401排查半天才发现是填错了字段。另外如果你打算把 Stitch MCP 的调用也走 TaoToken 转发比如统一日志、统一限流那需要确认 TaoToken 的接入文档里对 MCP 类流量的支持方式。大部分情况下MCP 的远程服务是直连的TaoToken 主要管的是模型对话和 coding plan 那部分流量。所以实际配置时Stitch MCP 的 url 还是指向https://stitch.googleapis.com/mcp而模型调用那层才走 TaoToken 的 endpoint。把这两个 Key 都准备好之后就可以进 Trae 开始配了。3. 在 Trae 中写入 Stitch MCP 配置含可复制 JSON打开 Trae点右上角的小齿轮进设置页面在设置面板里找到MCP这一项点进去打开 MCP 面板。面板里会有一个添加按钮点它之后选择手动添加这时会弹出一个手动配置的对话框让你直接贴 JSON。把下面这段配置贴进去{ mcpServers: { stitch: { url: https://stitch.googleapis.com/mcp, headers: { X-Goog-Api-Key: YOUR-STITCH-API-KEY } } } }注意把YOUR-STITCH-API-KEY替换成你刚才在 Stitch 设置页面复制的那串密钥。替换完之后点确认保存Stitch 的 MCP 就挂到 Trae 上了。保存成功后你可以在 MCP 面板里看到 stitch 这个服务展开之后应该能看到它暴露出来的方法列表。Stitch MCP 一共提供 8 个方法覆盖了页面生成、组件导出、设计迭代这些操作。如果方法列表是空的或者服务显示为未连接状态先检查两件事一是 url 有没有写错必须是https://stitch.googleapis.com/mcp结尾不要多加斜杠二是 header 里的字段名是不是X-Goog-Api-Key大小写和连字符都不能错。如果你同时还在用 Claude Code 或者 Cline它们的 MCP 配置格式和 Trae 基本一致都是mcpServers下面挂服务名。区别在于配置文件的位置Trae 是在设置面板里手动贴Claude Code 一般写在~/.claude/mcp.json或者项目级的.mcp.json里Cline 则是在 VS Code 的设置里配。三件套Base URL、Key、Model ID在模型调用那层是通用的但 MCP 这层每个工具各配各的。配好之后先别急着装 Skills建议先单独验证一下 MCP 能不能通。在 Trae 的 AI 对话框里输入一句列出当前可用的 MCP 工具看它返回的列表里有没有 stitch 相关的方法。如果有说明 MCP 这层已经通了可以进下一步。4. 安装 Stitch Skills 并验证技能列表Stitch 一共提供 6 个 Skillremotion、design-md、react:components、stitch-loop、shadcn-ui、enhance-prompt。每个 Skill 负责不同的能力注入比如 design-md 管设计文档格式shadcn-ui 管组件库风格enhance-prompt 管提示词增强。安装方式有三种命令行、手动复制、插件市场。这里重点说前两种因为插件市场在 Trae 里的入口不太稳定。命令行安装最省事。直接在 Trae 的终端里跑对应的命令然后按提示一步步选就行npx skills add google-labs-code/stitch-skills --skill design-md npx skills add google-labs-code/stitch-skills --skill react:components npx skills add google-labs-code/stitch-skills --skill stitch-loop npx skills add google-labs-code/stitch-skills --skill enhance-prompt npx skills add google-labs-code/stitch-skills --skill remotion npx skills add google-labs-code/stitch-skills --skill shadcn-ui每条命令对应一个 Skill跑完之后它会自动把技能文件放到当前项目的技能目录下。如果你只想装其中几个挑对应的命令跑就行不用全装。手动安装适合网络环境不稳定、npx 拉包老失败的情况。先去 GitHub 上把 stitch-skills 的代码包下载下来仓库地址是 github.com/google-labs-code/stitch-skills解压之后在当前项目里手动新建一个.trae隐藏目录再在它下面建一个skills目录然后把解压出来的 skills 文件夹里的内容全部复制到.trae/skills下面。目录结构大概长这样项目根目录/ ├── .trae/ │ └── skills/ │ ├── design-md/ │ ├── react-components/ │ ├── stitch-loop/ │ ├── enhance-prompt/ │ ├── remotion/ │ └── shadcn-ui/ └── ...其他项目文件复制完之后在 Trae 的 AI 对话框里输入列出当前所有可用技能让 AI 把技能列表报出来。如果回复里能看到你刚装的这几个 Skill 名字说明安装成功。如果列表是空的检查一下.trae/skills的层级对不对——有些解压工具会多套一层文件夹导致实际路径变成.trae/skills/stitch-skills/design-md这样 Trae 是扫不到的得把内层文件夹提上来。5. 常见报错排查401、local proxy failed 与技能不生效配置过程中最容易撞上的几类报错这里按实际遇到的频率排一下。第一类是 401 鉴权失败。MCP 面板里 stitch 服务显示红色或者调用时返回401 Unauthorized。原因基本是两个要么X-Goog-Api-Key的值填错了比如复制时漏了字符或者把 TaoToken 的 Key 填进去了要么这个 Key 在 Stitch 那边已经被撤销或过期了。排查方法是回 Stitch 设置页面重新复制一次密钥确认粘贴时没有多余空格然后保存重启 Trae。第二类是local proxy failed或者连接超时。这种一般出现在 MCP 服务 url 写错、或者本地网络到stitch.googleapis.com不通的情况下。先确认 url 是https://stitch.googleapis.com/mcp没有多余路径。如果 url 没问题但还是连不上检查一下 Trae 的代理设置——有些公司网络环境会拦截外部请求这种情况需要走正常的网络配置流程不要用任何非正规手段。第三类是reading choices相关的报错。这个通常出现在模型调用那层而不是 MCP 这层。如果你把模型 endpoint 改到了 TaoToken但返回体格式不对就会报error reading choices。排查时先确认 TaoToken 控制台里创建的 Key 有没有正确填到 Trae 的模型配置里再确认 Model ID 是不是 TaoToken 支持的模型名。三件套Base URL、Key、Model ID缺一不可Base URL 填https://taotoken.net/apiKey 填控制台创建的Model ID 按文档里支持的填。第四类是 OAuth 相关报错。如果你在配 Claude Code 或者别的工具时看到 OAuth 失败那多半是那个工具自己的鉴权流程问题和 Stitch MCP 无关。Claude Code 的配置一般走auth.json里面存的是它自己的凭证和 Trae 的 MCP 配置是两套体系不要混在一起排查。第五类是 Skills 装了但 AI 不调用。技能列表里能看到但生成代码时 AI 还是按老风格来。这种情况通常是 Skill 的触发条件没匹配上比如你装的是 shadcn-ui但提示词里没提到组件库相关的内容AI 就不会主动去读这个 Skill。解决办法是在提示词里明确提一句使用 shadcn-ui 风格生成组件或者在项目根目录放一个说明文件让 AI 在上下文里能感知到该用哪个 Skill。6. 把调用链路收口到 TaoToken 并做一次完整验证MCP 和 Skills 都配好之后最后一步是把模型调用这层也收口到 TaoToken这样你所有 AI 工具的凭证和调用日志就统一了。具体动作是在 Trae 的模型配置里把 Base URL 改成https://taotoken.net/apiKey 填你在 TaoToken 控制台创建的 API KeyModel ID 按文档里支持的模型填。改完之后做一次完整验证在 Trae 的 AI 对话框里输入一个需要同时用到 MCP 和 Skill 的请求比如用 shadcn-ui 风格生成一个登录页面并导出为 React 组件。如果链路通了你会看到 AI 先调用 Stitch MCP 的页面生成方法然后按 shadcn-ui 的规范输出组件代码整个过程在 Trae 的调用日志里能看到 MCP 调用记录和模型请求记录。如果这一步报错优先看模型调用那层的返回。TaoToken 的接入文档里有各语言的调用示例对照着检查 Base URL 和 Key 的填法。验证模型是否通可以单独开一个对话用模型对话功能发一句简单请求看能不能正常返回。模型通了之后再回来测 MCP Skills 的组合链路。长期做编码和 Agent 任务的话可以考虑用 Coding Plan 把额度管起来避免每次单独配 Key。接入文档里有详细的配置说明API Keys 页面可以管理你创建的所有 Key。整套链路跑通之后你在 Trae 里的开发流程就是MCP 提供 Stitch 的设计能力Skills 约束输出风格TaoToken 统一管模型调用三者各司其职。