AI 写前端总「一眼 AI」？从自由发挥改成按规范实现
用 GPT、Codex 写小工具，功能逻辑往往一次跑通，界面却总透着一股「AI 味」：大圆角、渐变、满屏卡片和 Badge。问题不在模型写不出代码，而在它只会做加法。本文拆解这种同质化的成因，给出先定参照、把设计约束写成文件、分阶段生成、局部精调等可操作方案，并附一份上线前的检查清单。
用 AI 写小工具的功能部分，现在大多能一次到位：需求描述清楚，数据结构、核心逻辑、边界情况和报错处理很快就能跑起来。真正反复消耗时间的，反而在后面——界面。
功能都对、页面也不算丑，但整体透着一股「AI 味」：卡片套卡片、Badge 到处都是、渐变配大圆角，看着挺现代，却没有辨识度，也说不清信息主次。最后还得自己一条条删、一处处改间距和字号。下面把这个现象的成因和几套可落地的做法整理一下。
功能代码有对错，界面代码没有
这是两件事难度不同的根本原因。功能部分有客观验收标准：输入输出对得上、边界条件覆盖到、异常有兜底，就算完成，模型也能靠编译器和测试用例自我纠错。
界面没有这种反馈回路。一段 JSX 编译通过、浏览器里也渲染正常，但它可能同时犯了「信息层级全平」「主色滥用」「留白毫无节奏」三个错误，而模型自己看不出来。它只被要求「做一个能用的页面」，于是把「看起来专业」的所有装饰一次性叠上去。
「一眼 AI」的典型特征
这些特征高度雷同，基本可以当检查表用：
| 表现 | 常见成因 | 处理方向 |
|---|---|---|
| 圆角全部 16px 以上 | 默认模板偏向卡片化 | 圆角只保留一到两档，容器用 4–8px |
| 背景渐变 + 玻璃拟态 | 把「现代」等同于装饰 | 纯色或极浅灰底，除非产品本身就是视觉型 |
| 每个区块都是 Card | 没有信息层级概念，只能靠容器切分 | 用标题、分割线、留白代替容器 |
| Badge / Tag 铺满列表 | 误以为状态需要可视化 | 只保留真正需要突出的状态 |
| emoji 当图标 | 图标库引入成本高 | 换成统一的图标库或内联 SVG |
| 字号只有「大标题」和「正文」两级 | 缺少比例尺概念 | 建立 4–6 级的字号阶梯 |
| 所有按钮都是主色实心 | 没有主次操作区分 | 一屏一个主操作，其余用次级或文字按钮 |
核心问题：模型不会做减法
删减依赖三样模型拿不到的信息：产品定位、目标用户、信息优先级。这些没写进需求，它就只能用通用审美填空，而通用审美的最大公约数就是那套「现代简约」模板。
所以与其抱怨模型审美差，不如承认是输入不足。把「做一个好看的页面」换成可判定的约束，输出质量会立刻不同。
做法一：先有参照物，再谈实现
最省事的一步是给参照，而不是给形容词。
- 给同类产品的截图，并明确说明只借结构：「参考它的信息层级和区块划分，视觉风格另做」。
- 给 Figma 稿或设计稿导出，让模型按稿实现，它在这类任务上的完成度通常远高于自由设计。
- 只能文字描述时，用结构化的语言替代风格词。
对比一下两种写法：
× 做一个现代简约的深色界面，要有科技感
√ 单页应用，三个区块：
1. 顶部一行：标题 + 一个主操作按钮（右对齐），无副标题
2. 中部：输入区与结果区左右两栏，比例 1:2
3. 底部：一行说明文字，字号最小
背景纯色 #111，不使用渐变和阴影；
全站只用一档圆角 6px；
主色只用于主操作按钮和当前选中项；
状态信息用文字，不要用 Badge。
第二段本质上是在替模型做减法，把「不该加的东西」提前写明。
做法二：把设计约束固化成文件
如果项目会持续迭代，把约束从对话里搬到仓库里更稳。新建一个 DESIGN.md 或 tokens.css，每次让模型改界面前先让它读一遍：
:root {
--radius-sm: 4px;
--radius-md: 6px;
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 32px;
--text-sm: 13px;
--text-base: 14px;
--text-lg: 20px;
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-muted: #6b6b6b;
--color-accent: #2b6cb0;
}
再配一份禁用清单，效果比任何形容词都好：
- 不使用渐变、玻璃拟态、投影叠加
- 不引入新的圆角、阴影、字号数值，一律取变量
- 不新增图标库，图标统一从既有集合取
- 一个页面最多一处主色按钮
- 不加「装饰性」的 Badge、分隔卡片、无意义插图
约束写成硬规则后，模型就失去了自由发挥的空间，而这正是你想要的结果。
做法三：拆成「骨架 → 皮肤」两轮
一次性让它生成整页，等于把结构和视觉同时外包，出错后很难定位。分两步：
- 第一轮只要结构：输出语义化的组件树或纯 HTML，标注每个区块的作用、内容优先级、哪些是主要操作。这一轮不要样式。
- 你先确认信息层级对不对，把多余的区块砍掉。
- 第二轮只上样式：明确要求只改 CSS / className，不动 DOM 结构。
第二轮加一句「只允许修改样式文件，不要增删元素」，能挡掉大部分「顺手加个卡片」。
做法四：精调要指到具体位置
模型对「这个按钮间距再大一点」这类模糊描述反应很差，对具体位置反应很好。
- 截图并圈出区域，或直接说「第三行的次要按钮和左边文字之间」
- 一次只改一个维度：先改间距，再改字号，最后改颜色
- 用「改成什么」而不是「再调调」：「按钮内边距改为 8px 16px，与输入框对齐」
多轮小改动比一次大重写更容易收敛，也更容易回滚。
上线前的界面自查清单
- 圆角档位不超过两种，且容器圆角小于内部元素
- 页面没有渐变、玻璃、多重阴影
- 每种字号都来自同一套阶梯，没有 15px、17px 这类临时值
- 主色出现次数可控，一屏只有一个主操作
- 状态信息优先用文字，Badge 只用于真正需要中断注意的地方
- 图标来源统一，没有 emoji 混入
- 每个区块都能说清「删掉会损失什么」，说不清就删
几种协作方式的取舍
| 方式 | 适合场景 | 代价 |
|---|---|---|
| 完全自由设计 | 内部工具、一次性脚本页面、只求能跑 | 后续返工多，风格不可控 |
| 参考站截图 / 竞品结构 | 没有设计资源，但要求成品感 | 需要自己挑图并说明「借什么、不借什么」 |
| 设计稿或 Figma 驱动 | 有稿可依，要求还原度 | 前期要有稿；实现完成度高 |
| 组件库 + tokens 约束 | 长期维护的项目 | 前期配置成本，换来后续稳定 |
不存在通用最优解：一次性工具自由发挥最快，要交付给别人的产品则值得先把参照和约束准备好。
两个容易忽略的点
emoji 图标是最容易被识别出「AI 生成」的细节之一。让模型显式使用一个图标集合，例如「所有图标从既有 icon 组件中选，不允许使用 emoji」，通常一句约束就能解决。
运行环境方面，界面精调往往是十几轮的小步迭代，会话一断就得重新交代上下文。如果本地机器会休眠、网络抖动频繁，把这类长会话放到长期在线的机器上跑会省心一些，例如租用一整台放在机房、按月计费的远程 Mac 长时间挂着 Claude Code，属于可选项，不是必需。
另外，涉及逆向工程、绕过模型安全限制这类话题时，风险要自己承担，也可能违反服务条款，不建议在正式项目里尝试；有合法需求就走官方提供的接口和申诉渠道。各家模型能力与工具行为更新很快，具体以官方最新文档为准。
小结
AI 生成界面「一眼 AI」，本质是输入里缺少「不要什么」。把审美诉求翻译成可判定的规则——参照物、设计 token、禁用清单、结构先行——模型的产出就会从「通用模板」变成「你的项目」。功能交给它省下来的时间，值得分一部分用在把约束写清楚上。
