拆解Google Stitch:AI设计工具的真实能力与局限

本文授权转自：三分设（ID：SFun-Share）

Google Stitch 是 UI 设计领域的真正革命吗？还是一条死胡同呢？

那么，Stitch 究竟会彻底改变我们产品设计的方式吗？还是又一个被过度炒作的 AI 工具呢？

真相，往往介于两者之间。

接下来，我展示 Google Stitch 如何适配一套典型的 UI 设计工作流程，并分享我对款工具未来，以及 UI 设计师角色的思考。

AI 时代的 UI 设计流程

如果你在二十多年前就开始从事产品设计，最早的主力工具一定是 Adobe Photoshop。2010 年代是 Sketch 的时代，到了 2010 年代末，Figma 已然成为行业内公认的该工具标准。

那么，这些工具有什么共同点呢？

它们始终把设计师放在设计过程的核心位置，让设计师完全掌控界面的创作。

使用这些传统设计工具时，你通常是从一张空白的无限画布开始，凭借想象力驱动整个创作过程。

然而， Stitch 走的是一条截然不同的路径。

当你进入这款工具的主页时，首先看到的就是一个提示输入框，引导你描述你想要搭建的产品。

Google Stitch 中的提示输入框

是不是看着很熟悉？没错，这几乎是当下所有 AI 设计工具的通用工作方式：先让你阐述意图，然后…再由工具自动为你生成内容或界面。

如果你习惯了从画布开始设计？那么，有没有办法让工具从空白画布开始呢？其实是可以的。你只需要输入这样一句提示词：

start with a blank canvas（从空白画布开始）

即使在这种情况下，AI 还是会自顾自生成一些莫名其妙的内容（这个看起来有点荒谬）。

短暂等待（大约 30 秒），我们才终于得到一块真正的空白画布。

接下来，我们输入提示词，描述想要的界面：

personal expense dashboard（个人支出仪表盘） 

经过短暂等待（同样是 30 秒左右），最终得到的是一套为后续设计作为基础的设计系统，其中包含视觉样式（比如：颜色和字体），还提供了搭建界面所需的核心组件（比如：搜索框、菜单、常用图标等）。哦呦，看起来还不错！

不过有一点需要说明：Stitch 生成的这套设计系统依然有明显的局限。其中：我们对单个组件的样式几乎没有多少自定义的控制权。

稍等片刻（又过了 30 秒），我们得到了以下 UI 设计：

由于我使用的是 Gemini 3.0 Flash，这是 Google 速度最快，但能力相对精简的 AI 模型，因此生成的 UI 设计整体偏通用化。不过这还不是最核心的问题。

真正的问题在于：整合设计迭代的过程，也被 AI 牢牢主导了。

我们尝试修改一下设计。我们可以选择某一个页面，工具只给出三个选项：编辑、注释和设计系统。

编辑 

当你选择【编辑】选项，你就可以针对单个 UI 元素进行修改。这对文本内容修改特别有效，因为你可以直接输入并实时更新。

对于功能型控件，你可以使用【用 AI 编辑】选项，你还是需要描述你想要修改的内容和效果，由 AI 代你完成设计。

注释

【注释】可以理解为更高级的编辑选项。你在设计中框选一个区域，添加注释说明想要的改动， 接下来，仍然由 AI 代为完成执行。

用注释标注条形图区域：让 Google Stitch 将条形图改为具有相同功能的折线图。 

随后，Stitch 就会生成一个包含该修改的新版本设计。

设计系统 

接下来，我们来修改一下设计系统，并将改动应用到整个 UI 原型。先修改主色调，生成一套新的配色方案，将更改主色并获得新的配色方案。

更改 UI 设计的主色

接下来，我将选择带有我设计的模型，然后点击【修改】 → 【更新至最新设计系统】。

选择 UI 设计，点击”更新至最新设计系统”，以应用设计系统更改

经过短暂的等待（你猜对了：还是 30 秒左右），我们就得到以下设计。

快速补充一点：除了可直接调整样式属性的主题标签页之外，工具还有存在一个 DESIGN.md 标签页，其中包含了整套设计系统的 Markdown 格式指令。

理论上，我们可以通过自己的设计指南来自定义这个文件，但实际使用中我发现， Stitch 往往会忽略其中的部分自定义规则，仍然默认遵循更通用的默认逻辑。

究其原因，最有可能是，Google 在底层设置了更高优先级的全局指令，这些全局规则会优先于 DESIGN.md 中定义的本地规则，从而覆盖了你的自定义升值。

使用设计系统指令编辑 DESIGN.md 文件 

设计修改的下一步 

你可能想知道如何进一步深化设计。其实很简单：点击导出，即可生成能在 Figma 中继续细化的设计资源。

从 Stitch 导出设计并导入 Figma

Stitch 生成的 UI 设计有一个很实用的优点：导出设计时会保留自动布局属性。因此，直接复制到 Figma 里，画框都会自动带上自动布局，无需重新调整。

但这套自动布局并不够完美，只要调整父级画框的大小，就能明显看出问题。

从 Google Stitch 导出的 UI 设计中自动布局失效

那么，为什么 Google Stitch 会引发如此大的热度？ 

看到这里你应该已经明白： Google Stitch 确实是一款不错的工具，但它远算不上并 UI 设计领域的“革命”，也并非不可替代。它之所以能收获大量关注，核心原因其实很简单：

Figma Make 的 AI 设计生成功能没能有达到市场期待。尽管宣称搭载了先进的 AI 模型，但其实际生成效果，明显弱于基于 Gemini 3.0 Flash 驱动的 Google Stitch。

很明显，Google 正是看准了这一点，将其作为挑战 Figma 的行业地位，争夺设计工具市场份额的重要抓手，这也是 Stitch 能快速出圈的关键。

那么，Google Stitch 真的能长久立足吗？作为设计师，我们有必要现在就去掌握这款 AI 工具吗？ 

就现阶段而言，最稳妥的选择是：将 Stitch 作为辅助工具，用于快速搭建基础界面、验证想法，而核心的设计创作、细节优化，依然依靠我们自身的专业能力和 Figma 等成熟工具来完成。

毕竟，真正能决定设计价值的，从来不是 AI 工具本身，而是使用工具的人 ，是我们对细节的把控、对需求的理解，以及不敷衍、不妥协的创作态度。

-END-

文章转载：三分设，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/EmCkp18hGzRdtzU7T0ODbQ

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 罗家玉

终审 | 苏 菁

▼

点这里，学习更多设计知识！

👇