大部分AI生成的UI看着惊艳，实际用起来却漏洞百出。本文揭露Google Stitch的正确用法：把它当草图师而非工程师，通过四步工作流在10分钟内得到真正可用的界面结构。

你花了10分钟，用Google Stitch生成了三个屏幕。

界面干净——柔和的米白色、圆角卡片、导航栏完美居中。截图发给朋友，他们说：“这看着像个真App。”

然后你试着实际用它。

主页和设置页不搭——字体大小不同、卡片内边距不一致、视觉逻辑像两个没沟通过的设计师。仪表盘里全是完美的连续打卡和100%完成率，真实用户永远达不到。按钮点不了。窗口一缩放布局就崩。

接下来两个小时，你在修补AI给出的东西：移动组件、添加状态、创造工具从未考虑过的逻辑。

这不是产品，只是模型。

这个“漂亮但无用”的UI问题，几乎每个用AI设计工具的人都遇到过。Framer AI、Figma AI、Uizard——结果一样：精美的静态图，什么也发不出去。

真正的问题不是Stitch

所有Stitch教程都没告诉你：你不是不会设计，而是对第一次生成的结果抱错了期望。

Google Stitch是基于Gemini多模态模型的AI设计画板。它能把一句普通英文描述，在90秒内变成有结构、有图层的中保真UI。这部分是真的。但它产出的是原材料，不是成品。

把Stitch理解成草图师，而不是工程师。你给一句话，它给你一张细节丰富的草图，捕捉氛围、结构、你想象中的大致形状。确实快，确实有用。

但草图师不知道哪面墙承重，不会给按钮接线，也不会考虑用户第一次打开App时看到空数据的状态。

那是你的工作。

“AI设计鸿沟”——从“在Stitch里看着不错”到“能交付给真实用户”——不会自动弥合。当你停止让AI替你设计，开始用它生成原材料、再由你塑造时，鸿沟才会消失。

10分钟Stitch工作流（实际时间分配）

大多数“10分钟教程”不真实。下面精确到分钟。

第一步：背景注入（0:00-2:00）

不要输入“做个习惯追踪器”。那样你会得到一个没人要的侧边栏、看起来千篇一律的仪表盘字体。

每一个你模糊的细节，都是Stitch替你做的决定——而这些默认选项很少匹配你的实际产品。

复制下面的提示，替换成你的项目细节：

“设计一个现代手机习惯追踪器UI。风格：简约、平静。配色：柔和中性背景，珊瑚色强调（#ff6b6b）。支持亮色和深色模式。结构：底部导航——主页、进度、设置。主页：每日连续打卡进度环，习惯卡片圆角16px，轻微阴影。无需侧边栏。仅手机端。”

2分钟时，Stitch生成你的第一个屏幕（Standard模式，Gemini 2.5 Flash）。你会看到一个中保真主页——进度环、卡片布局、底部导航。不精致，但骨架结实。

第二步：锁定设计令牌（2:00-4:00）

这一步决定了三个屏幕是否连贯还是混乱。不锁定直接生成下一个屏幕，每个都会“即兴发挥”——不同字重、不同按钮高度、不同卡片内边距。到第4屏，看起来像四个不同的人做了四个不同的App。

后续提示：

“在生成更多屏幕前锁定这些设计令牌：所有卡片圆角16px。主标题字体：Outfit。正文字体：Inter，14px，1.5行高。不使用1px边框——仅用色调反差。收紧页头。保持手机优先。”

Stitch调整第一个屏幕。花这两分钟，能省下后来45分钟的修补时间。

第三步：构建关联流程（4:00-7:00）

扩展——但要一个关联的流程，而不是孤立屏幕。

流程提示：

“使用同样的设计令牌，生成：(1) 习惯详情页——7天历史网格，三种状态：活动、完成（低调）、错过（柔和红）。(2) 设置页——个人信息部分、通知开关、深色模式开关。通过底部导航将两者与主页连接成一个完整路径。”

到7分钟时，Stitch返回两个新屏幕。字体一致、卡片圆角统一、底部导航出现在三个屏幕上。不是像素级完美——某个间距不对、某个字体大小有点偏差。

正常。你现在有了一个视觉逻辑一致的3屏手机流程。7分钟前你还没有。

第四步：提取可用部分（7:00-10:00）

所有Stitch教程都没讲的事：你不会全盘接受Stitch给的东西。提前决定。

