体验 Google Stitch：Vibe Coding 最难的一环终于被补上了
前两天，Google 一口气更新了 Stitch 和 Google AI Studio。
我本来想写一篇实操文，看看能不能直接用这两个工具从零做出一个可上线的产品。
结果真正开始试之后，我发现它解决了一个更难的问题：如何做出有品味、一致性高的产品。
以前，taste 是设计师的专利。你要么自己有审美，要么找个靠谱的设计师。
现在，Stitch 让你可以把感觉变成设计。你不需要会画图，只需要会说话。
我之前就体验过 Stitch，评价已经很高了。
但这波更新之后，感觉变了。
官方加上了高保真 UI、AI 原生画布、设计代理、语音助手，以及导出到开发工具的能力。Google AI Studio 也接入了 Firebase 补齐了后端。
如果你对产品设计几乎没有经验，或者还在用老一套方式画界面，那 Stitch 真的很值得你亲手试一次。
言出法随
我们先从这么一句提示词开始：
我要设计一个宠物寄养店的网页。我们提供狗狗和猫咪的短期寄养服务，按天计费，适合主人出差或旅游时使用。每只宠物都有独立的房间，每天会喂食、遛狗、清洁，还会拍照片和视频发给主人报平安。我们的护理人员都有丰富的养宠经验。网页风格要温馨可爱，让人看了感觉放心。
之后进行模式的选择，除了提供 Gemini 3 Flash 和 Gemini 3.1 Pro 之外，还可以用 NANA Banana Pro 重新设计。
这些是之前就有的功能，但它还新出来了一个功能叫 Ideate。
Ideate 的作用就是基于你提供的模糊想法，快速生成解决方案。
这次还新引进了一个功能叫 Design Systems。
有了这个功能，你就可以全局统一设计风格、颜色、字体等视觉元素。
接下来我选择了一个未发布的页面，点击 Ideate 模式，并让 Stitch 自动决定使用什么样的设计风格。
提交后，Stitch 会开始规划页面布局，并给出几个方案供你选择。
这里的界面设计和传统聊天工具很不一样。
对话记录被放在了左侧，左下角有一个 Agent Log 按钮，点开后可以看到你对当前画布的每一步操作记录。
画布底部是命令输入框，你可以随时输入新指令来调整设计。
整个交互逻辑本质上是一个 Agent 系统，你下达指令，AI 执行并反馈结果，所有操作都有迹可循。
左侧的对话记录中，提示让你选择所提供的方案，这里选择方案一。
之后 Agent 会生成一个 PRD 文档，里面包含了设计这个网页所需的所有内容。
如果想改成中文或者修改内容，在对话框里说一声就行。
这里我就不多调了，直接让它生成。
生成完成后，你会看到一个完整的网页设计稿出现在画布上。
接下来才是 Stitch 真正让我惊艳的地方，它不是给你一张静态图就完事了，而是提供了一整套交互式的设计工具。
全局设计系统
首先是 Design Systems 的实际应用。点击左上角的设计系统面板，你可以看到 Stitch 已经自动为这个项目提取了一套完整的设计规范：主色调、辅助色、字体层级、圆角大小、间距标准等等。
因为在一开始没有选择风格，这里我们让 Stitch 基于第一张设计图，提炼出设计风格。
等待一会儿过后，画布上就会出现风格样式。
点击「提升为全局」按钮，在右侧的设计系统中，就会采纳当前的设计风格。
并且生成了一个 DESIGN.md 文件。后续在进行新页面的设计时，会基于这个文件作为指导。
还有一个很厉害的功能，除了可以基于选中的页面生成设计系统，还可以从另一个网站进行导入。
比如我想克隆 Anthropic 官网的风格，只需要将这个 URL 地址进行导入 https://www.anthropic.com/，就能够直接把这个网站的风格拷贝下来。
然后就可以基于这个风格进行页面设计了。
这个实在是太酷了，之前要想参考某个网站的风格，都得先截个图，让大模型自己去识别，现在有了 Stitch，只需要输入网址。
生成变体
如果你对当前设计出来的方案不太满意，可以直接让 Stitch 生成变体。
在画布上方有个 Generate -> 变体按钮，点一下，它会基于当前设计给出 1 到 5 个不同风格的版本。
你可以选择要优化的方向、创意范围，或者输入自定义说明。
比如这里我选择创意范围，变体数量是 3，我想让它大胆的设计。
之后就会生成多个版本，你可以在这几个版本之间快速切换对比，选一个最合适的继续调整。
精准编辑
这个功能才是我觉得最实用的。
你选择画布上的某个页面，用快捷键 E 或者工具栏中点击修改。
点击任何一个元素——标题、按钮、图片、文本块，甚至是某个图标，然后在输入框里说你想怎么改，Stitch 就会精准地修改那个位置。
比如我点击了首页的图片位置，输入「我希望这里可以放轮播图」。之后会在画布上新生成一个页面。
这种交互方式的好处是，你不需要去记什么命令格式，也不用担心描述不清楚。选中哪里改哪里，AI 能精准理解你的意图，改完不满意再说一句就行。
语音控制
更方便的是，输入框旁边还有个麦克风按钮，你可以直接用语音来控制。
这是一个实时的语音控制。
当你点击以后，整个页面会被 Agent 接管。你直接跟他对话，指哪改哪。
我试了一下，体验确实比打字要快。尤其是当你需要连续调整多个地方的时候，说话的速度明显比打字快得多。
比如「把这个标题往上移一点，字号再大一号，颜色改成深蓝色」，一口气说完，Stitch 就能准确执行。
尤其是语音和页面的识别与反馈速度真是出人意料。
原型演示
设计稿调得差不多了，可以直接点击右上角的 Preview 按钮进入原型演示模式。
这时候整个页面就变成了可交互的原型。
可以直接把设计稿转成可交互的页面，更绝的是，Stitch 还能基于当前页面的某个按钮，自动生成下一个页面。
比如首页有个「Suite」的按钮，先点击顶部的 Edit 按钮，选中 Suite 按钮，选择「Imagine new screen」，Stitch 就会分析这个按钮的功能，然后自动生成点击这个按钮跳转后的新页面。
而且生成的新页面会自动继承前面设置的 Design Systems，所以整个风格是统一的。
你可以继续在新页面上调整，再基于新页面的某个按钮生成下一个页面。
就这样一路往下，一个完整的网站原型很快就搭建出来了。
但是在这过程当中，你可能会遇到一致性不一样的情况。比如说我在生成第二个页面的时候，就会遇到它和第一个页面的顶部导航栏不一样。那你这时候就可以直接跟 AI 说，让它进行修改。
最后当你觉得一切都没问题了，你可以在 Stitch 中，点击右上角的导出，可以把选中的所有页面导出到 Google AI Studio、Jules、Figma 等地方进行二次开发。
MCP 与 Skill
这是我认为最重磅的更新。
如果你不想在 Stitch 里面设计，Stitch 也提供了 MCP 协议支持。
并且还提供了 Skills，帮助 Agent 更好的理解如何使用 Stitch 工具。
以 Claude Code 为例，在终端分别输入以下两行命令，其中 api-key 需要替换成自己 Stitch 账号中的 API 密钥：
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: api-key" -s user
npx add-skill google-labs-code/stitch-skills --skill react:components --global
这些都装好了以后，打开 Claude，直接跟它说：列举出 xxxx 项目的所有屏幕。
之后我就想让它把刚才 Home 页面中，导航栏的所有 Tab 都填满。
收到任务后，Claude 就会开始干活，调用 Stitch 工具进行页面的设计，最后在你的 Stitch 项目中，你能在画布上看到新增加的页面。
现在你只需要会描述你想要什么，好看和品味的事情全交给 Stitch。工具已经准备好了，就看你有没有好想法了。
本次受限于篇幅长度，还有很多功能没有提到或者展示出来。
但真的希望你能亲身体验一下这款产品，会让你爱上产品设计这一环节。
关于收费问题，目前没找到相关信息，每天有 400 点数可以免费使用，足够用了。
Ending
写完这篇体验，我最大的感受是：做产品的门槛真的降低了。
以前我们总说想法很多，但不会实现，现在这个借口不太站得住脚了。Stitch 把设计这件事变得像聊天一样简单，MCP 又把设计和开发打通了。
你要做的就是把脑子里的想法说清楚，剩下的交给工具。
当然，工具再强也只是工具。它能帮你快速验证想法，但做出一个真正好用的产品，还是需要你对用户需求的理解、对细节的打磨、对体验的坚持。
但至少现在，试错的成本低了，迭代的速度快了。有想法就去试，不行就改，这才是做产品该有的节奏。
如果你也有个想做很久但一直没动手的产品，不妨去 https://stitch.withgoogle.com 试试。
说不定几天后，你就能拿着可以演示的原型去找用户聊了。
原文：体验完 Google Stitch，我发现 Vibe Coding 最难的一环终于有人补上了 — 作者：夏尾的AI口袋