技术 · 熟练
AI 写的前端，为什么总像 2005 年的网页？
它缺的不是审美，是一条能判对错的线
你让 AI 生成界面，它能写出一堆功能都对、但看着就是「不对劲」的代码 —— 间距忽大忽小、颜色各说各话、对比度低到读不清。问题不在模型不懂审美，而在你没给它一条能被程序判定的线：审美是建议，约束才是判据。做法是给 agent 挂一套设计约束语言 —— 把间距刻度、配色、字号层级写成一份机器可读的令牌，再给它一个校验函数；生成之后先跑校验，不合格就把「哪一条不达标」当成结构化错误退回去重写。实测对比里，带约束生成的组件在评分表上落在一个区间，不带的落在另一个区间，差距不在个别细节，在整体一致性。怎么做：定令牌 → 挂校验 → 让不合格的回环重生成。
方法 · 一图看懂
1
把「审美」拆成可判定的条目 — 间距是几的倍数、对比度不低于多少、字号层级有哪几档 —— 每条都要能机器判定
2
写成一份令牌（designTokens） — 一份 JSON，agent 生成前读它，生成后拿它当尺子
3
挂一个校验函数 — 输出先过校验，不是靠人肉审美把关
4
不合格就带结构化错误重生成 — 退还的不是「再好看点」，而是「padding 不是 4 的倍数 · 第 12 行」
5
把回环次数设上限 — 两次不过就停下来问人，别让它无限改
原理 · 为什么有效
为什么「让它好看点」永远没用 —— 因为这不是一个能被执行的指令。模型收到「好看点」时，只能朝它训练数据里的平均值靠，而平均值的另一面就是「一眼 AI 味」。真正能改变产出的，是把审美翻译成三条可判定的约束：① 有刻度的（间距必须是 4 的倍数、字号只能是那六档）；② 有阈值的（前景与背景的对比度不低于 4.5:1）；③ 有结构的（同一屏里不许出现两套按钮圆角）。一旦写成这三类，校验就不再是审美判断，而是算数 —— 而算数，程序做得比人快也做得比人稳。这也是「设计约束语言」与「提示词里多加几句风格词」的根本差别：前者把判定权交给程序，后者把判定权留给运气。约束的另一个好处是它可累积：今天补一条「禁用纯黑」，明天这条就还在，不会像提示词一样一换会话就没。
适用场景
适合：让 AI 生成前端 / 组件 / 界面代码、又不满意成品质感的人；一个人维护多个页面、希望风格别跑偏的人；用 AI 做原型、要给人看的人。不适合：只生成文字与图片、不产出可运行界面代码的场景（那类归视觉提示词，是另一条线）；也不适合「只要跑得起来就行」的内部工具 —— 给它挂约束是负收益，维护令牌的成本比收益高。
自测 · 4 问
我要的「好看」，是不是已经拆成了能算的条目（倍数 / 阈值 / 层级）？还是仍停在形容词
校验是程序在跑，还是仍然靠我一张张看？靠人看的，就还不是约束
不合格退回去时，我说的是「哪一条不达标」，还是「再好看点」？
这套令牌存在哪？换一个会话还能拿到吗
怎么上手 · 验证步骤
上手顺序：先写令牌，再挂校验，最后才谈回环。第一步，从你现在最不满意的一屏界面里，挑出三条最能解释「为什么它看着不对」的问题 —— 通常是间距、对比度、层级之一。第二步，把这三条写成令牌：间距定刻度、对比度给阈值、字号列档位。第三步，让 agent 生成前先读这份令牌。第四步，写一个最小校验：只查这三条。第五步，不合格时把「第几条、第几行、期望什么、实际什么」退回去，让它改一轮。先只上三条，跑顺了再加。
跑三次之后做一次复盘：① 被拦下来的问题里，有多少是同一类反复出现？反复出现的那类，说明令牌该收得更紧或该补一条；② 有没有出现「改了一条、坏了两条」？有的话说明令牌之间在打架，要定优先级；③ 我有没有开始不再逐张看图？如果没有，说明校验还没真正接手判定权。