Stitch：将提示词和参考资料转为交互式界面原型

什么是 Stitch？

Stitch 是 Google Labs 推出的 AI 界面设计工具，用于探索移动端和网页应用。描述你想要的屏幕或体验，或提供图片、文本和代码作为上下文，然后在网页画布上继续完善设计。

通过对话优化布局和视觉方向，探索不同方案，并连接屏幕创建交互式原型。导入和导出设计规则有助于在不同项目之间保持一致的风格，而开发者交接选项则支持后续实现。Stitch 以 Google 托管的 Web 应用形式运行。

Stitch 能做什么？

将文字需求或参考图片转化为界面设计方向，并使用额外文本或代码作为项目上下文。

在 AI 原生画布上探索和修改屏幕。设计代理和 Agent manager 支持项目上下文及多种设计方向。

连接屏幕并使用 Play 预览用户旅程，然后修改单个元素或整体流程。

导入或导出 DESIGN.md 设计规则，并将设计导出至 AI Studio 或 Antigravity 等开发者工具。MCP 和 SDK 访问支持基于工具的工作流。

使用场景

描述目标用户、目标和屏幕结构，然后比较不同的界面方向，再选择一种方案继续开发。

将关键屏幕连接成原型，并与团队或利益相关者一起检查导航流程。

使用共享设计规则指导相关屏幕，并将选定的设计交接至开发工作流。

常见问题

开始前需要完成的线框图吗？

不需要。你可以从自然语言需求开始。图片、文本或代码可以提供额外上下文，草图或屏幕截图也可以作为视觉起点。

生成后可以更改设计吗？

可以。通过对话优化设计，探索不同的布局或配色方案，并进行针对特定屏幕的修改。语音交互也是当前设计画布工作流的一部分。

原型能取代应用开发吗？

Stitch 支持界面设计、原型制作和开发者交接。预览或生成的前端是实现工作的起点；应用逻辑、集成和测试仍需在开发工作流中完成。

如何保持设计系统的一致性？

使用 DESIGN.md 在 Stitch 项目以及兼容的设计或编码工具之间导入或导出设计规则。该工具包还可以从 URL 提取设计系统。

如何将工作迁移到开发者工具？

将设计导出至 AI Studio 或 Antigravity 等工具。如需基于工具的工作流，Stitch 还提供 MCP 服务器和 SDK。实现界面时，请检查交接产物。

Stitch