---
type: article
title:  "Google Stitch - AI 原生 UI 设计工具"
date:   2026-06-28 21:24:00 +0800
tags: [translation, stitch, design, agent, google, ui]
---

官网定位一句话：**将文字、草图、截图、语音指令，一键生成 Web / 移动端高保真界面、可交互原型与可直接投入开发的前端代码，打通「灵感→设计→开发」完整工作流。**
访问入口：[`stitch.withgoogle.com`](https://stitch.withgoogle.com/)

![](/images/2026/stitch/web-app.webp)

## 🚀 Stitch：从想法到落地

Stitch 提倡“设计先行，边做边改”。告别面对空白页的焦虑，无需追求一步到位，通过不断迭代轻松产出优秀设计。

### 1. 极简起步：三步提示词公式

写下你的初始想法，无需死磕细节，给一个大概的“配方”即可生成：

* **[想法]** 是什么 + **[主题]** 风格氛围 + **[内容]** 核心板块。

### 2. 精准迭代：每次只改动一点

生成初稿后，构思才真正开始。

* **小步快跑：** 每次锁定一个问题，用具体指令（配合 UI/UX 词汇）让 AI 修改。
* **全局调整：** 善用“编辑主题”一键更换深浅模式、颜色和字体。

### 3. 验证与交付：从静态到上线

* **动效测试：** 一键生成交互式“原型”，测试按钮悬停、文本输入等真实体验。
* **多端导出：** 导出 HTML 和图片包。HTML 是万能资产，可借助大模型轻松转换为 React、Vue 或手机原生代码（Flutter/SwiftUI 等）。

> 💡 **核心寄语：** 别想太多，先生成，再优化。持续构思，直到满意！

---

- [Everything you need to know](https://stitch.withgoogle.com/docs/learn/overview/)

欢迎来到 Stitch。今天您将学习如何从设计切入并专注于概念构思。关键在于不要过度思考。

## 获得更佳提示词与更优设计的关键

**进行构思。** 最难的部分是跨越空白页面。创造更优设计最好的方法是不断迭代，而不是追求完美的初始提示词。让我们遵循一个简单的公式。

## 初始提示词示例

一个优秀的初始提示词配方遵循以下公式：

```prompt
[想法] 它是什么。
[主题] 核心主题的想法。
[内容] 具体内容。
[图片] 可选的参考图片。
```

您的第一个提示词不需要十全十美。只需描述您希望页面上呈现的具体内容以及大致的风格氛围。先不要担心具体的字体选择或十六进制颜色代码（Hex Code）。Stitch 会协助您完成这个构思过程。我们需要告别空白的提示词，释放创造力。

以下是一个示例：

```prompt
[想法] 一个名为“The Pacing Project”的跑步播客的落地页（Landing Page）。
[主题] 现代、前卫且高对比度。使用带有硬朗线条的黑白色调。
[内容] 一个首屏主视觉区（Hero Section），包含主标题“关于比赛与合理配速的故事与经验”，以及各大播客平台的链接。
```

### 选择设备类型

应用（App）还是网页（Web）？随便选一个即可。刚开始不要在设备类型上纠结太多。凭直觉快速判断哪种格式在当下最合适。在迭代过程中，Stitch 提供了很多将一种模式转换为另一种模式的方法。

现在，点击生成（Generate）。

## 画布的导航与控制

让我们来熟悉一下画布。

### 快捷键

您与画布的两种主要交互可以看作两种模式：选择与导航。`V` 键可以切换到“选择（Select）”工具，而 `H` 键可以切换到“平移（Pan）”工具，以便通过拖拽进行快速导航。

由于画布非常庞大，您很容易迷失方向。如果发生这种情况，请按下 `Cmd + [` / `Ctrl + [` 导航到最近的屏幕。您可以使用 `Cmd + ]` / `Ctrl + ]` 和 `Cmd + [` / `Ctrl + [` 来循环切换不同的屏幕。

如需查看完整的快捷键列表，请按下 `?` 键以显示所有可用的快捷键。

## 开始构思流程

当设计呈现出来时，真正的构思流程才刚刚开始。很有可能，您会发现初始生成的内容中有几处您很喜欢，而另一些地方您不太满意。Stitch 提供了相应的工具，可以让您调整不喜欢的部分，并进一步强化生成得当的地方。

## 每次只做一项重大修改

挑选出您想要修改的一项内容，仅此一项。选择您想要修改的屏幕（Screen），点击“编辑（Edit）”，选择“添加到聊天（Add to Chat）”，然后编写提示词。**务必具体说明要修改什么以及如何修改。** 例如，如果价格表需要突出最划算的档位：

![](/images/2026/stitch/prompt.webp)

> 更新 价格表（pricing table） 以突出中间的卡片。增加其容器高度并添加阴影效果（drop shadow）。缩小相邻卡片的比例，以创建清晰的 视觉层级（visual hierarchy）。

您可以继续套用这个公式：寻找一处修改点，使用 UI/UX 关键词编写清晰且有针对性的提示词，然后点击生成。

### 编辑主题（Edit Theme）

如果您的修改属于设计的核心主题范畴，Stitch 拥有一项特定的功能，可以提高工作效率并精准针对这些特定修改。

选择屏幕（Screen），点击“生成（Generate）”，然后选择“编辑主题（Edit Theme）”。在这里，您可以更改主题的核心要素，例如浅色或深色模式外观、强调色（accent color）、组件的圆角半径（corner radius）以及字体。

### 从设计到原型（Design to Prototype）

当您的设计达到比较满意的状态后，让我们来实际测试一下。点击屏幕，点击“生成（Generate）”，然后选择“原型（Prototype）”。这将创建一个可滚动且具交互性的原型，帮助您亲身体验设计在实际运行中的效果。

在这里，您可以检查在静态设计中无法看到的交互状态。查看按钮、链接和卡片等组件的悬停（hover）样式。在文本框中输入信息，看看对于预期的典型文本量来说，它显得太大还是太小。思考一下这个原型在实际场景中将如何被使用。在此基础上，结合这些新的交互因素继续进行构思。

### 下载代码与图片

当您准备好将设计变为现实时，就可以下载代码和图片了。Stitch 支持将设计输出为图片和 HTML 代码两种格式。

点击某个屏幕，或通过拖拽框选所有想要导出的屏幕。点击下载（download）。这将在您的设备上下载一个压缩包（zip 文件），之后您可以将其集成到许多不同的工具中，让它真正落地。

### HTML 可转换为多种格式

请务必理解，HTML 代码是进行后续转换的基础。大语言模型（LLM）非常擅长结合 HTML 和参考图片，将其转换为其他组件格式（如 React、Angular 和 Vue），或非 Web 平台（如 Jetpack Compose、Flutter 和 SwiftUI）。

如需了解如何生成特定的组件格式，请查看“构建策略（Build Strategies）”章节。

## 持续构思，持续创造。

获得更佳结果的关键在于有效的提示和不断构思。持续探索与构思，直到找到让您感觉恰到好处的设计。