怎么洗掉前端的"AI 味"

问题：做出来的东西，一眼是 AI 干的

自从 AI Coding 工具普及，“写前端”的瓶颈不再是”能不能搭起来”——几句话就能出一个能用的页面。新问题变成了：做出来的东西，一眼就能看出是 AI 干的。

紫色到蓝色的渐变背景、居中的圆角卡片、千篇一律的阴影、一排 emoji 图标、英雄区 + 三栏特性 + 一个 CTA……这套”模板感”被称为 AI 味。它不丑，但用多了会廉价、没辨识度，所有 coding 出来的产品像一个模子刻出来的。

这篇想解决的就是一件事：AI 把活儿干完之后，怎么把这股 AI 味洗掉，让前端看起来像认真做过设计。为了把”美化”这件主观的事变得可讨论、可验证，正文按这个顺序展开：先把问题讲透 → 再把”什么叫美化”量化成一把尺子 → 最后给出三种由轻到重、可叠加的解决方法。

怎么分辨 AI 味

AI 生成的前端往往同时命中下面这些特征，命中越多，AI 味越重：

• 配色与质感：偏爱紫蓝渐变背景、靛蓝主色，几乎不动 Tailwind / shadcn 的默认色板；圆角统一、阴影柔和、间距均匀到有点呆板。
• 结构套路：永远是 Hero 大标题 → 三/四栏 Feature 卡片 → 一句话 CTA，顺序几乎不变。
• 图标与字体：用 emoji 当图标，或一水儿的默认线性图标；正文清一色 Inter / Roboto，标题与正文的字重对比偏弱。
• 细节缺失：没有 hover / focus 的精细处理，缺少空状态与微交互——能跑，但经不起细看。

而人做的页面常常”不完美但有取舍”：为品牌选一个不那么安全的主色，主动打破对称，某处留白、另一处堆密度。AI 给的是”最大公约数式的好看”，而这恰恰是辨识度的反面。

根因：为什么一股 AI 味

根因其实只有几条：

1. 模型偏好”安全的平均美学”——训练数据里这类干净、通用的现代 UI 占比极高，没有强约束时，模型自然回归到这个安全区。
2. 给的提示词太泛——“帮我做个好看的登录页”，等于让 AI 交回它认为最不会出错的那一版。
3. 没有设计系统/组件库当地基——每次都让模型”现编样式”，结果就是每次都长得差不多，且经不起细看。
4. 默认值没改——Tailwind 的默认色板、默认主题原封不动地交付，等于把”出厂设置”直接给用户。

把这四条归一下类，AI 味的本质可以写成一个”病因公式”：

AI 味 = 缺约束 ＋ 用默认值 ＋ 套路化结构 ＋ 细节缺失

这个拆解很关键，因为它决定了后面该怎么衡量、该用什么指标：四个病因，对应几个可观测的维度。也就是说，我们不能笼统地评价”好不好看”，而要分别去查”约束够不够、默认值改没改、套路破没破、细节补没补”。

AI 味正在从”中性词”变成”减分项”

为什么非得花力气去 AI 味？因为它正在产生实打实的代价。当所有产品都用同一套 AI 默认审美，会发生两件事：

• 用户一眼就腻：看多了，“渐变紫 + 圆角卡片”会和”AI 随手生成的”画上等号，进而和”没打磨、不靠谱”画上等号——审美疲劳会把你的产品自动归到”凑数”那一档。
• 你失去辨识度：品牌资产建立在”看一眼就知道是你”，而同质化把这件事直接清零。

换句话说，AI 味正在从一个中性词变成一个减分项。“美化”不再是锦上添花，而是产品质感的及格线。这一节回答的是”为什么要做”——它把后面所有方法的投入，锚定在一个明确的收益上：辨识度与可信度。

把”美化”量化成一把尺子

美化很主观，但可以被讨论、被验证。把”AI 味”拆成三个可观测的维度，就有了统一的尺子——每个维度都有”看什么指标”和”为什么看它”：

维度一：约束度（治”缺约束 + 用默认值”）

• 看什么：设计 token 覆盖率（颜色/字号/间距/圆角是否都来自一套定义好的变量）；硬编码色值数量（目标趋近 0）；emoji 当图标的数量（目标 = 0）。
• 为什么看：AI 味的头号来源是”放任默认值”。token 覆盖率和硬编码数量是最容易客观统计的量——直接在代码里数即可，不掺杂个人审美，最适合作为”约束到没到位”的铁证。

