你让 AI 做一个页面，它三分钟交活。打开浏览器：渐变背景、圆角卡片、三栏「我们的优势」——全都眼熟。
你说"高级一点"。它改了半天，你刷新一看：蓝色换成了紫色。
这个循环我重复过很多次，后来才想明白：问题不在提示词，而在我从没告诉过它什么是"高级"。没有约束的生成器只会输出训练数据的平均值——而设计的平均值，正好是最平庸的那一档。
这篇讲两件事：选哪个组件库，以及怎么把"好看"变成 AI 能执行的约束。
一、为什么 AI 做出来的页面都长一个样
先别急着怪模型没品味。它的输出本质是概率采样：在给定上下文里挑"最像正确答案"的样式——取决于训练数据长什么样。
三个因素叠加，结果被锁死：
- 训练数据本身高度同质。 能被大量抓取的页面多是模板化 SaaS 官网与后台界面，个人风格站点占比极小。
- 对齐过程进一步收窄。 偏好训练奖励"人类普遍觉得还不错"的输出，其数学含义就是中庸——风格越鲜明越不易被奖励。
- 默认值会自我强化。 AI 的产出又被喂回下一版训练集：同一种配色版式被复制越多，被采样概率越高。
所以模型不是不懂审美，它的审美等于平均审美。想要非平均的结果，唯一办法是给它非平均的约束。
这就是组件库在 AI 时代的新角色：它不是省时间的工具，而是一份能被机器读取的设计契约。
二、12 个组件库，按「控制权」分三组
清单好找，难的是选。我只用一个维度——代码控制权在谁手里。比"谁更火"更有用，直接决定你后期改得动不动。
一句话选型：追求极致可控走第一组，需要开箱即用走第二组，想要视觉冲击额外挂第三组。
组一：完全掌控型 —— 组件源码进你的仓库
| 库 | 链接 | 定位 |
|---|---|---|
| shadcn/ui | https://github.com/shadcn-ui/ui | Radix UI + Tailwind CSS。不是传统组件库，而是复制进你项目的组件源码，随便改，无黑盒 |
| Radix UI | https://github.com/radix-ui/primitives | 无样式原语之王，shadcn/ui 的底层。高度可访问、零样式 |
| Headless UI | https://github.com/tailwindlabs/headlessui | Tailwind 团队官方出品，完全无样式的可访问性组件 |
这三个是"我给零件、你装机"的路子。自由度最高，代价是视觉自己负责。
组二：开箱即用型 —— 装完就有好看的默认样式
| 库 | 链接 | 定位与适合场景 |
|---|---|---|
| Ant Design | https://github.com/ant-design/ant-design | 阿里出品，中后台默认答案，表单表格能力极强 |
| Material UI | https://github.com/mui/material-ui | Material Design 官方 React 实现，组件多、生态完善，MUI X 提供高级表格与图表 |
| Mantine | https://github.com/mantinedev/mantine | 功能最全面，自带 Hooks、表单、通知、图表，TS 支持一流 |
| HeroUI | https://github.com/heroui-inc/heroui | 原 NextUI，React Aria + Tailwind，动画流畅，界面天然好看 |
| Chakra UI | https://github.com/chakra-ui/chakra-ui | props 控样式，开发体验极佳，v3 后更现代 |
| daisyUI | https://github.com/saadeghi/daisyui | 纯 Tailwind 插件，class 直接出漂亮组件，一键切换主题 |
| React Bootstrap | https://github.com/react-bootstrap/react-bootstrap | 元老级，成熟稳定、文档齐全，Bootstrap 团队迁移成本极低 |
| Fluent UI | https://github.com/microsoft/fluentui | 微软官方，与 Microsoft 生态结合紧密 |
组三：视觉增强型 —— 专治"不好看"
| 库 | 链接 | 定位 |
|---|---|---|
| React Bits | https://github.com/DavidHDev/react-bits | 专收动画、交互和 3D 效果组件，是"wow 感"落地页最热的选择之一；不解决工程问题，只解决视觉冲击，适合叠加在前两组之上而非替代 |
三、选型前先回答三个问题
分组只是第一层筛选，落地还要回答三个问题：
- 代码最终归谁维护？ "我还要长期改"就往组一靠；只快速交付，组二更划算。
- 界面是数据密集还是展示驱动？ 表格、筛选、批量操作直接看 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，约束的不是某一次输出，而是之后所有的输出。
