Sarah Chieng 与两位合作者写了一篇关于如何用 AI 生成真正漂亮 UI 的深度文章。核心论点：AI 生成的设计之所以平庸，不是因为模型不够强，而是因为用户的意图不够清晰。
AI 设计的六大"套路"
1. 万物皆 Dashboard —— 无论你要建的是面包店落地页还是个人作品集，AI 总会把它做成 SaaS 仪表盘。原因是训练数据严重偏向 SaaS 产品、dashboard、组件库和初创公司落地页。
2. 卡片套卡片 —— 最可靠的 AI 设计标志。AI 把内容包进卡片，发现需要组织卡片里的内容，于是再加卡片。结果是嵌套容器无限递归。
3. 过度编码和意外重构 —— 设计已经 99% 完成，只需要微调一个按钮，AI 却重构了整个组件树。要一个简单 API 调用，它重写无关的错误处理、加你没要求的类型。
4. 指令泄漏到 UI —— 最尴尬的失败模式：实现指令变成可见的产品文案。"在这里添加用户名的占位符"直接作为占位符文本出现在页面上。
5. 能跑但看起来不对 —— 技术上工作正常，编译通过，但间距不对、移动端行为怪异、组件错误。让它复刻一个网站，输出看起来像记忆里的糟糕截图，而非真实重建。
6. 没有组合感 —— AI 单独思考每个元素，不考虑它们之间的关系。结果是一堆正确的组件堆在一起，没有组合逻辑把它们粘合。
让 AI 生成好设计的八条策略
1. 先跑 shadcn preset —— 在项目中设置组件库，让 AI 先读实际源码再写代码。大多数组件库是黑盒，AI 从训练数据猜测 API 可能过时。shadcn/ui 不同：你拥有源码，组件活在项目里，AI 能在写之前读到它们。
2. 用设计系统约束 AI —— 最糟糕的做设计决策时机是在生成过程中。AI 会替你做决定，而它选的是训练数据里最常见的：Inter 字体、天蓝色按钮、圆角卡片。
在提示前决定：精确的 hex 码、字体栈、间距体系、整体布局逻辑。然后编码到 AI 能读的地方——Tailwind 配置、design tokens 文件、CSS 自定义属性。用意图命名而非原始命名：--color-primary 比 --color-blue 好，因为模型知道上下文。--color-error 阻止它把成功绿用在错误状态上。
3. 用 Tailwind config 作为强制执行机制 —— 只定义你想要的颜色，任意 hex 值会被 lint 捕获。AI 必须用你的系统，不能发明平行宇宙。加一条 lint 规则禁止任意 Tailwind 值（text-[17px]、bg-[#123456]），让它在结构上难以脱轨。
4. 具体反馈，模糊请求 —— "我想要暗模式...少点卡片"太模糊，AI 删掉两个卡片就算完成。更好的工作流：一次小改动，打开浏览器看效果，说具体哪里不对。
"按钮需要多 4px padding。""这个标题太浅。""这两节之间的间距感觉挤。"这些是可执行的指令。"让它看起来更好"不是。
5. 截图循环 —— 截图 → 给模型 → 描述视觉问题 → 获得修复。render-screenshot-describe-refine 循环比任何 upfront spec 写作都更快到达目标。
6. 用 GPT-Image-2 做 mockup 当 Codex 的 hint —— 创建多个 mockup 提供给 Codex 作为参考，极大减少废 token 和不满意的 slop apps。
7. 让 AI 采访你 —— 不要自己写完整风格指南。给模型几个锚点：喜欢的颜色、感觉接近的截图、有正确质感的网站。然后让它先采访你。模型往往比你自己更擅长发现缺了什么——它会问目标受众是谁、页面目标是什么、品牌调性如何。
8. 多方向探索再收敛 —— 生成五个粗略变体只需要几分钟（用 Codex Spark 这样的快速模型），然后挑最喜欢的继续迭代。Thomas Wiegold 的观点：强迫模型在产出 CSS 之前先声明目的、调性、约束和差异化。
核心洞察
Marshall McLuhan 的名言："我们塑造工具， thereafter 工具塑造我们。" AI 能创造表面上"漂亮"的设计，但往往浅薄。当你给模型一个通用提示，你得到一个通用输出。当你的意图缺乏方向，结果也会缺乏方向。
AI 的全部潜力在作为中介工具时爆发——放大、重新诠释、拓宽创意视角，而非替代设计师或整个设计工作流。设计终究是另一种视觉形式的问题解决。