Stitch——Google热门的免费AI UI设计工具
Google Stitch是谷歌在2025年I/O大会上推出的一款AI驱动的UI设计工具。它能根据文字描述或草图快速生成网页和移动端界面，并导出可用于开发的前端代码，并且可以直接与另一个前端AI编码工具AI Studio直接联动，将生成的UI发给AI Studio进行开发。
访问方式与要求：
- 通过访问官网（
stitch.withgoogle.com），使用谷歌账户登录即可开始使用。 - Google Stitch并不支持全部地区，如vpn设置为中国香港也无法访问，美国地区可以使用。
使用流程：
第一步：进入官网并完成登录：
第二步：选择合适的模型：
- 默认选择的是3 Flash,使用Gemini 3.0 Flash,生成速度较快。
- 3 Pro模式下，优先保障高质量与推理能力，速度缓与3 Flash。
- Redesign模式使用Nano Banana Pro重新设计现有项目，需要添加屏幕截图。
- Ideate模式下，支持提出问题并寻找解决方案。
第三步：选择移动端或Web端并添加描述：
示例：3 Flash模式下，创建Web端项目：
内容描述：实现一个简单的项目管理工具UI界面；
模型思考反馈：
模型绘制过程：
绘制完成：
内容总览：
界面详情：
第四步：生成变体
当希望得到同一个界面的多个不同UI设计（变体）时，有以下三种方式：
- 选中已经生成的UI设计界面，在对话框中选中“3x”，添加提示词指导变体的生成；
- 通过“+”按钮上传图片资源，在对话框中选中“3x”，添加提示词指导变体的生成；
- 只通过对话框添加提示词描述并选中“3x”，生成多个变体。
示例：
通过Select选择要生成变体的设计稿：
对话框会显示已选择的界面，选择变体后添加描述补充即可：
结果概述：
界面详情（生成3个变体）：
第五步：微调
当stitch给出的界面设计总体符合自己的愿景时，可以采取更细化的调整UI组件内容
选择编辑按钮：
然后在界面上选择需要微调修改的组件内容：
例如我选择了如图的进度条样式，并选择Edit With AI，输入提示词：
思考过程：
最终结果：（此处省略几次样式美化与调整）
第六步：导出与使用
选中目标设计稿后悬停，会弹出一个菜单栏，鼠标悬停到More即可展示菜单选项：
使用一：直接复制使用前端代码：
在悬停菜单中选择“查看代码”:会直接展示该界面的前端代码，且支持复制。
使用二：复制（导出）到Figma:
在悬停菜单中选择“复制到Figma”:
点击右边弹出框底部的“转换”即可完成复制，在Figma中粘贴即可：
使用三：导出：
实际上包含了“复制代码”、“复制到Figma”、“下载”,并且支持更多的导出方式。
其中.zip导出格式会下载一个压缩包，解压后包含两个文件：一个code.html代码文件和一个screen.png图片文件。
