Stitch——Google热门的免费AI UI设计工具

Google Stitch是谷歌在2025年I/O大会上推出的一款AI驱动的UI设计工具。它能根据文字描述或草图快速生成网页和移动端界面，并导出可用于开发的前端代码，并且可以直接与另一个前端AI编码工具AI Studio直接联动，将生成的UI发给AI Studio进行开发。

访问方式与要求：

1. 通过访问官网（stitch.withgoogle.com），使用谷歌账户登录即可开始使用。
2. Google Stitch并不支持全部地区，如vpn设置为中国香港也无法访问，美国地区可以使用。

使用流程：

第一步：进入官网并完成登录：

第二步：选择合适的模型：

1. 1. 默认选择的是3 Flash,使用Gemini 3.0 Flash,生成速度较快。
   2. 3 Pro模式下，优先保障高质量与推理能力，速度缓与3 Flash。
   3. Redesign模式使用Nano Banana Pro重新设计现有项目，需要添加屏幕截图。
   4. Ideate模式下，支持提出问题并寻找解决方案。

第三步：选择移动端或Web端并添加描述：

示例：3 Flash模式下，创建Web端项目：

**内容描述：**实现一个简单的项目管理工具UI界面；

模型思考反馈：

模型绘制过程：

绘制完成：

内容总览：

界面详情：

第四步：生成变体

当希望得到同一个界面的多个不同UI设计（变体）时，有以下三种方式：

1. 选中已经生成的UI设计界面，在对话框中选中"3x"，添加提示词指导变体的生成；
2. 通过"+"按钮上传图片资源，在对话框中选中"3x"，添加提示词指导变体的生成；
3. 只通过对话框添加提示词描述并选中"3x"，生成多个变体。

示例：

通过Select选择要生成变体的设计稿：

对话框会显示已选择的界面，选择变体后添加描述补充即可：

结果概述：

界面详情（生成3个变体）：

第五步：微调

当stitch给出的界面设计总体符合自己的愿景时，可以采取更细化的调整UI组件内容

选择编辑按钮：

然后在界面上选择需要微调修改的组件内容：

例如我选择了如图的进度条样式，并选择Edit With AI，输入提示词：

思考过程：

最终结果：（此处省略几次样式美化与调整）

第六步：导出与使用

选中目标设计稿后悬停，会弹出一个菜单栏，鼠标悬停到More即可展示菜单选项：

使用一：直接复制使用前端代码：

在悬停菜单中选择"查看代码":会直接展示该界面的前端代码，且支持复制。

使用二：复制（导出）到Figma:

在悬停菜单中选择"复制到Figma":

点击右边弹出框底部的"转换"即可完成复制，在Figma中粘贴即可：

使用三：导出：

实际上包含了"复制代码"、"复制到Figma"、"下载",并且支持更多的导出方式。

其中.zip导出格式会下载一个压缩包，解压后包含两个文件：一个code.html代码文件和一个screen.png图片文件。