维度二：完成度 / 细节（治”细节缺失”）

• 看什么：可访问性（正文对比度 4.5:1、大字 3:1、焦点可见、键盘可达）；交互状态完备度（focus / 选中 / 空状态 / 错误态是否齐全）；响应式断点无错位。
• 为什么看：这些是”人做的页面”才会顾及、“AI 随手生成”最容易漏掉的地方，且大多有官方规范客观依据。细节是否补齐，是区分”演示级”和”交付级”的分水岭。

维度三：可控性（治”美化反而帮倒忙”）

• 看什么：功能回归 bug 数（理想是”只改样式不动逻辑”）；引入组件后的白屏/错位/命名冲突数量；复现性（同一份规范跑两次，产出差异有多大）。
• 为什么看：美化的前提是”不能把能用的东西改坏”。这个维度衡量的是代价——一种方法如果带来一堆回归 bug，那它的”好看”不可接受；复现性则衡量方法的可靠程度，越依赖模型即兴发挥，复现性越差，越需要人兜底。

有了这把尺子，三种方法各拿哪个维度的分，后面就一目了然。

三种由轻到重的洗法

三种方法按”投入 → 效果”由轻到重排列：提示词法（照葫芦画瓢）→ skill 美化（装技能）→ HeroUI Pro（接组件库）。它们不是互斥的，可以叠加。

方法一：提示词法（照葫芦画瓢）

核心逻辑是：你自己未必能用语言精确描述”什么叫好看”，但你能认出好看。那就把一个你认可的页面，让 AI 帮你逆向成一份可复用的风格规范，再拿这份规范去约束你的 coding AI。

为什么有效？回到那个病因——AI 味来自”缺约束”。这套方法做的，本质就是把一份自有约束注入到生成过程里：参照物把”模糊描述不清的审美偏好”转成了”具体的色值、字号、间距规则”，输出自然就从”平均款”被拉向”你想要的那一款”。

具体五步：

1. 选定你觉得 OK 的页面布局：一次只参照一个站点，避免风格打架，且选一个与你业务调性接近的对象（比如金融类产品参照金融资讯站），这样逆向出来的规范才用得上。
2. 把页面截图喂给 AI，让它总结布局风格：给一张网站截图，让 AI 像资深 UI 设计师一样把它拆成结构化清单——整体风格定位、配色（附 HEX）、字体层级、布局与信息密度、组件质感、细节与点缀。关键提示词里要加一句”只做客观描述，不要评价好坏”，因为你要的是可执行的事实（HEX、px、对齐方式），而不是”很高级、很大气”这种无法落地的形容词。
3. 得到一份具体的设计风格提示词：上一步产出会是一份包含主色/辅助色/背景色 HEX、字号阶梯、字重对比、栅格与留白、圆角与阴影的清单。
4. 把拆解结果压缩成一段能直接喂给 coding AI 的 style 模板：让 AI 基于拆解结果写一份「设计规范提示词」，要求用 coding 工具能直接执行的语言（指明 HEX、rem/px、Tailwind 类名倾向），包含一套设计 token 和”应避免”的反模式（禁用紫蓝渐变、禁用 emoji 当图标），长度控制在能贴进 IDE 规则文件。
5. 把这份规范交给 coding AI 改造现有页面：关键是”只改样式与结构，不改业务逻辑”，并让它改完逐条对照规范自检、列出还没满足的项。把产出存成文件（DESIGN.md 或 CLAUDE.md）放在项目根目录，它就成了项目的”审美宪法”。

为什么强调”只改样式不改逻辑”且”逐条自检”？前者直接服务于维度三（可控性）——把改动锁在样式层，功能回归 bug 才可能为 0；后者把维度一/二的验收前移给了 AI 自己，让它先交一份自检清单，人只需复核。

适用边界：适合改风格和基础配色、改动量不大的场景；如果要做结构级重构，它达不到预期——因为它只注入了”样式约束”，并没有提供”组件资产”（这正是方法二、方法三要补上的）。

方法二：Skill 美化

如果说方法一是临时喂一份风格规范，那么 skill 美化就是把这套”设计经验”固化成一个可复用的技能——内置成熟的设计准则、风格库甚至检索数据库，调用一次就能按专业标准生成或改造界面。它把约束沉淀了下来，等于把”一份好规范”变成”一个稳定的能力”。

