在昨天 2025 年的 Google I/O 大会上 Google 一口气发布了超多的 AI 工具集，其中包括了一款叫做 Stitch 的 AI 工具，它可以快速帮助设计师和开发者将 UI 设计理念变成可实际使用的设计稿，生成设计稿之后可以直接导入到 Figma，或者直接导出成前端代码。所以本文就具体来介绍一下 Stitch。

Stitch 是什么？

Stitch 是 Google Labs 推出的一个实验性项目，它利用 Gemini 2.5 Pro 的多模态能力，帮助用户将简单的文本提示或图像输入转换成复杂的 UI 设计和前端代码。这个工具的核心理念是解决设计与开发之间的鸿沟，让两者之间的工作流更加流畅和集成。

传统上，将设计理念转化为实际代码需要大量的手动工作和反复沟通。Stitch 正是为解决这个问题而生，它能在几分钟内生成完整的 UI 设计和对应的前端代码。

设计师还可以让 AI 根据设计理念从既存的设计稿中修改元素或者整体修改，让设计师不用再大幅调整画面来验证想法。

Stitch 还可以根据用户的提示词来反复迭代修改给出的设计，微调或者大幅修改。

主要功能与特点

1. 多种输入方式

Stitch 支持两种主要的输入方式：

  • 文本提示：用户可以用自然语言描述他们想要构建的应用程序，包括颜色方案或期望的用户体验等细节。Stitch 会根据描述生成一个定制的视觉界面。
  • 图像输入：这可能是 Stitch 最强大的功能之一。用户可以上传白板上的设计草图、令人印象深刻的 UI 截图或粗略的线框图，Stitch 会处理这些图像并生成相应的数字 UI。

2. 强大的 AI 模型支持

Stitch 由 Google 的 Gemini 2.5 Pro 和 Gemini 2.5 Flash AI 模型提供支持。用户可以选择这两种模型中的任何一种来为 Stitch 的代码生成和界面构思提供动力。

设计本质上是一个迭代过程，Stitch 通过允许生成多个界面变体来促进这一过程。用户可以尝试不同的布局、组件和样式，以实现所需的外观和感觉。

一旦对设计满意，Stitch 提供了关键的桥梁连接到开发工作流程：

  • 可以直接导出到 Figma，Figma 是一个流行的在线设计、原型设计和协作工具。
  • 生成的代码可以在 IDE（集成开发环境）中进一步完善。

Stitch 允许用户微调它生成的任何应用程序设计元素。用户可以通过交互式聊天、主题选择器和粘贴到 Figma 的功能，真正专注于他们的创意设计和开发需求。

实际应用案例

在 Google I/O 大会的演示中，Google 产品经理 Kathy Korevec 展示了使用 Stitch 创建的两个项目：一个为书籍相关应用设计的响应式移动 UI 设计，以及一个用于养蜂的网络仪表板。

Korevec 将 Stitch 描述为”你可以来完成初始迭代，然后从那里继续前进的地方”。她强调，目标是使设计过程高度可访问和用户友好，特别是对于那些希望提升设计思维或软件开发的个人。

Korevec 也指出，虽然 Stitch 非常强大，但它并不是要成为像 Figma 或 Adobe XD 那样的全功能设计平台。

虽然之前已经有不少的平台发布了根据自然语言生成 UI 的功能，比如说 V0，Bolt.new 等等，但这些平台重点在于生成可直接使用的网页代码，在设计理念上并没有一个统一的方案，需要用户根据自己的需求调整提示词，而我自己的使用体验来说，我任意给了一些提示词，比如让其设计一个语言学习的应用，让其设计一个人事管理系统，都可以给出相对比较稳定的设计风格。

如果你脑袋中有很多想法，不妨先让 Stitch 来给你具象化，然后基于具体的设计稿再实现你的需求。

  • [[Project Mariner]]
  • [[Google Jules AI 编码助手]]