用 AI 生成精美 UI：三个桶和八个实操方法

AI 生成 UI 已经不再是"能不能"的问题，而是"怎么能不烂"的问题。Sarah Chieng 和团队经过大量测试，总结出了 AI 设计的六大通病，以及三个桶、八个具体方法来对抗它们。

AI 设计的六大"露馅"信号

万物皆 Dashboard：不管你要做面包店落地页还是个人作品集，AI 都会把它做成 SaaS 仪表盘。原因是训练数据里 Dashboard、组件库、创业公司落地页占了太大比例。
卡片套卡片：AI 用卡片包内容，发现卡片里还要组织内容，就再套一层卡片。嵌套容器无限递归。
过度编码和无故重构：设计已经 99% 完成，你让 AI 改个按钮，它把整个组件树重构了。让加个 API 调用，它顺手改了你没要求的错误处理。
指令泄漏到 UI："在这里加个用户名的占位符"直接变成页面上可见的文字。
能跑但看着不对：编译通过、运行正常，但间距不对、移动端行为异常、组件用错。让它复刻一个网站，结果像凭记忆画的糟糕素描。
没有构图感：AI 逐个思考元素，不考虑元素之间的关系。结果是一堆正确的组件，没有组合逻辑把它们串起来。

尽管有这些问题，几个关键进展让 AI 生成 UI 从"噱头"变成了"可用的起点"：

1. 先跑 shadcn preset

把组件库以源代码形式装进项目。大多数组件库是黑盒，AI 只能凭训练数据猜 API，可能过时。shadcn/ui 不同：你拥有源代码，组件活在项目里，AI 写之前能先读它们。

2. 接上 shadcn MCP server

模型在对话中实时查询组件注册表。你说"给数据表加排序"，它拉当前文档，而不是 hallucinate 六个月前的 props。

3. 先定设计系统，再写 prompt

最坏的设计决策时机是生成中途——AI 会替你决定，而它选的是训练数据里最常见的：Inter 字体、天蓝按钮、圆角卡片。

Prompt 之前先决定：精确色值、字体栈、间距体系、整体布局逻辑。然后编码到 AI 能读的地方：Tailwind config、design tokens 文件、CSS custom properties。

命名要用意图导向，不是原始值：--color-primary 比 --color-blue 好，模型知道它属于什么上下文。--color-error 能阻止它把成功绿用在错误状态上。

4. 用 GPT-Image-2 生成 mood board

先让 GPT-Image-2 生成多个 mockup 方向，挑最接近的给 Codex 当参考。OpenAI 官方也推荐这个 workflow：先生成情绪板，再 commit。

5. Tailwind config 是 enforcement 机制

只定义你想要的颜色，任意 hex 值会被 lint 拦住。AI 必须用你的系统，不能发明一个并行的。再加一条 lint 规则禁止任意 Tailwind 值（text-[17px]、bg-[#123456]），从结构上让它难以脱轨。

6. 小步迭代 + 视觉反馈

"做成深色模式、少点卡片"太模糊。AI 去掉两个卡片就算交差。

正确的 workflow：一次改一个小地方，打开浏览器看效果，指出具体哪里不对。"按钮 padding 加 4px"、"这个 heading 太浅"、"这两 section 间距太紧"。

视觉模型让这个循环更快：截图 → 给模型 → 描述视觉问题 → 拿修复。render-screenshot-describe-refine 比任何 upfront spec 都有效。

7. 让模型先 interview 你

给模型几个锚点：喜欢的颜色、感觉接近的截图、有正确质感的网站。但不要立刻让它生成设计系统，先让它 interview 你。模型往往比你更善于发现遗漏：目标受众是谁？页面目标是什么？

Thomas Wiegold 的前端设计插件文章也提出类似观点：强迫模型在写 CSS 之前声明 purpose、tone、constraints、differentiation。僵硬的像素级规格会让输出技术上听话但视觉上死板。

8. 用 hostile data 测试

大多数 AI 生成的 UI 看起来不错是因为数据是假的：名字短、价格对齐、描述长度一致。空状态和错误状态只是装饰。

在要 polish 之前，给模型 hostile data：超长名字、不匹配的价格、边界情况。模型擅长让静态截图看起来合理，但极不擅长设计真实产品里那些"奇怪中间状态"。

AI 单独运行时，会默认输出统计上最常见的"好看 UI"版本：深色背景、圆角卡片、渐变标题、三列特性网格、Inter 字体、页脚。

最好的 workflow 把模型当成一个快、过度自信、需要你 art-direct 的初级设计师：选择意图、发现错误、推向有意的惊喜和怪异。模型更快、更视觉化、更善于在现有系统内工作——这让天花板比几年前高得多。但人类仍然选择最重要的东西：感觉和方向。