Google Stitch：AI 驱动的 UI 设计与代码生成工具

生成变体

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

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

实际操作中，可以通过 Select 选择要生成变体的设计稿，对话框会显示已选择的界面，选择变体后添加描述补充即可。结果通常会生成三个不同的变体供挑选。

微调设计

如果 Stitch 给出的界面设计总体符合愿景，可以采取更细化的调整 UI 组件内容。点击编辑按钮，然后在界面上选择需要微调修改的组件内容。例如选择了进度条样式，并选择 Edit With AI，输入提示词即可。

工具会展示思考过程，经过几次样式美化与调整后，最终效果会更贴合需求。

导出与使用

最后一步是导出与使用。选中目标设计稿后悬停，会弹出一个菜单栏，鼠标悬停到 More 即可展示菜单选项。

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

复制到 Figma：在悬停菜单中选择'复制到 Figma'，点击右边弹出框底部的'转换'即可完成复制，在 Figma 中粘贴即可。

其他导出方式：实际上包含了'复制代码'、'复制到 Figma'、'下载'等多种方式。其中.zip 导出格式会下载一个压缩包，解压后包含两个文件：一个 code.html 代码文件和一个 screen.png 图片文件。