我用得最顺手的两个：

anthropics/claude-code → plugins/frontend-design（Anthropic 官方，自动激活）。它是”设计指导型”技能而非命令行工具，内置一套设计准则，在生成时会：

• 排版用有个性的字体，避开 Inter / Roboto / Arial；
• 承诺一个统一鲜明的美学方向（CSS 变量），而非”白底紫渐变”；
• 处理加载动画、滚动触发、hover 微交互；
• 布局上非对称、重叠、打破网格、可控留白与密度；
• 先确定一个大胆明确的美学基调（极简/极繁/复古未来/编辑杂志风/工业风等）再动手。

装它 claude plugin add anthropic/frontend-design。把它和病因逐条对一下就清楚它”恰好能去 AI 味”：避开通用字体、用 CSS 变量锁 token、打破网格非对称——它不是在加装饰，而是在系统性地反着 AI 的默认偏好来。不足在于它偏视觉、无内置组件库（全靠模型即时生成，结果有随机性）、可能”过度设计”，且默认爱用 emoji 当图标（有规范要求时要专门叮嘱）。

nextlevelbuilder/ui-ux-pro-max-skill 是一个”设计智能”数据库型 skill——底层是结构化数据（50+ 设计风格、161 套配色、57 组字体、99 条 UX 准则、25 种图表、10 套技术栈最佳实践）+ Python 检索脚本，靠检索而非纯提示词。核心机制：--design-system（输入”产品类型 + 行业 + 关键词”，并行检索多个领域，一键产出完整设计系统）、--persist（把设计系统落盘为跨会话的分层规范）。

它最特别的地方是把质量检查按优先级排了序（可访问性 → 触控交互 → 性能 → 风格 → 响应式 → 排版配色 → 动效 → 表单反馈 → 导航 → 图表数据），每条都引用 Apple HIG / Material Design / WCAG 等官方规范。这等于把上面那把尺子的”维度二（细节/可访问性）“做成了一份有出处、有优先级的现成 checklist——“先修可访问性、再谈配色动效”的排序，正是为了避免”本末倒置地美化”。

对照结论：frontend-design 强在”惊艳”（维度二辨识度），ui-ux-pro-max 强在”不出错”（维度三细节/可访问性，且有据可依）。理想做法是两者配合：先用 frontend-design 定一个有辨识度的方向，再用 ui-ux-pro-max 逐项体检补齐细节。但两者都偏”给方向/给规范”，真正的组件代码仍由模型即时生成，复现性有限——这就引出了最重的一招。

方法三：HeroUI Pro（组件库）

前两种方法的共同短板是：约束和规范给到了，但组件本身还是模型现编的，复现性和质感都有上限。HeroUI Pro 直接补上这块——它提供真实、成熟的组件库与主题系统，相当于给项目换上一套”工业级地基”。

为什么不绕开它：放到尺子上看——真组件意味着维度一（约束度）由组件库强制保证，维度二细节（状态/可访问性/响应式）由组件原生提供，复现性因为固定组件而非即兴生成而大幅提升。代价是环境改造成本最高（需要 React 19+ 和 Tailwind v4），且引入组件库本身可能带来冲突（白屏/错位），这部分要专门排错。整体流程是：自查环境 → 升级依赖并引入 CSS → 安装 HeroUI 组件 → 换全局主题 → 逐模块用组件替代 → 清理 emoji。

适用边界：投入最高（环境改造 + 组件接入 + 排错），但换来的是”真组件 + 统一主题”，整站质感最稳、最接近成品。适合愿意做一次环境改造、追求最终交付质量的项目。

三种方法怎么选

把三种方法放回那把统一的尺子上，它们是”投入 → 效果”递进的三档：

实践体会

• 洗 AI 味最高杠杆的是先定视觉约束，再补细节，最后才反套路——顺序反过来容易用力过猛。
• “好看”对你用处最大的是变成可检查的规则：能用尺子量化，就能让每次改动有方向、可验收。
• 目标是让页面”看起来是认真做过设计的”，而不是”最漂亮”——辨识度来自取舍，不来自平均值。
• 想快就用提示词法，想稳就上 skill，想精就接 HeroUI Pro。无论哪种，AI 负责把活干快，审美的取舍与”做没做好”的判断依然得由你来定——工具越强，“你想要什么、以及你拿什么证明它做好了”这件事就越有价值。