1. 从设计稿到 Next.js 页面卡点到底在哪Stitch 是 Google 推出的 AI 设计代理你给它一段描述它能直接吐出可交互的 UI 原型Antigravity 是 Google 的 Agent 开发环境能读写项目文件、跑命令、调工具。把这两个东西串起来理论上就是「说一句话 → 出设计稿 → 出 Next.js 代码」的完整链路。适合谁适合那些手里有 Next.js 项目、又不想在 Figma 和编辑器之间反复横跳的前端开发者也适合想搭一套可复现 AI 设计工作流的独立开发者。但真正动手你会发现卡点根本不在「AI 会不会写代码」。卡点有三个第一Stitch 和 Antigravity 是两个独立进程中间没有通道你只能手动导出图片再手动贴进对话设计 DNA 全丢了第二Antigravity 里的 Agent 要调模型你得给它配 Key而 Stitch 侧的 MCP 工具链又是另一套鉴权两套 Key 两套配置改一个忘一个第三Next.js 项目本身有目录约定Agent 如果不知道app/和components/的结构生成的组件会到处乱放。我试过最原始的玩法Stitch 里生成原型截图丢给 Antigravity 的对话框让它「照着写」。结果就是组件层级全平铺、Tailwind 类名乱序、响应式断点缺失改起来比自己写还累。问题出在「截图」这个动作——它把设计系统降维成了像素排版比例、间距 token、颜色变量全没了。正确的做法是让 Antigravity 通过 MCP 直接和 Stitch 对话把设计稿当成结构化数据拉过来而不是当图片看。同时模型调用统一走一个 Key避免在 Stitch 工具链和 Antigravity Agent 之间来回切配置。这就是下面要搭的东西一条 MCP 通道 一个统一 Key。2. 前置准备TaoToken 统一 Key 与 MCP 环境先说清楚 TaoToken 在这里扮演什么角色。Antigravity 里的 Agent 要调模型比如 Gemini 系列或 Claude 系列Stitch 的 MCP 工具链在生成设计 DNA 时也可能触发模型调用。如果每个环节各配一套 Key你会在三个配置文件里维护三份凭证任何一处过期就是401。TaoToken 提供的是 OpenAI 兼容的统一入口一个 Key 覆盖多个模型Base URL 固定这样 Antigravity 和 MCP 服务端可以共用同一份凭证。你需要准备的东西一个 TaoToken 账号、一个 API Key、本地装好 Node.js 18、一个已经create-next-app初始化过的 Next.js 项目App Router 即可。Antigravity 本身按官方方式装好能正常打开项目目录。拿 Key 的路径登录官网后进控制台在 API Keys 页面创建一个新 Key。地址是https://taotoken.net/api-keys创建时给它起个能认出来的名字比如antigravity-stitch方便后面排查是哪个 Key 出的问题。Key 只在创建时完整显示一次复制下来存到本地密码管理器。Base URL 用https://taotoken.net/api注意这个地址不带任何查询参数直接填进配置里。模型 ID 按你实际要用的填比如claude-sonnet-4-5或gemini-2.5-pro具体可用列表在文档页https://taotoken.net/doc里能查到。环境变量先落一份到项目根目录的.env.localNext.js 会自动加载# .env.local TAOTOKEN_API_KEYsk-你的实际key TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_MODELclaude-sonnet-4-5这里有个坑要提前说.env.local默认在.gitignore里但如果你手动改过 gitignore务必确认它没被提交。Key 泄露的第一反应应该是去控制台吊销重发而不是改代码。MCP 服务端的安装Antigravity 支持通过命令注册。Stitch 官方提供了 skills 仓库可以直接装进项目npx skills add google-labs-code/stitch-skills这条命令会把 Stitch 的 Agent Skills 拉到项目里Antigravity 的 Agent 就能识别并调用。装完之后在 Antigravity 里执行 MCP 安装命令把 Stitch MCP Server 注册进去antigravity:mcp/install stitch执行完可以用antigravity:mcp/list确认 stitch 出现在列表里。如果没出现八成是 skills 没装成功回去看npx skills add的输出有没有报网络错误。3. 可复制配置MCP 服务端与 Antigravity 接入片段这一节给的是能直接抄的配置。Antigravity 的 MCP 配置通常放在项目根目录的.antigravity/mcp.json或者用户级的配置目录里。下面这份是项目级配置路径和字段名按 Antigravity 的实际约定来{ mcpServers: { stitch: { command: npx, args: [-y, google-labs-code/stitch-mcp-server], env: { STITCH_API_KEY: ${TAOTOKEN_API_KEY}, STITCH_BASE_URL: ${TAOTOKEN_BASE_URL}, STITCH_MODEL: ${TAOTOKEN_MODEL} } } } }注意env里用的是${TAOTOKEN_API_KEY}这种变量引用Antigravity 启动 MCP 子进程时会从当前 shell 环境或.env.local里读取。这样你只需要维护一份 KeyMCP 服务端和 Agent 主进程共用。Antigravity 自身的模型配置一般在.antigravity/settings.json或用户设置里。如果你用的是 Codex 风格的auth.json结构类似这样{ base_url: https://taotoken.net/api, api_key: sk-你的实际key, model: claude-sonnet-4-5, provider: openai-compatible }三件套必须齐全Base URL 填https://taotoken.net/apiKey 填你创建的那串Model ID 填实际模型名。少任何一个Agent 启动时就会报鉴权失败或模型不存在。如果你用的是 Cline 或 CC Switch 这类工具来管理多套配置逻辑是一样的在 provider 里选 OpenAI CompatibleBase URL 填 TaoToken 的地址Key 填进去Model ID 手填。CC Switch 的好处是可以在多个项目配置间切换但每个配置里的三件套都要完整不能只填 Key 指望它自动补 Base URL。配置改完重启 Antigravity让 MCP 子进程重新加载环境变量。这一步别省很多人改完配置不重启然后对着旧进程排查半天。4. 验证请求从设计稿到本地预览的完整动作配置就绪后跑一遍完整链路验证。打开 Antigravity加载你的 Next.js 项目然后在 Agent 对话里触发 Stitch 技能。先确认 MCP 通道是通的antigravity:mcp/call stitch list_skills如果返回了技能列表应该能看到enhance-prompt、react-components这些说明 MCP 服务端和 Key 都正常。如果报local proxy failed或连接超时跳到第 5 节排查。接着用enhance-prompt技能把你的模糊需求转成结构化设计系统。比如输入「做一个高端体育平台的落地页」Agent 会调 Stitch 把它展开成带排版、间距、颜色标记的设计规范。这一步的输出是设计 DNA不是图片。然后触发react-components技能让 Agent 从 Stitch 拉取设计 DNA 并生成 Next.js Shadcn UI 组件。生成的文件会落到components/目录下页面入口在app/page.tsx。生成完成后本地起服务npm run dev打开http://localhost:3000你应该能看到和 Stitch 原型基本一致的页面包括响应式布局和动画。验证成功的标志有三个页面能正常渲染不报错、移动端断点生效、view-source里能看到 SEO 元标签。如果页面白屏先看浏览器控制台和终端输出。常见的是组件导入路径不对Agent 生成时用了相对路径但实际目录层级不同手动改一下 import 即可。如果样式全丢检查tailwind.config有没有被覆盖Shadcn 的components.json是否指向了正确的路径。5. 常见报错排查401、local proxy failed、reading choices、OAuth401 UnauthorizedKey 无效或没被读到。先确认.env.local里的TAOTOKEN_API_KEY没有多余空格或引号然后确认 Antigravity 启动时确实加载了这个文件。MCP 子进程如果没继承环境变量env里的${TAOTOKEN_API_KEY}会解析成空字符串请求就带空 Key 出去。解决办法是在.antigravity/mcp.json里直接写死 Key仅本地开发或者确保启动 Antigravity 的 shell 已经export了变量。local proxy failedMCP 服务端进程没起来或者端口被占。先看antigravity:mcp/list里 stitch 的状态如果是failed手动跑一次npx -y google-labs-code/stitch-mcp-server看报什么错。常见的是 Node 版本太低或者npx缓存损坏清一下~/.npm/_npx再试。reading choices 报错通常是模型返回格式和 Agent 预期的不一致。如果你在配置里把 Model ID 填成了 TaoToken 不支持的模型返回体结构会对不上。回文档页确认模型名拼写别自己造名字。另外某些模型对response_format支持不同如果 Agent 强制要求 JSON 输出而模型不支持也会在这里炸。OAuth 相关报错Antigravity 或 Stitch 的某些技能可能走 OAuth 流程但如果你已经用 API Key 鉴权就不该再触发 OAuth。检查配置里有没有残留的oauth字段删掉。如果技能本身强制 OAuth看它的文档是否支持 API Key 模式不支持就换一个技能。排查顺序建议先确认 Key 能单独调通用 curl 打一次模型对话接口再确认 MCP 进程能起来最后确认 Agent 配置里的三件套齐全。一层层往上排比一上来就改 Agent 代码快得多。6. 把工作流固定下来下一步怎么走链路跑通之后建议把配置固化进项目模板。.antigravity/mcp.json和.env.example一起提交到仓库.env.local留在本地。这样团队里其他人 clone 下来填个 Key 就能复现整条工作流。模型调用这块如果你只是偶尔生成几个页面按量用 API Key 就够如果打算长期跑 Agent 做批量页面生成可以看看 Coding Plan 这类包月方案地址在https://taotoken.net/coding-plan适合高频调用的场景。验证模型连通性的时候用模型对话页快速打一发请求比在项目里改代码试快得多入口是https://taotoken.net/models。接入文档在https://taotoken.net/doc里面有针对不同工具链的配置示例遇到字段对不上可以回去翻。API Keys 管理页https://taotoken.net/api-keys记得定期清理不用的 Key尤其是团队协作时谁离职了先把他的 Key 吊销。最后说个实际经验Stitch 生成的设计 DNA 质量和你给enhance-prompt的输入详细程度强相关。别只丢一句「做个好看的页面」把目标用户、核心动作、信任信号这些说清楚生成出来的组件才不用大改。这一步多花两分钟后面省两小时。 
长河君 · 2026/10/9 10:19:35 · 阅读 1.2k Stitch+Antigravity 打造 AI 设计工作流：用 TaoToken 统一 Key 打通 MCP 与 Next.js
1. 从设计稿到 Next.js 页面卡点到底在哪Stitch 是 Google 推出的 AI 设计代理你给它一段描述它能直接吐出可交互的 UI 原型Antigravity 是 Google 的 Agent 开发环境能读写项目文件、跑命令、调工具。把这两个东西串起来理论上就是「说一句话 → 出设计稿 → 出 Next.js 代码」的完整链路。适合谁适合那些手里有 Next.js 项目、又不想在 Figma 和编辑器之间反复横跳的前端开发者也适合想搭一套可复现 AI 设计工作流的独立开发者。但真正动手你会发现卡点根本不在「AI 会不会写代码」。卡点有三个第一Stitch 和 Antigravity 是两个独立进程中间没有通道你只能手动导出图片再手动贴进对话设计 DNA 全丢了第二Antigravity 里的 Agent 要调模型你得给它配 Key而 Stitch 侧的 MCP 工具链又是另一套鉴权两套 Key 两套配置改一个忘一个第三Next.js 项目本身有目录约定Agent 如果不知道app/和components/的结构生成的组件会到处乱放。我试过最原始的玩法Stitch 里生成原型截图丢给 Antigravity 的对话框让它「照着写」。结果就是组件层级全平铺、Tailwind 类名乱序、响应式断点缺失改起来比自己写还累。问题出在「截图」这个动作——它把设计系统降维成了像素排版比例、间距 token、颜色变量全没了。正确的做法是让 Antigravity 通过 MCP 直接和 Stitch 对话把设计稿当成结构化数据拉过来而不是当图片看。同时模型调用统一走一个 Key避免在 Stitch 工具链和 Antigravity Agent 之间来回切配置。这就是下面要搭的东西一条 MCP 通道 一个统一 Key。2. 前置准备TaoToken 统一 Key 与 MCP 环境先说清楚 TaoToken 在这里扮演什么角色。Antigravity 里的 Agent 要调模型比如 Gemini 系列或 Claude 系列Stitch 的 MCP 工具链在生成设计 DNA 时也可能触发模型调用。如果每个环节各配一套 Key你会在三个配置文件里维护三份凭证任何一处过期就是401。TaoToken 提供的是 OpenAI 兼容的统一入口一个 Key 覆盖多个模型Base URL 固定这样 Antigravity 和 MCP 服务端可以共用同一份凭证。你需要准备的东西一个 TaoToken 账号、一个 API Key、本地装好 Node.js 18、一个已经create-next-app初始化过的 Next.js 项目App Router 即可。Antigravity 本身按官方方式装好能正常打开项目目录。拿 Key 的路径登录官网后进控制台在 API Keys 页面创建一个新 Key。地址是https://taotoken.net/api-keys创建时给它起个能认出来的名字比如antigravity-stitch方便后面排查是哪个 Key 出的问题。Key 只在创建时完整显示一次复制下来存到本地密码管理器。Base URL 用https://taotoken.net/api注意这个地址不带任何查询参数直接填进配置里。模型 ID 按你实际要用的填比如claude-sonnet-4-5或gemini-2.5-pro具体可用列表在文档页https://taotoken.net/doc里能查到。环境变量先落一份到项目根目录的.env.localNext.js 会自动加载# .env.local TAOTOKEN_API_KEYsk-你的实际key TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_MODELclaude-sonnet-4-5这里有个坑要提前说.env.local默认在.gitignore里但如果你手动改过 gitignore务必确认它没被提交。Key 泄露的第一反应应该是去控制台吊销重发而不是改代码。MCP 服务端的安装Antigravity 支持通过命令注册。Stitch 官方提供了 skills 仓库可以直接装进项目npx skills add google-labs-code/stitch-skills这条命令会把 Stitch 的 Agent Skills 拉到项目里Antigravity 的 Agent 就能识别并调用。装完之后在 Antigravity 里执行 MCP 安装命令把 Stitch MCP Server 注册进去antigravity:mcp/install stitch执行完可以用antigravity:mcp/list确认 stitch 出现在列表里。如果没出现八成是 skills 没装成功回去看npx skills add的输出有没有报网络错误。3. 可复制配置MCP 服务端与 Antigravity 接入片段这一节给的是能直接抄的配置。Antigravity 的 MCP 配置通常放在项目根目录的.antigravity/mcp.json或者用户级的配置目录里。下面这份是项目级配置路径和字段名按 Antigravity 的实际约定来{ mcpServers: { stitch: { command: npx, args: [-y, google-labs-code/stitch-mcp-server], env: { STITCH_API_KEY: ${TAOTOKEN_API_KEY}, STITCH_BASE_URL: ${TAOTOKEN_BASE_URL}, STITCH_MODEL: ${TAOTOKEN_MODEL} } } } }注意env里用的是${TAOTOKEN_API_KEY}这种变量引用Antigravity 启动 MCP 子进程时会从当前 shell 环境或.env.local里读取。这样你只需要维护一份 KeyMCP 服务端和 Agent 主进程共用。Antigravity 自身的模型配置一般在.antigravity/settings.json或用户设置里。如果你用的是 Codex 风格的auth.json结构类似这样{ base_url: https://taotoken.net/api, api_key: sk-你的实际key, model: claude-sonnet-4-5, provider: openai-compatible }三件套必须齐全Base URL 填https://taotoken.net/apiKey 填你创建的那串Model ID 填实际模型名。少任何一个Agent 启动时就会报鉴权失败或模型不存在。如果你用的是 Cline 或 CC Switch 这类工具来管理多套配置逻辑是一样的在 provider 里选 OpenAI CompatibleBase URL 填 TaoToken 的地址Key 填进去Model ID 手填。CC Switch 的好处是可以在多个项目配置间切换但每个配置里的三件套都要完整不能只填 Key 指望它自动补 Base URL。配置改完重启 Antigravity让 MCP 子进程重新加载环境变量。这一步别省很多人改完配置不重启然后对着旧进程排查半天。4. 验证请求从设计稿到本地预览的完整动作配置就绪后跑一遍完整链路验证。打开 Antigravity加载你的 Next.js 项目然后在 Agent 对话里触发 Stitch 技能。先确认 MCP 通道是通的antigravity:mcp/call stitch list_skills如果返回了技能列表应该能看到enhance-prompt、react-components这些说明 MCP 服务端和 Key 都正常。如果报local proxy failed或连接超时跳到第 5 节排查。接着用enhance-prompt技能把你的模糊需求转成结构化设计系统。比如输入「做一个高端体育平台的落地页」Agent 会调 Stitch 把它展开成带排版、间距、颜色标记的设计规范。这一步的输出是设计 DNA不是图片。然后触发react-components技能让 Agent 从 Stitch 拉取设计 DNA 并生成 Next.js Shadcn UI 组件。生成的文件会落到components/目录下页面入口在app/page.tsx。生成完成后本地起服务npm run dev打开http://localhost:3000你应该能看到和 Stitch 原型基本一致的页面包括响应式布局和动画。验证成功的标志有三个页面能正常渲染不报错、移动端断点生效、view-source里能看到 SEO 元标签。如果页面白屏先看浏览器控制台和终端输出。常见的是组件导入路径不对Agent 生成时用了相对路径但实际目录层级不同手动改一下 import 即可。如果样式全丢检查tailwind.config有没有被覆盖Shadcn 的components.json是否指向了正确的路径。5. 常见报错排查401、local proxy failed、reading choices、OAuth401 UnauthorizedKey 无效或没被读到。先确认.env.local里的TAOTOKEN_API_KEY没有多余空格或引号然后确认 Antigravity 启动时确实加载了这个文件。MCP 子进程如果没继承环境变量env里的${TAOTOKEN_API_KEY}会解析成空字符串请求就带空 Key 出去。解决办法是在.antigravity/mcp.json里直接写死 Key仅本地开发或者确保启动 Antigravity 的 shell 已经export了变量。local proxy failedMCP 服务端进程没起来或者端口被占。先看antigravity:mcp/list里 stitch 的状态如果是failed手动跑一次npx -y google-labs-code/stitch-mcp-server看报什么错。常见的是 Node 版本太低或者npx缓存损坏清一下~/.npm/_npx再试。reading choices 报错通常是模型返回格式和 Agent 预期的不一致。如果你在配置里把 Model ID 填成了 TaoToken 不支持的模型返回体结构会对不上。回文档页确认模型名拼写别自己造名字。另外某些模型对response_format支持不同如果 Agent 强制要求 JSON 输出而模型不支持也会在这里炸。OAuth 相关报错Antigravity 或 Stitch 的某些技能可能走 OAuth 流程但如果你已经用 API Key 鉴权就不该再触发 OAuth。检查配置里有没有残留的oauth字段删掉。如果技能本身强制 OAuth看它的文档是否支持 API Key 模式不支持就换一个技能。排查顺序建议先确认 Key 能单独调通用 curl 打一次模型对话接口再确认 MCP 进程能起来最后确认 Agent 配置里的三件套齐全。一层层往上排比一上来就改 Agent 代码快得多。6. 把工作流固定下来下一步怎么走链路跑通之后建议把配置固化进项目模板。.antigravity/mcp.json和.env.example一起提交到仓库.env.local留在本地。这样团队里其他人 clone 下来填个 Key 就能复现整条工作流。模型调用这块如果你只是偶尔生成几个页面按量用 API Key 就够如果打算长期跑 Agent 做批量页面生成可以看看 Coding Plan 这类包月方案地址在https://taotoken.net/coding-plan适合高频调用的场景。验证模型连通性的时候用模型对话页快速打一发请求比在项目里改代码试快得多入口是https://taotoken.net/models。接入文档在https://taotoken.net/doc里面有针对不同工具链的配置示例遇到字段对不上可以回去翻。API Keys 管理页https://taotoken.net/api-keys记得定期清理不用的 Key尤其是团队协作时谁离职了先把他的 Key 吊销。最后说个实际经验Stitch 生成的设计 DNA 质量和你给enhance-prompt的输入详细程度强相关。别只丢一句「做个好看的页面」把目标用户、核心动作、信任信号这些说清楚生成出来的组件才不用大改。这一步多花两分钟后面省两小时。