Google Stitch 2.0 太牛了！UI 丑的问题有救了

之前写过 Google 的一个页面设计工具 Stitch 的介绍，当时就觉得这工具太牛了。我现在做的网站基本上设计这块都靠它，AI 直出的还是不得行。

前不久 Google 发布了一个大更新，必须要体验一下，写下来给大家参考。

网址是这个：https://stitch.withgoogle.com/

它网站的背景改了，现在看上去就更加高级，有科技感。使用方式没什么变化，还是在对话框里面描述你想要的设计，或者给出你的参考图，可以选择生成 App 还是Web 端的设计图。

我注意到还有一个选项可以选择主题，有十来种色彩搭配吧，选择你中意的，也可以让stitch决定。

什么是 Vibe Design

Google 这次发布的核心概念叫 “vibe design”，类比“vibe coding”来的。

Vibe coding 的意思是你不用一行一行写代码，描述清楚你要什么，AI 帮你写。

Vibe design 同理，你不用在设计软件里拖拖点点，描述你想要的风格、想给用户的感受、想解决的业务问题，AI 直接生成高保真的 UI 设计稿。

其实它之前的版本就已经可以做到了。

体验一下

有主题色卡了，看着非常专业。

右键编辑就可以自己调整相应的配色，这对于审美比较好的人，或者有些美术功底的人，就是神助。

而且你改完主题色，它是会自动给你更新已经设计好的页面的，相当于你的颜色调整可以应用到全局，轻松达到统一的效果。

还有一种更改主题色的方式，对话框里面选择其它主题，选择保存并应用。解决了配色不好看的问题。

另外还有一些细节，比如可以编辑设计图上的文本内容。自己改或者AI生成。不过我感觉这个问题不大，后期网站开发的时候都可以调整。

**无限画布。**界面整个重新设计了，现在是一个可以无限延展的画布，有点像 Figma 的感觉，交互效果更好了。

拿到设计图之后，我的习惯是全选下载，得到的是一个压缩包，里面有每个页面的html代码以及设计图。

文件夹给到你的编程工具，让它根据设计图重构页面。

这里有一个技巧，有时候AI复刻页面会跑偏，用下面的指令亲测效果比较好，因为加上了subagent验证的逻辑。一个改一个校验，直到全部做完没问题了才会结束，一步到位，比较节省时间。

指令是这个：

**DESIGN.md。**这个功能我觉得挺好用的。它新增了一种叫 DESIGN.md 的文件格式，是个 AI 友好的 Markdown 文件，里面存的是你的设计规范，字体、颜色、组件风格这些。你可以从一个已有的网站 URL 直接提取出设计系统，也可以在不同项目之间导入导出这个文件。这样每次开新项目不用重头来过，风格一致性也好控制。

**即时可交互原型。**设计稿生成之后，可以把多个页面“Stitch”在一起，就点击画布右上角的一个播放按钮就能预览完整的跳转流程。而且它能自动推断你点了某个按钮应该跳到哪个页面，不用手动连线。快速验证交互逻辑挺方便的。

**MCP Server。**Stitch 现在有了 MCP 服务器，可以在 Claude Code 或 Cursor 里直接调用 Stitch 的能力。也就是说你可以边写代码边生成对应的 UI，两边同步。

这个我还没试过 ，感兴趣可以试一下。

它能解决什么问题

总结一下，我自己的用法是这样的：做产品的时候，我先用 Stitch 生成整套 UI 设计稿，然后把下载的代码和设计图丢给编程工具（比如 Claude code 或者 codex）继续开发。

Stitch 帮我解决了UI图丑的问题，一句话出个原型，不满意继续改，改到差不多了再交给开发工具。

当然，Stitch 生成的 UI 有时候也需要调整。如果你对设计有很高要求，还是要花时间校对一下。但对于独立开发者或者小团队来说，它的门槛和效率已经很不错了。

⬇️ 新封面图（AI 生成）

⬇️ 旧封面图（保留对比）