适合人群：想做一个 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 等开发工具继续实现。注意：导出选项通常需要先选中要导出的屏幕才会出现。生成的代码只是脚手架，正式上线前仍需开发者检查可访问性、响应式和硬编码的数值。六、常见问题 FAQQ1：Stitch 收费吗？写作时 Stitch 处于实验阶段，公开资料显示可免费使用，但有每日额度，复杂的多屏生成会消耗更多。具体额度以产品内设置页显示为准。Q2：生成的中文界面效果如何？可以直接用中文写提示词，也可以要求“把所有文案改成简体中文”。中文字体和排版建议自己逐屏检查。Q3：可以用手绘草图吗？可以上传草图或截图作为参考，Stitch 会尝试理解布局意图后生成设计稿。草图越清晰，结果越接近预期。七、小贴士先用一句话跑出整体方向，再逐屏细化，比一开始写几千字的长提示词更稳定。每轮只改一到两处，满意的版本及时截图保存。做好一套满意的风格后，用 DESIGN.md 导出设计规则，下次新项目直接复用。涉及公司未公开的产品信息时，先确认是否允许上传到在线服务。参考资料Google Blog：Introducing “vibe design” with Stitch（Google Labs，2026-03）https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/Google AI Developers Forum：Stitch Prompt Guide（Stitch 产品团队发布）Google Developers Blog：From 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 等开发工具继续实现。注意：导出选项通常需要先选中要导出的屏幕才会出现。生成的代码只是脚手架，正式上线前仍需开发者检查可访问性、响应式和硬编码的数值。六、常见问题 FAQQ1：Stitch 收费吗？写作时 Stitch 处于实验阶段，公开资料显示可免费使用，但有每日额度，复杂的多屏生成会消耗更多。具体额度以产品内设置页显示为准。Q2：生成的中文界面效果如何？可以直接用中文写提示词，也可以要求“把所有文案改成简体中文”。中文字体和排版建议自己逐屏检查。Q3：可以用手绘草图吗？可以上传草图或截图作为参考，Stitch 会尝试理解布局意图后生成设计稿。草图越清晰，结果越接近预期。七、小贴士先用一句话跑出整体方向，再逐屏细化，比一开始写几千字的长提示词更稳定。每轮只改一到两处，满意的版本及时截图保存。做好一套满意的风格后，用 DESIGN.md 导出设计规则，下次新项目直接复用。涉及公司未公开的产品信息时，先确认是否允许上传到在线服务。参考资料Google Blog：Introducing “vibe design” with Stitch（Google Labs，2026-03）https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/Google AI Developers Forum：Stitch Prompt Guide（Stitch 产品团队发布）Google Developers Blog：From idea to app: Introducing Stitch, a new way to design UIs