AI 写的前端总像四个人拼的？问题不在模型，在你没给它一套系统

AI 写的前端总像四个人拼的？问题不在模型，在你没给它一套系统

后端我一个下午能搭完：鉴权、数据层、API 路由，我描述需求，agent 全包了。前端是它垮掉的地方。每个页面单独看都能跑、都没毛病，凑到一起，像四个互不认识的人各做了一屏。

很多人到这一步的反应是：模型审美不行。

做 design-system-first 工具 Moonchild 的团队把话说得很干脆：没有 design system 的团队，得到的就是随机 UI。

模型在像素级别做生成，是因为它没有别的东西可对照。这里挑个颜色，那里定个间距，中间没有任何东西把它们绑在一起。它不是没品味，是你没给它一把尺子。

给它一套系统，差别有多大

在 X 上分享这个实验的开发者 @Mnilax 干了件实在事：同一个项目，一个监控 AI 应用的分析看板，十个页面，做两遍。一遍让 Claude Code 自己猜，一遍让它读一套提前在 Moonchild 里做好的 design system。

结果：首次生成就 on-brand 的页面，从 2/10 涨到 9/10。重新调样式的时间，从大约 6 小时降到 40 分钟。它自己瞎编、而不是复用的一次性 hex 色值，从 19 个降到 0。

注意那 19 个色值。没有系统时，agent 每做一屏都在重新发明一遍轮子——重新选一个它觉得还行的蓝，下一屏再选一个差不多但不一样的蓝。你以为你在让它”做前端”，其实你在让它一次次重新猜你的审美。你花在”再帮我统一下样式”上的那 6 个小时，本质是在替它的发散买单。

我自己是怎么做的

这套逻辑我已经固化成流程了。不管是从零做一个新东西，还是想把已有项目做整体的前端样式 + 交互逻辑改造，我都先进 Claude Design（这一步的工具我目前最认可它）。

如果是已有项目，就让它先提取现有代码库，在这个基础上重新设计一套新的 design system。如果是全新的，就给它一个概念，或者直接丢一套我已有的 design system 给它，或者让它从头设计一套。

关键的一步在这：我会先把 design system 整个敲定。 字体、主色、强调色、各类 UI 组件的样式，全部定死。在 Claude Design 里把方案评估完、细节调到我满意，这一整套先收口。

等系统全部敲定，我才 handoff 给 coding agent 去做具体开发。给谁都行——Claude Code、Codex、别的 coding agent 随你。它们这时候是在一套已经定死的系统约束下写代码，而不是边写边猜审美。

这套流程换来的就两个字：可控。

这其实就是前端的 Spec

我一直在写一件事：约束 agent 的不是更聪明的 prompt，是提前固化的意图。后端我让它先有验收标准再动手，前端是同一个道理——design system 就是前端的 Spec。

字体、颜色、间距、组件，这些东西如果你不提前定死，就会变成每次对话里临时口述的风格要求。口述的东西 agent 每次理解都略有偏差，于是你得到四个互不认识的人各做一屏。把它写成一套它能反复对照的系统，风格就从”每轮重新解释”变成了”一次性定死的合同”。

发散最厉害的环节——风格和交互——被你提前收口了，剩下的实现才稳得住。

落点

别再指望靠 prompt 把审美讲清楚。design system 在这里是给 agent 的约束输入，不是一份摆着给人看的规范文档。

先在专门的设计工具里把系统整个敲定，再 handoff 给 coding agent 实现。顺序别反——先定系统，后写代码。把最容易跑偏的那一步提前固化成合同，你才拿得回控制权。