Google Stitch AI 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 图片文件。