用 Stitch 设计：核心入门指南

欢迎使用 Stitch。今天你将学习从设计出发，进入灵感发散。关键是不要想太多。

好的提示词来自好的设计过程

发散。 最难的是面对空白页。做出更好设计的最佳方式是迭代，而不是一步到位的完美提示词。让我们遵循一个简单的公式。

初始提示词示例

一个好的初始提示词遵循这个公式：

第一个提示词不需要完美。描述你希望在页面上呈现的具体内容和整体氛围，暂时不用纠结具体的字体选择或十六进制色值。Stitch 会帮你完成这个发散过程。我们需要摆脱空白提示词，进入创造状态。

下面是一个例子。

选择设备类型

App 还是 Web？先随便选一个。一开始不用太纠结设备类型，凭直觉选一个你觉得最合适的格式。随着迭代，Stitch 提供了很多方式在两种模式之间转换。

然后点击生成。

画布导航与操作

让我们先熟悉一下画布。

快捷键

把画布上的主要交互分成两种模式来理解：选择与导航。V 键切换 Select（选择）工具，H 键切换 Pan（平移）工具，用于快速拖拽导航。画布很大，很容易迷失方向。如果发生这种情况，按 ⌘← / Ctrl+← 跳转到最近的屏幕。你可以用 ⌘→ / Ctrl+→ 和 ⌘← / Ctrl+← 在屏幕之间循环切换。

按 ? 可以查看所有可用的快捷键列表。

开始发散过程

真正的发散过程从设计出现的那一刻开始。你很可能会喜欢初始生成结果的某些方面，而不喜欢另一些。Stitch 提供了工具来调整你不喜欢的部分，并进一步放大生成得好的部分。

一次只做一处大改动

挑一件你想改变的事，就一件。选中你想修改的屏幕，点击 Edit，Add to Chat，然后写提示词。要具体说明改什么、怎么改。 例如，如果价格表需要突出最具性价比的档位：

针对具体组件

具体的视觉指令

UI/UX 关键词

更新价格表以突出中间那张卡片。增加它的容器高度并添加投影。缩小相邻卡片的比例，建立清晰的视觉层级。

你可以一直沿用这个公式：找到一处改动，用 UI/UX 关键词写出清晰、有指向性的提示词，然后生成。

编辑主题（Edit Theme）

如果你的改动属于设计的核心主题范畴，Stitch 有一个专门的功能够更快地完成这类特定修改。

选中屏幕，点击 Generate，然后选择 Edit Theme。在这里你可以修改主题的核心要素，比如浅色/深色模式外观、强调色、组件的圆角半径和字体。

从设计到原型

当设计达到比较满意的状态后，让我们试驾一下。点击屏幕，点击 Generate，然后选择 Prototype。这会创建一个可滚动、可交互的原型，帮你感受设计实际运行起来的样子。

在这里你可以检查静态设计中看不到的交互状态。试试按钮、链接、卡片等组件的悬停样式。在文本框中输入一段消息，看看对于预期的文字量来说它是否太小或太大。想想这个原型将来会如何被实际使用。然后基于这些新的交互因素继续发散。

下载代码与图片

当你准备好把设计变成现实时，就该下载代码和图片了。Stitch 会同时生成图片和 HTML 代码两种产出。

点击某个屏幕，或拖拽选中所有想导出的屏幕，点击下载。这会把一个 zip 文件下载到你的设备，你可以把它集成到各种工具中，让它真正落地。

HTML 可以转换成多种格式

需要理解的一点是：HTML 代码是一个转换的基础。LLM 非常擅长把 HTML 和参考图结合，转换成其他组件格式，比如 React、Angular、Vue，或者 Jetpack Compose、Flutter、SwiftUI 等非 Web 平台。

想了解如何生成特定的组件格式，请查看 Build Strategies 章节。

继续发散，继续创造

获得更好结果的关键是有效的提示词和发散过程。不断迭代，直到找到感觉对的设计。