保留：色彩方案、卡片结构、间距节奏、组件布局。

丢弃：自动生成的文案、对称的虚假数据、完美完成率。

通过Figma按钮导出进行布局精修，或者直接拿HTML/Tailwind代码给开发。做之前——用对比度检查器跑一遍。AI生成界面不符合WCAG可访问性标准的比例，高得让行业蒙羞。花5分钟检查，能避免失去信任。

第10分钟时你实际得到什么

三个关联的手机屏幕。主页：顶部珊瑚色进度环，下方三张习惯卡片依次堆叠——每张显示习惯名、周完成条、勾选标记。底部导航三个带标签的图标。没有侧边栏。没有桌面端布局渗入。

习惯详情页：7天网格——已完成日子珊瑚色，错过日期低调灰，今天习惯活跃状态。设置页：顶部一行个人信息，下面两个开关，足够的垂直空间让390px屏幕不显挤。

三个屏幕字体一致、卡片半径统一、配色方案相同。

不是生产就绪。低调灰的对比度需要检查。新用户的空状态还不存在。你会在Figma里再花20分钟加上去。

但这是一个真实的起点——不是一张海报。你可以交给开发、丢进Figma、或自己继续构建的结构。

这才是正确使用Google Stitch时，10分钟实际产出的东西。

真实前后对比：第一次提示与第二次提示的差别

一个自由职业者在构建任务管理App。第一次尝试：“设计一个干净的任务管理仪表盘。”

第一次输出：视觉精致。卡片网格、柔和渐变、清晰排版。同时也完全虚构——每个任务都完成了，每个指标都是绿色，手机框里出现桌面侧边栏，零过期状态，新用户没有空状态。

看起来像产品，功能上像海报。

第二次提示：

“重新设计，仅手机端。底部导航，不要侧边栏。三种任务卡片状态：活跃（默认）、过期（红色左边框）、完成（低调，删除线）。添加空状态：居中图标、‘添加你的第一个任务’文字、一个CTA按钮。不要完美数据的占位符。”

第二次输出：一个考虑到人们实际使用任务管理App方式的屏幕。过期项可见。新用户状态已设计。底部导航可以在真实手机上工作。

不是重新设计，仅仅是把约束条件对标现实，而不是AI凭空想象的最优情况。

第一次提示和第二次提示之间的差距——就是Google Stitch AI UI设计工作流实际所在。

会踩的坑

模糊提示产生通用输出。输入“现代仪表盘”就会得到带侧边栏的Material Design变体。每个模糊提示都默认回到同样熟悉的模式。具体性不是锦上添花，而是机制。

一个提示不是工作流。只用一次生成的Stitch只是一张截图。所谓AI优先原型设计节省40-85%时间，来自于结构化迭代——生成、锁定、构建、提取。跳过任何一步，你就回到漂亮又无用的图片。

可访问性除非手动检查，否则一定失败。95.9%的首页已经不符合WCAG标准。Google Stitch不会修复这个。对比度、触摸目标大小、焦点指示器——都不保证。任何界面离开屏幕前，跑一遍检查。

AI为一个不会出错的世界设计。满数据、合作用户、零错误。空状态、错误信息和边界情况在Stitch的想象中不存在——除非你放进提示里。真实产品活在这些时刻里。自己设计它们。

导出摩擦存在。HTML和Tailwind CSS导出干净。React Native、SwiftUI、Flutter配合非Firebase后端时，预期需要手动转换。无缝路径仅限Google自家工具。其他环境都需要剥离依赖。

这不适合谁：期望粘贴一个提示就把输出直接交给开发不修改的人。不适合构建金融科技基础设施、安全敏感产品或需要真实后端逻辑的人。Stitch可以启动这些项目，但不能完成它们。

打开Stitch，设定10分钟，构建一个屏幕

不是整个App。一个屏幕。

访问 stitch.with.google.com，粘贴第一步的提示（替换成你的项目细节），锁定令牌，生成两个关联屏幕，跑对比度检查，导出结构。

这就是没有教程会写的Google Stitch教程——因为它需要承认第一次生成的结果不是产品。

大多数人会继续打开AI工具，生成漂亮的东西，然后纳闷为什么什么都发不出去。

那些搞清楚的人，会停止让草图师当工程师。

“漂亮但无用”的UI是一个选择。替代方案也是。