在应用程序开发过程中，常常会出现这样的情况：你和团队敲定了一个设计，经过开发和测试，终于到了审查阶段，却发现成果不尽如人意。要么显得不够成熟，要么就是“感觉不对”。过多的迭代耗费了大量时间，原始想法在过程中迷失了。

 前往stitch.withgoogle.com并使用你的Google账号登录后开始。

 1. 选择你的模式

在屏幕右上角，你可以在以下模式之间切换：

1. 标准模式（Gemini 2.5 Flash）：最适合快速草稿和MVP。
2. 实验模式（Gemini 2.5 Pro）：允许你从图像输入、线框或草图中生成UI，你可以上传这些内容以获取灵感。

2. 描述或上传

你会看到一个提示框，旁边有一个画布。

1. 文本提示示例：“一个注册表单页面，顶部有标志，电子邮件/密码字段，主要颜色的提交按钮。”
2. 图像提示（实验）：上传一个线框或截图，以便在文本旁边指导生成。

例如，我使用了标准模式并给出了以下提示：

“语言学习应用中的测验页面，顶部有进度条。标题挑战你将乌尔都语单词与正确答案匹配，提供四个可能的选项。”

 它基于此生成了一个惊人的UI：

 3. 预览和调整

使用侧边栏调整主题：更改调色板、字体、边框半径，并在深色和浅色模式之间切换。Google Stitch还允许你使用更新的提示修改设计。

例如，我将主题更新为深色，并将字体更改为Manrope。点击应用主题后，输出看起来更加精致：

 4. 智能迭代

你可以优化单个组件或屏幕。例如：

• “将主要按钮变大并变蓝。”
• “在主页顶部添加一个导航栏。”

Stitch非常准确地遵循你的逐步指令。在我的案例中，乌尔都语单词最初显示为罗马化文本。所以我更新了提示：

“以大号Nastaliq风格字体在屏幕中央显示乌尔都语单词，方向为从右到左。”

结果确实令人印象深刻：

 5. 导出和构建

你可以点击生成的图像复制代码，或点击粘贴到Figma，将可编辑的自动布局画板直接放入你的设计工作区。

这是我点击图像并选择复制代码时显示的内容。它立即准备好集成到开发环境或设计文件中。

 最终想法和获得最佳结果

虽然它不是一个完整的设计解决方案，但Google Stitch非常适合用于MVP和早期开发阶段。你可以随时导出到Figma进行高级设计定制或构建多屏逻辑。

以下是一些获得更好结果的提示：

1. 使用UI特定语言如“导航栏”、“仪表板小部件”、“主要按钮”或“自动间距”来更准确地指导结构。
2. 从高层次描述开始，并逐步完善。例如：“健身追踪应用。”
3. 编辑时要非常具体。清楚地提到元素，例如“将注册表单上主要按钮的颜色更改为白色。”

Google Stitch快速、直观，当你需要工作原型而不想陷入数周的反复时，它是一个很好的起点。绝对值得一试。