1. Google Stitch 实测从 Figma 手动布局到自动布局的完整工作流Google Stitch 是 Google 推出的 AI UI 设计工具输入一段自然语言描述它就能生成带样式系统和组件的界面稿并且导出的设计自带自动布局。它适合谁适合已经熟悉 Figma、想评估 AI 能否真正嵌入产品设计流程的设计师也适合需要快速产出高保真草稿再精修的前端。我试过把它接进日常流程结论是它不会替代 Figma但能把「从零画第一版」的时间从几小时压到几分钟。传统 Figma 工作流里你从空白画布开始手动拉 Frame、摆组件、调间距、设约束再一层层套 Auto Layout。这个过程完全由你掌控但重复劳动多。Stitch 反过来你先描述意图它先生成设计系统和界面你再去改。两者的差异不在「谁更好」而在「谁负责哪一段」。Stitch 负责冷启动和结构生成Figma 负责像素级打磨和组件复用。这篇会交付三样东西可复制的 Stitch 提示词模板、Figma 导入与自动布局的配置要点、从草图到自动布局的完整验证步骤。全程按真实操作顺序走每一步都给出可跟做的命令或参数。如果你只想看结论Stitch 的自动布局在简单卡片和列表上可用在嵌套复杂布局上会崩需要手动修。先明确一个前提Stitch 生成的设计系统控制粒度有限单个组件的样式你改不动太多但主题色、字体、圆角这些全局属性可以调。所以正确用法是——用 Stitch 出结构和初稿导出到 Figma 后用 Auto Layout 和组件系统接管。下面从环境准备开始。2. TaoToken 前置为 Stitch 工作流接入模型能力Stitch 本身是 Google 的产品但很多团队在做设计稿评审、生成设计说明文档、批量改写提示词时会需要一个统一的模型调用入口。TaoToken 在这里的角色是提供兼容 OpenAI 协议的 API 网关让你用同一套 Key 和 Base URL 调用多个模型方便把「生成提示词 → 调模型润色 → 回填 Stitch」串成自动化脚本。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。注意 API 地址不带 UTM 参数配置时直接写这个。你需要先拿到 API Key。进入控制台创建密钥路径在 console 页面。拿到 Key 后模型对话调试可以在模型对话页面直接试不用写代码就能验证 Key 是否可用。如果你打算长期做设计 Agent 或批量生成建议看 Coding Plan它更适合持续性的编码和 Agent 场景。这里要强调一个常见误区TaoToken 不是用来替代 Figma 或 Stitch 的它是模型调用层。你的设计稿还是在 Figma 里Stitch 还是负责生成TaoToken 负责的是「当你想用脚本批量处理提示词、生成设计说明、做多模型对比」时的统一入口。三者是协作关系。配置时三个要素必须齐全Base URL、API Key、Model ID。缺一个就会报 401 或 model not found。Base URL 填 https://taotoken.net/api Key 填你创建的那串Model ID 按你实际要调的模型填。下面第三节给出可直接复制的配置片段。3. 可复制配置Stitch 提示词模板与 Figma 导入设置这一节是全文最核心的可复制部分。先给 Stitch 的提示词模板再给 Figma 导入配置最后给 TaoToken 的 settings 片段。Stitch 提示词模板直接复制改括号内容Design a [产品类型] dashboard for [目标用户]. Core screens: [屏幕1], [屏幕2], [屏幕3]. Style: [风格关键词, 如 minimal / dense / playful]. Primary color: [HEX]. Font: [字体名]. Include: search input, nav menu, primary CTA button, data cards. Start with a blank canvas, then generate the design system first.实测下来把「先生成设计系统」写进提示词能让后续界面的一致性明显变好。如果你不写Stitch 会直接出界面样式容易散。Figma 导入配置要点Stitch 导出后在 Figma 里粘贴时选择「保留自动布局」。导入后检查三处——父 Frame 的 Auto Layout 方向、子元素的 Fill/Hug 设置、间距值。Stitch 导出的自动布局默认是垂直方向水平排列的卡片行经常需要手动改成 Horizontal。TaoToken 的 settings 配置片段以常见客户端 settings.json 为例路径按你本地实际位置{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: 你的_API_Key, ANTHROPIC_MODEL: 你的_Model_ID } }如果你用的是 Codex 的 auth.json写法是{ OPENAI_BASE_URL: https://taotoken.net/api, OPENAI_API_KEY: 你的_API_Key, OPENAI_MODEL: 你的_Model_ID }三件套 Base URL Key Model ID 一个都不能少。Cline MCP 场景下同理在 MCP 配置里填这三个字段。CC Switch 切换配置时也是围绕这三个值做切换。注意不要把生产数据库直连进 MCP设计工作流里只调模型接口不碰业务数据。这是安全底线。4. 验证请求从草图到自动布局的完整步骤这一节走完整验证流程每一步都有可观察的结果。第一步在 Stitch 首页输入提示词。用第三节的模板把产品类型填成「personal expense dashboard」。等待约 30 秒你会先拿到设计系统包含颜色、排版、关键组件。再等约 30 秒拿到界面稿。第二步检查设计系统。点开 DESIGN.md 标签页里面是 Markdown 格式的设计说明。你可以用自己的设计指南覆盖它但要注意Stitch 有时会忽略本地规则优先用更通用的样式。这是已知行为别指望它完全听话。第三步修改设计。选中某个屏幕有三个选项编辑、标注、设计系统。编辑适合改文本实时生效标注适合圈一块区域让 AI 改比如把柱状图改成折线图设计系统适合改全局主题色。改完主题色后选中设计稿点「修改 → 更新到最新设计系统」等约 30 秒新配色应用上去。第四步导出到 Figma。点导出生成可粘贴资源。在 Figma 里粘贴框架自带 Auto Layout。这是 Stitch 最大的实用点——省掉手动建 Auto Layout 的时间。第五步验证自动布局。调整父 Frame 大小观察子元素是否跟随。简单卡片和列表通常正常嵌套两层的复杂布局会出现错位需要手动修。这一步是判断「能不能直接用」的关键。第六步用 TaoToken 做批量提示词润色可选。写个脚本调 https://taotoken.net/api 把一批草图描述批量转成规范提示词再回填 Stitch。验证请求是否成功看返回里有没有 choices 字段有就是通了。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节对照真实报错给排查路径。401 UnauthorizedKey 错了或没带。检查 ANTHROPIC_AUTH_TOKEN 是否填对Base URL 是否是 https://taotoken.net/api 。注意 API 地址不带 UTM带了可能被网关拒绝。local proxy failed本地代理配置冲突。检查你的客户端是否同时配了多个 Base URL或者系统代理拦截了请求。把代理关掉直连 API 地址再试。reading choices 报错通常是返回体不是标准 OpenAI 格式或者模型 ID 填错导致返回了错误结构。确认 Model ID 拼写确认请求走的是 /api 路径。OAuth 相关报错多见于 Claude Code 或 Anthropic 客户端。如果你用 OAuth 登录方式和 API Key 方式会冲突。统一用 Key 方式在 settings.json 里写死 Base URL 和 Token别混用。还有一个高频问题Stitch 导出的自动布局在 Figma 里「看起来对但一拉就崩」。原因是子元素的 Hug/Fill 设置和父 Frame 约束不匹配。修法是选中父 Frame把 Auto Layout 方向确认一遍再把子元素改成 Fill container 或 Hug contents逐个调。排障时如果拿不准先去接入文档对照参数再去 API Keys 页面确认 Key 状态。这两个入口能解决八成配置问题。6. 把 Stitch 接进真实流程CTA 与长期用法验证模型能力时用模型对话页面直接试提示词不用写代码。长期做编码和 Agent 自动化用 Coding Plan。排障和接入细节看接入文档和 API Keys。回到设计本身。Stitch 值得学吗值得但定位要清楚它是冷启动工具不是精修工具。我的用法是——Stitch 出第一版结构和设计系统导出 Figma然后用 Auto Layout 和组件系统接管。复杂嵌套布局一律手动修别跟它较劲。一个实用技巧把常用提示词模板存成片段每次只改产品类型和屏幕列表。这样生成结果的一致性会高很多。另一个技巧DESIGN.md 里只写全局规则别写太细的组件规则写细了它也不听。最后一步操作打开 Stitch用第三节模板生成一个 dashboard导出 Figma拉一下父 Frame 看自动布局表现。这一步做完你就知道它在你项目里能不能用了。
Google Stitch 产品设计实测：从 Figma 到自动布局的 AI 工具工作流
1. Google Stitch 实测从 Figma 手动布局到自动布局的完整工作流Google Stitch 是 Google 推出的 AI UI 设计工具输入一段自然语言描述它就能生成带样式系统和组件的界面稿并且导出的设计自带自动布局。它适合谁适合已经熟悉 Figma、想评估 AI 能否真正嵌入产品设计流程的设计师也适合需要快速产出高保真草稿再精修的前端。我试过把它接进日常流程结论是它不会替代 Figma但能把「从零画第一版」的时间从几小时压到几分钟。传统 Figma 工作流里你从空白画布开始手动拉 Frame、摆组件、调间距、设约束再一层层套 Auto Layout。这个过程完全由你掌控但重复劳动多。Stitch 反过来你先描述意图它先生成设计系统和界面你再去改。两者的差异不在「谁更好」而在「谁负责哪一段」。Stitch 负责冷启动和结构生成Figma 负责像素级打磨和组件复用。这篇会交付三样东西可复制的 Stitch 提示词模板、Figma 导入与自动布局的配置要点、从草图到自动布局的完整验证步骤。全程按真实操作顺序走每一步都给出可跟做的命令或参数。如果你只想看结论Stitch 的自动布局在简单卡片和列表上可用在嵌套复杂布局上会崩需要手动修。先明确一个前提Stitch 生成的设计系统控制粒度有限单个组件的样式你改不动太多但主题色、字体、圆角这些全局属性可以调。所以正确用法是——用 Stitch 出结构和初稿导出到 Figma 后用 Auto Layout 和组件系统接管。下面从环境准备开始。2. TaoToken 前置为 Stitch 工作流接入模型能力Stitch 本身是 Google 的产品但很多团队在做设计稿评审、生成设计说明文档、批量改写提示词时会需要一个统一的模型调用入口。TaoToken 在这里的角色是提供兼容 OpenAI 协议的 API 网关让你用同一套 Key 和 Base URL 调用多个模型方便把「生成提示词 → 调模型润色 → 回填 Stitch」串成自动化脚本。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。注意 API 地址不带 UTM 参数配置时直接写这个。你需要先拿到 API Key。进入控制台创建密钥路径在 console 页面。拿到 Key 后模型对话调试可以在模型对话页面直接试不用写代码就能验证 Key 是否可用。如果你打算长期做设计 Agent 或批量生成建议看 Coding Plan它更适合持续性的编码和 Agent 场景。这里要强调一个常见误区TaoToken 不是用来替代 Figma 或 Stitch 的它是模型调用层。你的设计稿还是在 Figma 里Stitch 还是负责生成TaoToken 负责的是「当你想用脚本批量处理提示词、生成设计说明、做多模型对比」时的统一入口。三者是协作关系。配置时三个要素必须齐全Base URL、API Key、Model ID。缺一个就会报 401 或 model not found。Base URL 填 https://taotoken.net/api Key 填你创建的那串Model ID 按你实际要调的模型填。下面第三节给出可直接复制的配置片段。3. 可复制配置Stitch 提示词模板与 Figma 导入设置这一节是全文最核心的可复制部分。先给 Stitch 的提示词模板再给 Figma 导入配置最后给 TaoToken 的 settings 片段。Stitch 提示词模板直接复制改括号内容Design a [产品类型] dashboard for [目标用户]. Core screens: [屏幕1], [屏幕2], [屏幕3]. Style: [风格关键词, 如 minimal / dense / playful]. Primary color: [HEX]. Font: [字体名]. Include: search input, nav menu, primary CTA button, data cards. Start with a blank canvas, then generate the design system first.实测下来把「先生成设计系统」写进提示词能让后续界面的一致性明显变好。如果你不写Stitch 会直接出界面样式容易散。Figma 导入配置要点Stitch 导出后在 Figma 里粘贴时选择「保留自动布局」。导入后检查三处——父 Frame 的 Auto Layout 方向、子元素的 Fill/Hug 设置、间距值。Stitch 导出的自动布局默认是垂直方向水平排列的卡片行经常需要手动改成 Horizontal。TaoToken 的 settings 配置片段以常见客户端 settings.json 为例路径按你本地实际位置{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: 你的_API_Key, ANTHROPIC_MODEL: 你的_Model_ID } }如果你用的是 Codex 的 auth.json写法是{ OPENAI_BASE_URL: https://taotoken.net/api, OPENAI_API_KEY: 你的_API_Key, OPENAI_MODEL: 你的_Model_ID }三件套 Base URL Key Model ID 一个都不能少。Cline MCP 场景下同理在 MCP 配置里填这三个字段。CC Switch 切换配置时也是围绕这三个值做切换。注意不要把生产数据库直连进 MCP设计工作流里只调模型接口不碰业务数据。这是安全底线。4. 验证请求从草图到自动布局的完整步骤这一节走完整验证流程每一步都有可观察的结果。第一步在 Stitch 首页输入提示词。用第三节的模板把产品类型填成「personal expense dashboard」。等待约 30 秒你会先拿到设计系统包含颜色、排版、关键组件。再等约 30 秒拿到界面稿。第二步检查设计系统。点开 DESIGN.md 标签页里面是 Markdown 格式的设计说明。你可以用自己的设计指南覆盖它但要注意Stitch 有时会忽略本地规则优先用更通用的样式。这是已知行为别指望它完全听话。第三步修改设计。选中某个屏幕有三个选项编辑、标注、设计系统。编辑适合改文本实时生效标注适合圈一块区域让 AI 改比如把柱状图改成折线图设计系统适合改全局主题色。改完主题色后选中设计稿点「修改 → 更新到最新设计系统」等约 30 秒新配色应用上去。第四步导出到 Figma。点导出生成可粘贴资源。在 Figma 里粘贴框架自带 Auto Layout。这是 Stitch 最大的实用点——省掉手动建 Auto Layout 的时间。第五步验证自动布局。调整父 Frame 大小观察子元素是否跟随。简单卡片和列表通常正常嵌套两层的复杂布局会出现错位需要手动修。这一步是判断「能不能直接用」的关键。第六步用 TaoToken 做批量提示词润色可选。写个脚本调 https://taotoken.net/api 把一批草图描述批量转成规范提示词再回填 Stitch。验证请求是否成功看返回里有没有 choices 字段有就是通了。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节对照真实报错给排查路径。401 UnauthorizedKey 错了或没带。检查 ANTHROPIC_AUTH_TOKEN 是否填对Base URL 是否是 https://taotoken.net/api 。注意 API 地址不带 UTM带了可能被网关拒绝。local proxy failed本地代理配置冲突。检查你的客户端是否同时配了多个 Base URL或者系统代理拦截了请求。把代理关掉直连 API 地址再试。reading choices 报错通常是返回体不是标准 OpenAI 格式或者模型 ID 填错导致返回了错误结构。确认 Model ID 拼写确认请求走的是 /api 路径。OAuth 相关报错多见于 Claude Code 或 Anthropic 客户端。如果你用 OAuth 登录方式和 API Key 方式会冲突。统一用 Key 方式在 settings.json 里写死 Base URL 和 Token别混用。还有一个高频问题Stitch 导出的自动布局在 Figma 里「看起来对但一拉就崩」。原因是子元素的 Hug/Fill 设置和父 Frame 约束不匹配。修法是选中父 Frame把 Auto Layout 方向确认一遍再把子元素改成 Fill container 或 Hug contents逐个调。排障时如果拿不准先去接入文档对照参数再去 API Keys 页面确认 Key 状态。这两个入口能解决八成配置问题。6. 把 Stitch 接进真实流程CTA 与长期用法验证模型能力时用模型对话页面直接试提示词不用写代码。长期做编码和 Agent 自动化用 Coding Plan。排障和接入细节看接入文档和 API Keys。回到设计本身。Stitch 值得学吗值得但定位要清楚它是冷启动工具不是精修工具。我的用法是——Stitch 出第一版结构和设计系统导出 Figma然后用 Auto Layout 和组件系统接管。复杂嵌套布局一律手动修别跟它较劲。一个实用技巧把常用提示词模板存成片段每次只改产品类型和屏幕列表。这样生成结果的一致性会高很多。另一个技巧DESIGN.md 里只写全局规则别写太细的组件规则写细了它也不听。最后一步操作打开 Stitch用第三节模板生成一个 dashboard导出 Figma拉一下父 Frame 看自动布局表现。这一步做完你就知道它在你项目里能不能用了。
