Google Stitch：一句话生成UI设计稿，还能直接导出代码

如果你用 AI 写代码，我相信你一定会有这样的感觉：功能 AI 能帮你写出来，但界面AI味很重，没有设计感，一眼就能看出来是AI写的。

而 Google 出的这个AI设计工具，完美的解决了这个问题，它叫 Stitch。

它是一款 Vibe Design 工具，可以把你的想法直接变成 UI 设计稿。

最关键的是，它终于让 AI 编程生成的页面，开始有“产品感”了。

https://stitch.withgoogle.com/

打开主页之后，你会看到一个很大的输入框。

你可以把你的项目想法输入进去让它设计页面。

先看左下角这几个功能：

1. 第一个功能：【+】号可以上传你希望界面的截图或者网页地址作为设计风格的参考。
2. 第二个功能：界面类型选择，支持开发App（移动端）和Web（网页端）。

再看到右下角的功能：

1. 第一个功能：可以上传一些设计风格，主色调、颜色搭配之类的。 推荐一个开源项目里面包含了很多知名网站的DESIGN.md，可以直接拿来使用。

https://github.com/VoltAgent/awesome-design-md

2.第二个功能：可以切换不同的模式。

3.第三个功能：直接和它语音对话输入你的需求。

接下来我们设计一个App来看下效果。

需求：我希望做一个AI记录饮食的项目，用于体重管理。

当输入完需求之后就会进入一个无限画布页面，它做的第一件事情是先出设计规范。

这是我觉得它特别聪明的地方。它不会一上来就直接生成页面， 而是会先整理一套设计规则。 比如颜色体系、组件风格、排版逻辑这些。

这其实很像真实设计团队的工作流。先定规范，再做页面。所以后面生成出来的界面风格会统一很多。

大概几十秒，设计稿就完成了。

它不是一下直接生成完成。 而是你会看到页面里的组件一个一个被设计出来。

有种设计师正在你面前实时出稿的感觉。

接下来我们看下效果，整体来说页面设计感还是很不错的，但是这里面都是英文，这个时候就需要让它修改。

直接在下面的输入框输入需求即可。

如：把文字都改成中文。

不一会就完成了全部页面的文字修改。

除了全局修改，在实际的过程中还需要局部修改，这个时候你可以选择具体的界面。

然后在页面上方会呼出操作菜单，我们点击Generate（生成）这个相当于可以基于选择页面做二次生成调整。

如果你是团队一起开发，你只是产品经理或者设计师的角色，你还可以使用它的即时原型功能。

可以用鼠标框选中多个页面点击即时原型，这样所有的页面就会变成可以交互的原型了。

进入原型图界面，界面中的功能按钮都可以被点击并且点击后会跳转到对应的页面。

这样就可以很好的和团队成员讲解需求，页面与页面之间的关系，以及每个按钮功能的效果。

如果你觉得某个功能不太符合你的需求，你可以切换到编辑页面，选中你想要编辑的元素进行修改。

支持修改跳转路径、文字内容、图片生成以及直接说出你的需求让AI帮你重新设计都可以。

说完原型图模式，我们再回到设计页面。

如果你对页面设计不满意，你可以基于具体界面进行变体。

你可以让它基于当前页面继续生成更多方案。

比如：

• 优化：局部调整
• 探索：调整布局
• 创意：头脑风暴

甚至还能指定调整方向，比如只改颜色、排版、图片或者文案。

默认生成3个页面，这个功能我觉得特别像真实公司里的设计流程。因为很多时候老板不会直接告诉你“我要什么”，而是会说：“你先出几个方向我看看。”

Stitch 直接一次给你三种不同风格，其实特别适合前期方案阶段。

我选择了创意风格，可以看到这三个风格和之前的风格完全不一样，一个是数据专家模式，一个是竞技场模式，还有一个是沉浸模式。

还有一个特别实用的功能就是生成网页版本，因为很多时候一个产品通常都有多端（手机端+网页端），这里可以直接生成网页版。

两个端生成完成之后，那么上线后营销素材肯定少不了，它居然可以根据页面生成营销海报。

一次性生成不同尺寸，适用于不同的社交媒体平台。

当我们设计完成之后肯定需要导出。

它可以直接支持导出到AI Studio。

这其实已经不是传统意义上的“设计稿”了。而是开始往“设计直接进入开发流程”靠近。对 AI 编程来说，这一步价值非常大，相当于把“设计 → 开发”这条链路直接打通了。

如果你已经有自己的AI编程工具了，就可以选择导出zip。

解压zip里面包含3个文件：

1. 第一个是HTML代码，可以直接使用打开就能看到页面效果，可以直接给到前端开发人员或AI编程工具。
2. 第二个是设计规范，你下次给AI让它学习这个设计风格就能保证下次写出的页面设计风格一致。
3. 第三个是图片，当前界面的截图。

以前我们总觉得：AI 写代码已经很强了，但“设计感”始终还是差点意思。

而 Stitch 给我的感觉是：Google 开始想解决 AI 产品里另一个核心问题了“能不能生成真正能上线的产品体验”。

尤其是它把：设计规范、页面生成、交互原型、多端适配、营销素材、代码导出，这些东西全部串到了一起。

我现在越来越觉得，随着 AI 编程越来越强大，真正稀缺的已经不是“开发能力”了。

因为代码能力正在被 AI 快速拉齐差距。当大家都能快速把功能做出来的时候，真正拉开差距的，反而变成了：产品逻辑、用户体验、设计感、交互细节。

因为用户最终记住的，从来不只是“功能能不能用”，而是“这个产品好不好用，用起来舒不舒服”。

而 Stitch 的出现，某种程度上也意味着：AI 的能力边界，正在从“生成代码”，开始走向“生成好用的产品”。