适合人群想做一个 App 或网页但不会用专业设计软件的产品新人、学生和独立开发者也适合想先出几版界面草稿再和设计师沟通的人。需要说明Stitch 目前仍是 Google Labs 的实验产品额度规则、模式名称和导出选项都可能调整下文以写作时官方博客和官方提示词指南为准实际以界面显示为准。最近在 X 上看到不少人分享 Stitch 的完整演示从一句话需求到可点击原型只用了十几分钟。下面以一个记账小程序为例把从新建项目到导出的流程和容易踩坑的地方整理成步骤。一、先了解 Stitch 能做什么Stitch 的核心是你用自然语言也可以配合草图或截图描述界面它生成高保真的设计稿并可以继续对话修改。按官方 2026 年 3 月的介绍新版 Stitch 提供无限画布文字、图片甚至代码都可以放到画布上作为上下文设计代理能结合整个项目的演变来理解你的修改意图还可以并行探索多个方向设计系统可以从网址提取设计规范也可以用 DESIGN.md 文件导入或导出配色、字体等规则交互原型把多个屏幕串起来点击播放即可预览跳转流程。二、新建项目并写第一条提示词步骤 1登录并新建项目用 Google 账号登录 Stitch 网页版新建一个项目进入画布。步骤 2先粗后细地描述需求官方提示词指南建议复杂应用先写整体概念再逐屏细化。可以参考下面这种写法一个面向大学生的记账 App。核心功能快速记一笔、按类别查看月度支出、设置每月预算提醒。 整体风格简洁、轻松、让人愿意每天打开。主色用薄荷绿圆角卡片布局。步骤 3用形容词定“气质”指南特别提到形容词会影响配色、字体和图片风格。比如“活泼、鼓励感强”和“极简、专注”会得到完全不同的结果。与其说“好看一点”不如直接写出你想要的感觉。三、一次只改一处逐步打磨这是新手最容易忽略的一点。官方指南建议每条指令只针对一个屏幕或组件做一到两处修改。例如“在首页顶部导航栏加一个搜索框。”“把记账页的主按钮放大并使用主色。”“所有按钮改成全圆角。”“把界面上的英文文案全部改成简体中文。”如果一次塞进很多要求模型可能重排整个布局之前满意的部分也会被改掉。建议每得到一个满意的版本就截图留档方便对比和回退。描述时尽量使用界面术语如“导航栏”“卡片布局”“主操作按钮”并明确指出位置例如“登录页的主按钮”“首页顶部的横幅图片”。四、把屏幕串成可点击原型当首页、记账页、统计页都生成后可以把它们连接起来点击播放预览完整流程。官方介绍中提到Stitch 还能根据点击位置自动生成合理的下一屏适合快速验证用户路径是否顺畅。五、导出设计稿或代码粘贴到 Figma选中屏幕后使用复制到 Figma 的选项再到 Figma 里粘贴得到可编辑的图层方便设计师接手精修。导出前端代码可以查看或复制生成的前端代码作为开发起点。交给开发工具官方提到可以导出到 AI Studio、Antigravity 等开发工具继续实现。注意导出选项通常需要先选中要导出的屏幕才会出现。生成的代码只是脚手架正式上线前仍需开发者检查可访问性、响应式和硬编码的数值。六、常见问题 FAQQ1Stitch 收费吗写作时 Stitch 处于实验阶段公开资料显示可免费使用但有每日额度复杂的多屏生成会消耗更多。具体额度以产品内设置页显示为准。Q2生成的中文界面效果如何可以直接用中文写提示词也可以要求“把所有文案改成简体中文”。中文字体和排版建议自己逐屏检查。Q3可以用手绘草图吗可以上传草图或截图作为参考Stitch 会尝试理解布局意图后生成设计稿。草图越清晰结果越接近预期。七、小贴士先用一句话跑出整体方向再逐屏细化比一开始写几千字的长提示词更稳定。每轮只改一到两处满意的版本及时截图保存。做好一套满意的风格后用 DESIGN.md 导出设计规则下次新项目直接复用。涉及公司未公开的产品信息时先确认是否允许上传到在线服务。参考资料Google BlogIntroducing “vibe design” with StitchGoogle Labs2026-03https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/Google AI Developers ForumStitch Prompt GuideStitch 产品团队发布Google Developers BlogFrom idea to app: Introducing Stitch, a new way to design UIs
适合人群想做一个 App 或网页但不会用专业设计软件的产品新人、学生和独立开发者也适合想先出几版界面草稿再和设计师沟通的人。需要说明Stitch 目前仍是 Google Labs 的实验产品额度规则、模式名称和导出选项都可能调整下文以写作时官方博客和官方提示词指南为准实际以界面显示为准。最近在 X 上看到不少人分享 Stitch 的完整演示从一句话需求到可点击原型只用了十几分钟。下面以一个记账小程序为例把从新建项目到导出的流程和容易踩坑的地方整理成步骤。一、先了解 Stitch 能做什么Stitch 的核心是你用自然语言也可以配合草图或截图描述界面它生成高保真的设计稿并可以继续对话修改。按官方 2026 年 3 月的介绍新版 Stitch 提供无限画布文字、图片甚至代码都可以放到画布上作为上下文设计代理能结合整个项目的演变来理解你的修改意图还可以并行探索多个方向设计系统可以从网址提取设计规范也可以用 DESIGN.md 文件导入或导出配色、字体等规则交互原型把多个屏幕串起来点击播放即可预览跳转流程。二、新建项目并写第一条提示词步骤 1登录并新建项目用 Google 账号登录 Stitch 网页版新建一个项目进入画布。步骤 2先粗后细地描述需求官方提示词指南建议复杂应用先写整体概念再逐屏细化。可以参考下面这种写法一个面向大学生的记账 App。核心功能快速记一笔、按类别查看月度支出、设置每月预算提醒。 整体风格简洁、轻松、让人愿意每天打开。主色用薄荷绿圆角卡片布局。步骤 3用形容词定“气质”指南特别提到形容词会影响配色、字体和图片风格。比如“活泼、鼓励感强”和“极简、专注”会得到完全不同的结果。与其说“好看一点”不如直接写出你想要的感觉。三、一次只改一处逐步打磨这是新手最容易忽略的一点。官方指南建议每条指令只针对一个屏幕或组件做一到两处修改。例如“在首页顶部导航栏加一个搜索框。”“把记账页的主按钮放大并使用主色。”“所有按钮改成全圆角。”“把界面上的英文文案全部改成简体中文。”如果一次塞进很多要求模型可能重排整个布局之前满意的部分也会被改掉。建议每得到一个满意的版本就截图留档方便对比和回退。描述时尽量使用界面术语如“导航栏”“卡片布局”“主操作按钮”并明确指出位置例如“登录页的主按钮”“首页顶部的横幅图片”。四、把屏幕串成可点击原型当首页、记账页、统计页都生成后可以把它们连接起来点击播放预览完整流程。官方介绍中提到Stitch 还能根据点击位置自动生成合理的下一屏适合快速验证用户路径是否顺畅。五、导出设计稿或代码粘贴到 Figma选中屏幕后使用复制到 Figma 的选项再到 Figma 里粘贴得到可编辑的图层方便设计师接手精修。导出前端代码可以查看或复制生成的前端代码作为开发起点。交给开发工具官方提到可以导出到 AI Studio、Antigravity 等开发工具继续实现。注意导出选项通常需要先选中要导出的屏幕才会出现。生成的代码只是脚手架正式上线前仍需开发者检查可访问性、响应式和硬编码的数值。六、常见问题 FAQQ1Stitch 收费吗写作时 Stitch 处于实验阶段公开资料显示可免费使用但有每日额度复杂的多屏生成会消耗更多。具体额度以产品内设置页显示为准。Q2生成的中文界面效果如何可以直接用中文写提示词也可以要求“把所有文案改成简体中文”。中文字体和排版建议自己逐屏检查。Q3可以用手绘草图吗可以上传草图或截图作为参考Stitch 会尝试理解布局意图后生成设计稿。草图越清晰结果越接近预期。七、小贴士先用一句话跑出整体方向再逐屏细化比一开始写几千字的长提示词更稳定。每轮只改一到两处满意的版本及时截图保存。做好一套满意的风格后用 DESIGN.md 导出设计规则下次新项目直接复用。涉及公司未公开的产品信息时先确认是否允许上传到在线服务。参考资料Google BlogIntroducing “vibe design” with StitchGoogle Labs2026-03https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/Google AI Developers ForumStitch Prompt GuideStitch 产品团队发布Google Developers BlogFrom idea to app: Introducing Stitch, a new way to design UIs
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
