Google Stitch - AI 原生 UI 设计工具
官网定位一句话：将文字、草图、截图、语音指令，一键生成 Web / 移动端高保真界面、可交互原型与可直接投入开发的前端代码，打通「灵感→设计→开发」完整工作流。
访问入口：stitch.withgoogle.com
🚀 Stitch：从想法到落地
Stitch 提倡“设计先行，边做边改”。告别面对空白页的焦虑，无需追求一步到位，通过不断迭代轻松产出优秀设计。
1. 极简起步：三步提示词公式
写下你的初始想法，无需死磕细节，给一个大概的“配方”即可生成：
- [想法] 是什么 + [主题] 风格氛围 + [内容] 核心板块。
2. 精准迭代：每次只改动一点
生成初稿后，构思才真正开始。
- 小步快跑： 每次锁定一个问题，用具体指令（配合 UI/UX 词汇）让 AI 修改。
- 全局调整： 善用“编辑主题”一键更换深浅模式、颜色和字体。
3. 验证与交付：从静态到上线
- 动效测试： 一键生成交互式“原型”，测试按钮悬停、文本输入等真实体验。
- 多端导出： 导出 HTML 和图片包。HTML 是万能资产，可借助大模型轻松转换为 React、Vue 或手机原生代码（Flutter/SwiftUI 等）。
💡 核心寄语： 别想太多，先生成，再优化。持续构思，直到满意！
欢迎来到 Stitch。今天您将学习如何从设计切入并专注于概念构思。关键在于不要过度思考。
获得更佳提示词与更优设计的关键
进行构思。 最难的部分是跨越空白页面。创造更优设计最好的方法是不断迭代，而不是追求完美的初始提示词。让我们遵循一个简单的公式。
初始提示词示例
一个优秀的初始提示词配方遵循以下公式：
[想法] 它是什么。
[主题] 核心主题的想法。
[内容] 具体内容。
[图片] 可选的参考图片。
您的第一个提示词不需要十全十美。只需描述您希望页面上呈现的具体内容以及大致的风格氛围。先不要担心具体的字体选择或十六进制颜色代码（Hex Code）。Stitch 会协助您完成这个构思过程。我们需要告别空白的提示词，释放创造力。
以下是一个示例：
[想法] 一个名为“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）”，然后编写提示词。务必具体说明要修改什么以及如何修改。 例如，如果价格表需要突出最划算的档位：
更新 价格表（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）”章节。
持续构思，持续创造。
获得更佳结果的关键在于有效的提示和不断构思。持续探索与构思，直到找到让您感觉恰到好处的设计。