你让 AI 做一个页面，它三分钟交活。打开浏览器：渐变背景、圆角卡片、三栏「我们的优势」——全都眼熟。
你说"高级一点"。它改了半天，你刷新一看：蓝色换成了紫色。
这个循环我重复过很多次，后来才想明白：问题不在提示词，而在我从没告诉过它什么是"高级"。没有约束的生成器只会输出训练数据的平均值——而设计的平均值，正好是最平庸的那一档。
这篇讲两件事：选哪个组件库，以及怎么把"好看"变成 AI 能执行的约束。
一、为什么 AI 做出来的页面都长一个样
先别急着怪模型没品味。它的输出本质是概率采样：在给定上下文里挑"最像正确答案"的样式——取决于训练数据长什么样。
三个因素叠加，结果被锁死：
训练数据本身高度同质。 能被大量抓取的页面多是模板化 SaaS 官网与后台界面，个人风格站点占比极小。
对齐过程进一步收窄。 偏好训练奖励"人类普遍觉得还不错"的输出，其数学含义就是中庸——风格越鲜明越不易被奖励。
默认值会自我强化。 AI 的产出又被喂回下一版训练集：同一种配色版式被复制越多，被采样概率越高。
所以模型不是不懂审美，它的审美等于平均审美。想要非平均的结果，唯一办法是给它非平均的约束。
这就是组件库在 AI 时代的新角色：它不是省时间的工具，而是一份能被机器读取的设计契约。
二、12 个组件库，按「控制权」分三组
清单好找，难的是选。我只用一个维度——代码控制权在谁手里。比"谁更火"更有用，直接决定你后期改得动不动。
一句话选型：追求极致可控走第一组，需要开箱即用走第二组，想要视觉冲击额外挂第三组。
组一：完全掌控型 —— 组件源码进你的仓库
这三个是"我给零件、你装机"的路子。自由度最高，代价是视觉自己负责。
组二：开箱即用型 —— 装完就有好看的默认样式
组三：视觉增强型 —— 专治"不好看"
三、选型前先回答三个问题
分组只是第一层筛选，落地还要回答三个问题：
代码最终归谁维护？ "我还要长期改"就往组一靠；只快速交付，组二更划算。
界面是数据密集还是展示驱动？ 表格、筛选、批量操作直接看 Ant Design 和 MUI，打磨程度别的库比不了；落地页、官网这类展示场景才轮到 HeroUI 和 React Bits。
用户在国内还是海外？ 这点最常被忽略。Ant Design 中文社区国内最好；面向海外或国际化时，MUI、Fluent UI 更稳。
顺带纠正一个误解：daisyUI 和 shadcn/ui 不是竞品。 一个是"安装即用"的有样式方案，一个是"复制即拥有"的无主方案。常见组合：daisyUI 搭骨架，关键页换 shadcn/ui 精修。
四、组件库没告诉你的三件事
第一，它保证下限，不保证上限。 可访问性、响应式、焦点管理这些苦活它替你干了——手搓三天，抄它三分钟。但从"不难看"到"好看"那段路，只能靠设计规范走。
第二，它自己也会被 AI 污染。 shadcn/ui 那套默认主题——zinc 中性灰、rounded-lg、一层几乎看不见的边框——本是极好的中性起点，却因太好用被满地的 AI 页面戴成了新的模板脸。让 AI 直接吃默认配置，你得到的不是"干净"，是"千篇一律的高级灰"。
第三，它的身份变了。 组件库天然携带一整套决策：间距阶梯、字号排比、状态表达、层级底色。在 AI 流程里，这等于把隐性共识显性化——AI 读到它就知道边界在哪。工具会过时，契约会留下。
五、把"高级一点"翻译成约束
做法是把设计决策固化成一个文件，让 AI 每次开工前必读。
# 设计契约（AI 开工前必读）
## 视觉基调
冷峻、工程感、克制。参考 Linear / Vercel Dashboard / Stripe Docs。
明确禁止：蓝紫渐变、霓虹色、玻璃拟态、发光阴影、emoji 图标、
大圆角卡片堆叠、三栏并列的"我们的优势"式排版。
## 色彩
- 主色仅用于强调，单屏占比不超过 5%
- 中性色阶：墨黑 → 石板灰 → 白，共 7 级，全站只用这一套
- 语义色（成功/警告/危险）各一个固定值，禁止自定义新色
## 排版
- 字号阶梯：12 / 13 / 14 / 16 / 20 / 28 / 40，只允许取这 7 个值
- 行高：正文 1.6，标题 1.2
- 字重只用 400 / 500 / 600
## 形状与层次
- 圆角：3px（控件）/ 6px（面板），全站两档
- 层次靠 1px 边框和背景色差表达，不靠阴影
## 交互
- 所有 hover 150ms ease-out
- 所有可点元素必须有 focus-visible 样式
核心逻辑只有一句：把"高级一点"这种形容词，换成 AI 能逐条验证的约束。 形容词无法检查，token 可以。
这份文件真正的价值在于它可被验证。AI 交稿后逐条对照：字号是不是只用了那 7 个值？有没有蓝紫渐变？能对照就能纠偏；只凭感觉，就永远在"蓝色改紫色"里打转。
六、行动建议
先写契约，再让 AI 写代码。 没有契约就开工，等于让它自由发挥到平均值。
按"控制权"选库，不按热度选库。 要完全掌控就 shadcn/ui + Radix UI，要快速交付就 Ant Design 或 Mantine，要视觉冲击额外挂 React Bits。
接入第一天就改默认主题。 把中性色阶、圆角、字重三处覆写成自己的 token。不改，你只是在复刻别人的默认值。
让 AI 复述约束再动手。 复述不出你的禁用清单，说明契约没进上下文。
别指望模型有品味。 它只有统计，判断这一步得你自己来。
回到开头那个循环。"高级"不是一种感觉，而是一组可以被写下来的规则。 规则越具体，AI 就越难给你平均值。库会换、热门会变，但你写进契约里的禁用项和那组 token，约束的不是某一次输出，而是之后所有的输出。