Google Stitch 怎么连接 Codex？

先说结论

对，这属于 MCP。 Stitch 负责生成和保存界面设计，Codex 负责在你的代码仓库里实现、修改和验证前端。Stitch MCP 是两者之间的连接层。

Stitch 项目与屏幕
        ↓
   Stitch MCP
        ↓
Codex 读取设计并修改本地代码

但别把 MCP 和 Skill 混在一起：

• MCP 提供连接和工具，让 Codex 能访问 Stitch。
• Stitch Skills / 插件 提供工作方法，告诉 Codex 怎样从设计生成组件、整理设计系统或同步页面。

只安装 Skills、没有可用的 Stitch MCP，Codex 仍然读不到你的 Stitch 项目。

什么情况下值得连接

如果你会反复执行下面的流程，MCP 能减少来回复制：

1. 在 Stitch 生成或修改页面。
2. 让 Codex 读取对应项目和屏幕。
3. 把设计实现到当前代码仓库。
4. 本地运行并检查响应式、交互和无障碍。

如果只是偶尔交付一个页面，直接从 Stitch 导出前端代码或截图，再交给 Codex，通常更轻。Google 对 Stitch 的介绍明确列出了导出前端代码和粘贴到 Figma 两条开发交接路径。

连接前准备

你需要：

• 可以正常使用的 Codex 本地客户端或 CLI。
• 一个有权访问目标项目的 Stitch 账号。
• 按 Stitch MCP Setup 生成的 API Key。

推荐配置：环境变量提供 Header

Stitch 的远程 MCP 地址是：

https://stitch.googleapis.com/mcp

Codex 支持 Streamable HTTP MCP，也支持从环境变量读取 HTTP Header。先让运行 Codex 的本地环境能够读取 STITCH_API_KEY，例如从同一个 Terminal 启动 Codex CLI 时：

export STITCH_API_KEY="YOUR_KEY"

然后在用户级 ~/.codex/config.toml，或受信任项目的 .codex/config.toml 中加入：

[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
env_http_headers = { "X-Goog-Api-Key" = "STITCH_API_KEY" }

这里右侧的 STITCH_API_KEY 是环境变量名称，不是把真实 Key 写进 TOML。

来源：Codex MCP 的 HTTP 与 env_http_headers 配置；Stitch 的地址与认证方式见 Stitch MCP Setup和 Stitch SDK。

更直观但更敏感的配置

Codex 也支持静态 HTTP Header：

[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
http_headers = { "X-Goog-Api-Key" = "YOUR_KEY" }

这种方式会把 Key 以明文放在本机配置里。只适合你理解风险、确认文件不会进入 Git 或云同步的个人环境。更换或泄露后，应在 Stitch 侧撤销旧 Key。

怎么检查连接

保存配置后重启 Codex 客户端，然后查看 MCP：

codex mcp list
codex mcp get stitch

在 Codex 对话或 Terminal UI 中也可以输入：

/mcp

先做只读测试：

列出我有权访问的 Stitch 项目，不要创建或修改任何内容。

确认能看到项目后，再指定项目和屏幕让 Codex读取。第一次不要直接要求批量生成或覆盖本地组件。

当前兼容性提醒

截至 2026-09-10，google-labs-code/stitch-sdk 的公开 Issue #367 仍为 Open。报告描述：远程服务器可以通过认证并建立连接，但部分严格解析工具 Schema 的客户端会在获取工具时失败，表现为“已连接，但工具列表为空”或 $defs/ScreenInstance 引用错误。

这不等于所有 Codex 环境都会失败，也不等于你的 API Key 一定有问题。排查时先区分：

• 401 / 403： 更像是凭证、权限或 Header 配置问题。
• tools fetch failed / $defs： 更像是当前工具 Schema 兼容问题。
• 连接正常但找不到项目： 检查 Key 对应账号和项目权限。

不建议为了绕过当前问题随便安装陌生代理或修改第三方脚本。先看官方 Setup 页面和公开 Issue 是否已经更新。

MCP 暂时不可用时怎么做

使用 Stitch 官方已经提供的交接方式：

1. 在 Stitch 中确认最终设计。
2. 导出前端代码，或保存目标屏幕截图。
3. 把导出文件放进当前项目的单独目录，不覆盖现有实现。
4. 告诉 Codex：参考这些文件和截图，在现有技术栈、组件和设计 Token 内实现页面。
5. 让 Codex 启动本地站点并做桌面与手机检查。

这种流程少了一层实时连接，但更容易审查每次输入和代码变化。来源：Google Stitch 发布说明。

Stitch Skills 要不要一起装

先连接 MCP，再决定。 Google Labs Code 的 stitch-skills 仓库提供面向 Codex 的设计、构建和辅助插件。它们能补充“怎样做”的流程，但不是连接 Stitch 的替代品。

仓库当前给出的 Codex Marketplace 添加命令是：

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
  --sparse .agents/plugins \
  --sparse plugins/stitch-design \
  --sparse plugins/stitch-build \
  --sparse plugins/stitch-utilities

也可以在 Codex 的 Settings → Plugin Marketplaces → Add 中添加：

https://github.com/google-labs-code/stitch-skills

然后只安装需要的部分：

• stitch-design：生成、修改、上传和提取设计。
• stitch-build：把 Stitch 屏幕继续做成前端组件。
• stitch-utilities：设计系统与辅助工作流。

该仓库属于 Google Labs Code，并明确不是正式支持的 Google 产品。安装前先阅读代码、权限和依赖；当前项目只需要设计转前端时，不必三个全装。

来源：Stitch Skills 仓库。

建议的最小工作流

先在 Stitch 做 1 个目标屏幕
→ 用只读请求确认 Codex 能读取
→ 让 Codex 在新组件或新分支中实现
→ 本地运行并比较截图
→ 确认后再同步下一屏

先把一条链路跑通，再增加 Skills 或自动化。完整的 Codex MCP 基础命令可继续看：Codex 怎么安装 MCP？。

怎么移除

如果不用了，删除 Stitch MCP 配置：

codex mcp remove stitch

这只移除 Codex 中的 MCP 配置，不会删除 Stitch 项目，也不会自动撤销 API Key。若凭证不再使用，应另外在 Stitch 中撤销。