同一张面孔反复出现的原因
生成模型给出的是它见过的东西的中间值。公开网络上积累最多的界面,是过去几年的 SaaS 落地页和仪表盘模板,而它们彼此相似,于是训练出来的模型在缺少指示时的默认取值也落在那个中间。不同公司、不同模型、不同项目,结果却是同一张面孔。
这不是模型做不好。这是“没有指示时该选什么”只有一个默认值所导致的现象。只要默认值不变,提示词再怎么打磨也会绕回同一处。
所以需要的不是更好的形容词,而是一份清单。把反复出现的东西起上名字,“看着廉价”就变成了“把这十一处改掉”。开源工具 Impeccable 把这份清单做成了规则。它是从 Anthropic 公开过的 frontend-design 技能起步的项目。
反复出现的特征与替代做法
下面是检查器实际会点名抓出的项目。有规则名这一点很关键。有了名字,评审时就能说“这是卡片套卡片”,而不是“总觉得哪儿不对”,而且改的方向也随之确定。
表格右列是替代做法。多数是做减法而不是加法:去掉色带,把渐变还原成纯色,剥掉卡片外壳改用留白区分。听上去画面会变寡淡,实际上信息反而先被看见了。
字体那一项常被误解。这不是说 Inter 是坏字体,而是说它用得太多,已经无法把你的界面区分开来。检查器一并点名的还有 Roboto、Geist、Plus Jakarta Sans、Space Grotesk、Fraunces。如果品牌已经定了某一款,把它记为例外即可。
| 反复出现的特征 | 为什么是问题 | 该怎么做 |
|---|---|---|
| 卡片一侧的粗色带 | AI 生成界面最好认的标记 | 去掉,或换成淡得多的强调 |
| 标题上叠的渐变 | 只是装饰,不传达意义 | 改纯色。强调交给字号与字重 |
| 从紫到蓝的背景 | AI 产物的标志性配色 | 使用品牌既定的一套颜色 |
| 彩色背景上的灰字 | 对比度崩掉,看着发虚 | 改白色或该背景的深色调 |
| 四散开的彩色光晕阴影 | 为了默认显得高级的手法 | 用中性阴影只表达层高 |
| 卡片里又套卡片 | 边框叠加变成视觉噪音 | 用留白与细分隔线区分 |
| 标题上方的小号大写标签 | 重复标题已经在做的事 | 删掉,把词并进标题 |
| Inter 等过度使用的字体 | 太常见,无法区分你的界面 | 定一款品牌字体,或选用得少的 |
| streamline、supercharge 之类套话 | 产品到底做什么消失了 | 用具体的动词和名词 |
用命令而不是眼睛来确认
检查就是一行 npx impeccable detect。给它一个文件、一个目录或一个网址,它会把命中的项目连规则名一起报出来。它不调用 LLM,所以不需要 API 密钥,同样的输入给出同样的结果。
为了验证,写了一张刻意塞满上表特征的 HTML 去跑,报出 17 条。随后只修被指出的项目:去掉色带、把标题渐变改回纯色、背景改纯色、把正文文字对比度提上去、把嵌套卡片换成细分隔线、换字体。布局结构与信息顺序原封不动。
再跑一次是 0 条。下面这张图就是前后对照。如果右边看起来更好,那么变化的不是感觉,而是十一类规则违反。
还要补一句:检查方式随对象而异。HTML 会连同引用的 CSS 一起做静态分析,JSX 之类的文件走模式匹配,给网址则用真实浏览器读渲染后的画面。所以源码扫描干净,线上网址仍可能查出别的项目。
规则不必全部遵守
这份清单是检查表,不是判决书。如果品牌已经定了用 Inter,那就是决定而不是违规。这时可以在文件里写 impeccable-disable 注释就地豁免,或者把例外记进仓库配置。两种做法都要写下理由,于是下一个人不必再问“为什么就这里不一样”。
有些项目本来就不计为失败。被归类为参考性的发现会列出来,但不改变退出码,因此不会挡住自动化。接入流水线之前,先确认这个区分。
归根结底,这份清单的用处不在于统一审美,而在于让每次措辞都不同的意见有了同一个名字。名字对齐之后,评审会变短,同样的意见不会被说第二遍。
