Stitch：一句话直接生成一整套原型图figma设计稿
我们在做产品原型的阶段，可以用一些工具来辅助设计出比较精美的页面，推荐一个 Google 的 Stitch。
1. 核心功能
从自然语言提示生成 UI 界面
从图片/草图/线框图生成界面
支持导出 HTML/CSS 代码，也能直接导入 Figma 继续编辑
最关键的是只需要输入一句话或者一段话就能够生成很高级的 UI 设计稿。
网址在这：https://stitch.withgoogle.com/
2. 操作界面与模式
可以看到它整个操作界面非常简洁，左边是示例作品，右边就是和 AI 进行对话的区域。
有两种模式可以选择：
2.1. 标准模式
使用的是 Gemini 2.5 Flash 模型。可以看到关键词 faster，它生成的速度会更快，支持调整和导出为 Figma。
2.2. 专业模式
使用的是 Gemini 2.5 Pro 模型。生成速度会相对慢一点。它支持上传图片或者草图生成高保真UI。
3. 使用示例
前面就说可以通过一句话或者一段话让他生成一套比较高级的 UI 设计。如果你对你的产品还没有很清晰的认识规划，还没有完全想好的话，就可以把它当做一个需求分析兼设计师，跟他聊。
比如：
我想做一个自动生成手帐的网站，上传照片就能自动合成一张好看的手帐风格的图片，用于社交媒体传播。
比如：
我想做一个轻量的出行规划 APP，需要清晰的路线。
如果产品已经有比较详细的规划了，就可以把这个产品大概功能以及需要哪些页面都告诉他。
这个产品是一个语音记账工具。
核心功能：
说一句话就能记账。比如用户说"今天中午吃饭花了45块"，系统会自动识别，然后用户确认一下就完成记账了，整个流程大概10-15秒。完整的产品功能包括：
- 语音记账（核心功能）
- 说一句话自动识别金额、分类、备注
- 账单列表
- 查看最近的记账记录
- 支持删除和修改
- 数据统计和可视化（统计页）
- 显示本月支出、收入、结余
- 各分类支出占比（带进度条可视化）
- 按分类查看消费明细
- 导出Excel功能
- 分类管理
- 12个默认分类（餐饮、交通、购物等）
- 支持自定义添加分类
- 用户系统
- 微信/手机号登录
- 数据云端同步
我需要全部的前端页面
大概一两分钟全部的页面就出来了，基本上符合这个目标产品的规划。
4. 界面编辑功能
我们来试一下编辑的功能。
可以直接通过对话的方式让它修改，比较适合全局调整颜色或者风格。
也可以局部调整，单选中某一页，上方会出现菜单栏。点击第一个笔尖图片，就可以框选出你需要修改的部分，描述你的想法，这时候他就会把你需要调整的界面以及内容添加到对话框，点击应用稍等片刻即可。
还有一种方式，同样点击具体页面上方出现调色板图标，点击之后右侧就会出现一些选项，支持调整light 模式还是 dark 模式，调整颜色、圆角以及字体。
以上我们用的都是标准模式，下面我们再来试一下专业模式，上传一张线稿图让它生成网站页面。
还挺还原的。
5. 代码导出与Figma导入
关于获取前端代码这个功能，点击已经生成的页面，点击 view code 就可以看到完整代码。也可以点击 copy to figma，然后到 figma 文件中一键粘贴，粘贴后的 UI 设计稿可以继续调整的。
让Stitch完成原型图后，就可以把前端代码给到Bolt/V0/Cursor等其他可以写代码的工具，进行下一步开发了。