AI 生成的 UI 为什么不能直接用？我找到了解决方案

最近用 AI 生成 UI，踩了个大坑。

Google Stitch 生成的界面确实很漂亮，但当我让它生成第二个、第三个页面时，问题来了：

每个页面的按钮大小不一样，间距不一样，颜色也不一样。

作为开发者，这意味着什么？

• 无法复用组件
• 每个页面都要重新写 CSS
• 维护成本爆炸
• 代码冗余到想骂人

AI 生成的 UI 很美，但不一致。这是 AI 设计工具的通病。

为什么 AI 生成的 UI 不一致？

AI 每次生成都是独立的创作过程。它不记得上一个页面用了什么颜色，不知道按钮应该多大，不清楚间距规范是什么。

就像让 10 个设计师各自设计一个页面，每个人都有自己的审美，最后拼在一起就是灾难。

AI 擅长创造，但不擅长遵守规范。

解决方案：Pencil + Stitch 组合拳

我找到了一个解决方案，分两步走：

第一步：用 Pencil 建立规范

Pencil 是一个 AI 原型工具，它的优势不是好看，而是规范。

你可以告诉它：

• 主色调是 #3B82F6
• 按钮高度统一 40px
• 卡片间距统一 16px
• 标题字号统一 24px

然后让它按照这套规范，依次生成一系列页面。

结果： 所有页面整齐划一，就像解放军一样。

缺点： 不够好看，缺乏视觉吸引力。

第二步：用 Stitch 美化

工作流程：

1. 用 Pencil 生成规范的原型（黑白稿也行）
2. 导出为图片
3. 导入 Google Stitch
4. 让 Stitch 基于这些原型进行美化

关键： Stitch 不是从零开始创作，而是基于你的原型进行优化。

这样它就不会乱来，因为骨架已经定好了，它只是在添加视觉细节：

• 更好的配色
• 更精致的阴影
• 更现代的图标
• 更舒服的渐变

结果： 既保持了规范性，又获得了美观性。

为什么这个方法有效？

1. 分离关注点

• Pencil 负责规范：确保一致性
• Stitch 负责美化：提升视觉效果

就像建房子，先打地基和框架（Pencil），再装修（Stitch）。

2. 约束 AI 的创造力

AI 的创造力是双刃剑：

• 无约束时，每次都不一样（灾难）
• 有约束时，在规范内创新（完美）

给 Stitch 一个原型，就是给它一个约束。它知道按钮在哪，知道布局是什么，只需要让它变得更好看。

3. 开发友好

最终交付给开发的是：

• 统一的设计规范
• 一致的组件库
• 可复用的代码

开发不需要为每个页面重新写样式，只需要复用组件。

实际案例

我用这个方法做了一个 SaaS 产品的 10 个页面：

传统方式（纯 Stitch）：

• 生成时间：2 小时
• 开发时间：3 天（每个页面都要调整）
• 维护成本：高（改一个地方要改 10 次）

Pencil + Stitch 方式：

• 生成时间：3 小时（多了 Pencil 这一步）
• 开发时间：1 天（组件复用）
• 维护成本：低（改一次全局生效）

多花 1 小时设计，省 2 天开发。

其他 AI UI 工具的问题

这个问题不只存在于 Stitch，几乎所有 AI UI 生成工具都有类似问题：

v0.dev

• 生成速度快，效果好
• 但每次生成都是独立的
• 多个页面之间缺乏一致性

Galileo AI

• 从文本直接生成 UI
• 但无法保证设计系统的一致性

Uizard

• 从手绘草图生成 UI
• 同样存在一致性问题

核心问题都一样：AI 不记得上下文，不遵守规范。

核心原则

做 AI 时代的 UI 设计，记住三个原则：

1. 规范先于美观

没有规范的美观是灾难。先定规范，再追求美观。

2. 约束 AI 的创造力

给 AI 一个框架，让它在框架内创新，而不是天马行空。

3. 为开发考虑

设计不是为了好看，是为了能落地。一致性比美观更重要。

工具推荐

Pencil： 规范化原型工具

• 优势：一致性强，可定义设计规范
• 劣势：视觉效果一般

Google Stitch： AI 美化工具

• 优势：视觉效果好
• 劣势：缺乏一致性（需要原型约束）

组合使用： 先 Pencil 后 Stitch，规范 + 美观。

总结

AI 生成 UI 的最大问题不是不够好看，而是不够一致。

解决方案很简单：

1. 用 Pencil 建立规范（骨架）
2. 用 Stitch 美化（血肉）
3. 交付给开发（可复用）

规范先于美观，但两者可以兼得。

AI 时代的 UI 设计，不是让 AI 完全自由发挥，而是给它一个框架，让它在框架内创新。

这才是 AI 工具的正确打开方式。

---

相关工具：

• Pencil：规范化原型工具
• Google Stitch：AI 美化工具
• v0.dev：文本生成 UI
• Galileo AI：AI UI 设计
• Uizard：草图转 UI

核心经验： 多花 1 小时设计规范，省 2 天开发时间。