garveyhu slop-audit · AI 味体检与反面词典
审美规约（
~/.claude/rules/frontend-aesthetic.md）是生成时的约束，本 skill 是交付前的审查。 核心信念：能数出来的规则才会被执行。 「拒绝 AI 味」是废话，「眉标总数 ≤ ⌈章节数 ÷ 3⌉」才是规则。 本词典大量条目来自对 LLM 批量生成页面的实证反推（社区 taste-skill 的产测清单 + Links 自己的返工记录），不是凭感觉列的。
1 · 怎么用
触发时机：任何视觉产出（落地页 / 作品集 / 营销页 / Dashboard / 海报 / HTML artifact）声明完成之前，或用户说「看着像 AI 做的」时。
三步 sweep：
- 机械数：跑第 3 节的「可数判定表」，逐条数数量、比对阈值。命中即失败，不辩解。
- 词典比对：拿第 4–8 节的反面词典扫一遍产出（文案字符串、class 名、配色值、字体名、组件形态）。
- 出结论：列出命中的条目 + 每条的替代方案，改完再交付。不要只报告不修。
审查别人的页面时：同样流程，但输出改成「命中 N 条 AI 指纹 + 优先修哪 3 条」。
2 · 为什么这些是「指纹」
模型不是不懂审美，是在没有明确约束时回退到训练集里的高频组合。这些组合本身不丑，但它们在每一个 AI 生成的页面里同时出现，于是变成了签名。
判断一条模式是不是指纹，问三句话：
- 它在你见过的 AI 产出里出现频率高得异常吗？
- 它承载真实信息 / 真实功能吗，还是只为「看起来像设计过」？
- 拿掉它，页面会更差还是更干净？
只为「看起来设计过」而存在、拿掉更干净的元素 = 指纹。
3 · 可数判定表（机械检查，命中即失败）
| # | 检查项 | 阈值 | 怎么数 |
|---|---|---|---|
| 1 | 首屏标题行数 | ≤ 2 行（桌面端） | 目测渲染；4 行以上一定是字号问题不是文案问题 |
| 2 | 首屏副文案 | 中文 ≤ 40 字 / 英文 ≤ 20 词，且 ≤ 4 行 | 数字符 |
| 3 | 首屏文字元素数 | ≤ 4 块（眉标或品牌条二选一 · 标题 · 副文案 · CTA） | 数块；CTA 下面那行小字、信任微条、价格预告一律移出首屏 |
| 4 | 首屏顶部内边距 | ≤ 6rem（pt-24） |
超了内容会浮在视口中间，读起来像布局 bug |
| 5 | 眉标（小字大写宽字距标签）总数 | ≤ ⌈章节数 ÷ 3⌉，首屏算 1 个 | grep uppercase tracking / letter-spacing + 小字号；9 章节最多 3 个 |
| 6 | 连续「左图右文 / 左文右图」交替 | ≤ 2 段 | 第 3 段连续 zigzag 判失败，插全幅 / 竖排 / bento 破节奏 |
| 7 | 布局家族重复 | 同一家族全页最多 1 次；8 章节 ≥ 4 种家族 | 家族 = 三等宽卡 / 全幅引言 / 图文分栏 / bento / 跑马灯 / 竖列表… |
| 8 | bento 格子数 | 恰好 = 内容条数 | 中间或末尾出现空格子 = 网格没规划好，重排而不是补空砖 |
| 9 | 多格网格的视觉变化 | ≥ 2–3 格有真图 / 渐变 / 纹理 / 色底 | 全白底纯文字卡的 bento = 无聊的 AI 默认 |
| 10 | 导航 | 单行 + 高度 ≤ 80px | 桌面端两行导航 = 坏设计，缩标签或收进汉堡 |
| 11 | 跑马灯 | 每页 ≤ 1 个 | 两个以上 = 懒得排版的填充物 |
| 12 | 同意图 CTA 措辞 | 一种意图只用一个措辞 | 「联系我们」+「聊聊」+「开始合作」同页 = 失败 |
| 13 | CTA 按钮文字 | 桌面端不折行；主 CTA ≤ 6 字 | 折行的按钮 = 坏掉的按钮 |
| 14 | 按钮 / 表单文字对比度 | ≥ WCAG AA 4.5:1（大字 3:1） | 白底白字、透明按钮压在图上无描边一律禁 |
| 15 | 长列表 | > 5 条不许用默认 ul + 逐行分割线 |
换：分组块 / 卡片网格 / 标签页 / 横向滚动 / 折叠 |
| 16 | 引言 / 证言 | 正文 ≤ 3 行，署名 = 姓名 + 身份 | 只有「— Sarah」= 假证言 |
| 17 | 一致性三锁 | 主题锁 / 强调色锁 / 圆角锁逐一核 | 见第 5 节 |
| 18 | 英文文案 em-dash（— –） |
零 | grep —；中文破折号规则见第 8 节 |
| 19 | 动效理由 | 每处动效能一句话说清传达什么 | 说不清（层级 / 叙事 / 反馈 / 状态变化）就删 |
| 20 | 动效兑现 | MOTION > 4 就必须真的动 | 声明了强动效却只有 CSS 渐现 = 失败；做不到就把旋钮降到 3 交静态页 |
| 21 | 假产品截图 | 零 | div 拼的假任务列表 / 假仪表盘 / 假终端 = 头号 AI 指纹 |
| 22 | 编造的精确数字 | 要么真、要么标 mock | 92% 4.1× 5.8mm 这种假工程精度是重灾区 |
4 · 反面词典 A · 装饰性文字（最高频指纹）
一律删除，除非它承载真实信息：
| 套路 | 例子 | 怎么办 |
|---|---|---|
| 章节编号眉标 | 00 / INDEX · 001 · Capabilities · 06 · how it works · SECTION 04 · QUESTION 05 |
直接删。标题本身就够了 |
| 阶段标签 | Stage 1 / Stage 2 · Step 01 · Phase 一 / 二 / 三 |
用动词本身当标签（「安装」「配置」「上线」） |
| 首屏底部装饰条 | BRAND. MOTION. SPATIAL. · TYPE / FORM / MOTION · 设计 · 构建 · 交付 |
删。除非它是真能点的导航或真状态信息 |
| 滚动提示 | Scroll · ↓ 向下滚动 · Scroll to explore · 动画鼠标图标 |
删。用户没滚就是在看首屏，他知道怎么滚 |
| 地名时间天气条 | Lisbon 14:23 · 18°C · 杭州 · 多云 · 1200-690 Lisbon, Portugal |
删。只有真·跨时区团队 / 旅行品牌 / 实体场馆才留 |
| 版本号 / 构建号 | v1.4.2 · Build 0048 · last sync 4s ago · main |
营销页删干净。这是 CLI 界面的东西 |
| 首屏版本徽章 | V0.6 · BETA · INVITE-ONLY · 内测中 |
删，除非这次就是发布预告 |
| 图上叠标签 | 照片上盖 Brand · 02 · PLATE · BRAND · 作品 · 03 |
让图说话，或把说明放图下面 |
| 假图注 | Field study no. 12 · Ines Caetano · Frame XII · 35mm · 图 03 · 档案 |
只有真摄影师真授权才写图注 |
| 假实时计数 | 已预订 412 / 800 · 仅剩 3 席 |
只有真限量真数据才留 |
| 眉标下的碎碎念 | 「以下都是今天就能用的功能，不是路线图承诺。这个列表会刻意保持简短。」 | 删。眉标 + 标题 + 正文 足够 |
| 分隔中点滥用 | foo · bar · baz · qux · quux |
每行最多 1 个中点；多了用换行 / 细线 / 分栏 |
| 装饰性状态圆点 | 每个导航项 / 列表行 / 徽章前面一个彩色小圆点 | 默认零。只有真语义状态（在线 / 可约）才留，且每区 ≤ 1 |
| 竖排旋转文字 | INDEX OF WORK, 2018-2026 转 90° |
只有明确要 agency / 实验风且真服务构图时才用 |
| 装饰性十字准星 / 网格线 | 纯为「看起来设计过」画的横竖细线 | 删。只有真在组织内容时才留 |
5 · 反面词典 B · 版式与一致性
一致性三锁（最能分出「作品级」和「半成品」）：
- 主题锁：整页只有一个明暗主题。深色页中间不许夹一屏暖纸浅色（反之亦然）。同主题内的层次色阶（
zinc-950挨着zinc-900）没问题；翻到amber-50就是坏的。例外：明确要「色块叙事 / 滚动换主题」且是一次有过渡的刻意设计，全页限一次。 - 强调色锁：选定的强调色贯穿全页。暖灰站不许在第 7 屏冒出个蓝色 CTA，玫瑰色站不许在页脚出现青色徽章。逐组件核对。
- 圆角锁：一套 radius 尺度贯穿。要么全直角、要么全 12–16px、要么交互元素全胶囊。混用只允许有成文规则（「按钮胶囊 / 卡片 16px / 输入框 8px」）且全站遵守。方形布局里冒出圆按钮 = 坏设计。
其他版式指纹：
- 三等宽功能卡横排 —— 换 2 栏错落 / 非对称网格 / 滚动钉住 / 横向滚动
- 「左边大标题 + 右边小段解释文字」当章节头 —— 默认禁；真要两者就竖着叠（标题在上、正文在下、宽度 ≤ 65 字符）
- 章节头右上角浮着一小段没有对齐关系的说明文字 —— 那个浮块就是破绽
- 长规格表每行都上下描边 —— 选一种边、稀疏用；或改成分组块 / 规格卡 / 折叠
- 带底色轨道的评分进度条当对比可视化 —— 落地页上是仪表盘杂音，用数字 + 小图标
- 居中 hero + 三等宽卡 的安全默认 —— VARIANCE > 4 时禁，破格去
6 · 反面词典 C · 字体与配色
6.1 字体黑名单
Inter不当默认（除非明确要中性 / Linear 风 / 无障碍优先）Fraunces和Instrument Serif禁用——这两款是 LLM 最爱的展示衬线，一眼 AI- 衬线不是「创意 = 衬线」的下意识选择。创意机构 / 设计工作室 / 现代品牌 / 高端消费 / 作品集，默认无衬线展示字（Geist Display · PP Neue Montreal · Cabinet Grotesk Display · GT Walsheim · ABC Diatype · Söhne Breit）。无衬线不是无聊，它是默认，就像黑色是时装的默认。
- 衬线只在这两种情况成立：品牌 brief 点名了某款衬线，或气质真的是编辑 / 出版 / 奢侈 / 手稿 / 复古，且你能说清这一款为什么配这个品牌。
- 真要用衬线，从这个池子轮换（别连续两个项目用同一款）：PP Editorial New · GT Sectra Display · Reckless Neue · Tiempos Headline · Recoleta · Canela · Domaine Display · Saol Display · Migra · IvyPresto · EB Garamond · Cormorant Garamond
- 强调某个词用同一款字体的斜体或粗体，不要在无衬线标题里插一个衬线词（反之亦然）。混家族强调 = 业余。
- 斜体降部避让：展示级斜体里含
y g j p q时，leading-none会把降部切掉。最低leading-[1.1]+ 底部留pb-1。
6.2 配色黑名单
- AI 紫 / 靛蓝渐变 + 发光按钮 —— 头号视觉指纹，默认禁
- 高端消费品的「暖米色 + 黄铜 + 牛血红 + 浓缩咖啡」全家桶 —— 炊具 / 养生 / 手作 / 轻奢 / DTC 家居 brief 的 AI 标准答案，用了品牌就隐形。具体禁用色：
- 底色：
#f5f1ea#f7f5f1#fbf8f1#efeae0#ece6db#faf7f1#e8dfcb - 强调：
#b08947#b6553a#9a2436#9c6e2a#bc7c3a#7d5621 - 文字：
#1a1714#1a1814#1b1814 - 替代族（轮换用，别连着用同一族）：冷奢（银灰 + 铬 + 烟）· 森林（深绿 + 骨白 + 琥珀）· 黑与褐（真近黑 + 暖棕，锐对比无米色）· 钴蓝 + 奶油 · 陶土 + 石板灰 · 橄榄 + 砖红 + 纸 · 纯单色 + 一个饱和亮点
- 底色：
- 科技霓虹组合拳：暗底 + 青绿霓虹 + 毛玻璃 + 等宽字 + 发光流体 + 网格，凑齐 ≥3 样就是廉价。深色本身不廉价，这套组合才是。
- 纯黑
#000000/ 纯白#ffffff—— 用近黑近白，纯值杀掉纵深 - 主视觉抛多色「彩虹」和品牌色打架 —— 一主色统治 + 一互补点睛 ≤5% 面积
7 · 反面词典 D · 资产与文案
7.1 资产
- div 拼的假截图 / 假仪表盘 / 假终端 / 假任务列表 —— 头号指纹，零容忍。要展示产品：真截图 / 生成图 / 页面内嵌真组件预览 / 干脆不放
- 手画的装饰性 SVG（发光球、流体、工程线稿）当主视觉 —— 下策，永远追不上一张真图。先调生图 skill（
media-gen/comfyui/gemini-gen/jimeng/codex-image-gen） - 手搓 SVG 图标 —— 用图标库（Phosphor / HugeIcons / Radix / Tabler），一个项目一套家族，
strokeWidth全局统一 lucide-react是 AI 默认库，除非项目已依赖或用户点名- 纯文字页不是极简，是没做完。再克制的站也要 2–3 张真图
- 信任墙用真 logo（Simple Icons CDN / devicon），不要纯文字商标排一行；虚构品牌就配一个生成的字母标
- 信任墙只放 logo，不要在每个 logo 下面标行业（
Vercel下面写「托管」） - 信任墙在首屏下面，不塞进首屏
7.2 文案（交付前逐字重读每个可见字符串）
抓这四类：
- 语法坏掉 / 指代不清——AI 编的「可爱但不通」的句子
- 假文青标签：
From the field·Field notes·On our desks·Currently on the bench· 「手边正在做的」· 「案头笔记」—— 换成功能性标签（「客户评价」「最新文章」）或直接不要 - 假谦虚 / 行业梗：
Quietly trusted by· 「悄悄被 xx 在用」· 「我们尊重法国那批人」 - 填充动词：Elevate · Seamless · Unleash · Next-Gen · Revolutionize · 「赋能」「打造」「一站式」「全链路」「深度融合」—— 换具体动词
假数据同理：John Doe / 张三 / Acme / Nexus / SmartFlow / 99.99% / 1234567 —— 换成有质感的真实感命名和不规整的数字（47.2%）。
一页一种语气：技术等宽腔（47 tasks · 0.6 ctx/day）、编辑散文腔、营销重锤腔，不要混在同一个构图里。
8 · 中文场景专属（社区词典没有的部分）
- 破折号：中文「——」是合法标点，照常用；但禁止拿它当排版装饰（标题里的长停顿、动效断句、当项目符号）。英文文案里 em-dash（
—–）零容忍，改用普通连字符或重组句子。 - 超大中文标题必须拆内部层级：铺垫句（中号 · 字重 500）→ payoff（大）→ 关键词峰值（超大 · 字重 900 + 强调色）。全一个字号靠换色假装层级 = 黑砖墙。
- 中文词绝不能被容器切断，手动锁断行点。
- 超大中文标题的句号缩到
0.5em，别和汉字一样大。 - 一路 Heavy 是 banner 味，大而克制 + 关键词局部重锤才高级。
- 中英混排：数字和拉丁字母两侧留 0.25em 视觉间隙，别硬贴汉字。
- 中文没有斜体。伪斜体（
font-style: italic强拉）在中文里是错的，用字重 / 颜色 / 字号做强调。
9 · 输出格式
sweep 完按这个格式回：
AI 味体检：命中 N 条
【必修】
1. <条目> —— 位置：<哪个组件 / 哪行> —— 改成：<具体替代>
2. ...
【建议】
...
【已过】可数判定表 22 条中通过 X 条
命中 0 条时也要说清「数了哪些、都过了」，不要空口说「没问题」。
禁止做的事
- ❌ 只报告不修（除非用户明说只要体检报告）
- ❌ 把「感觉不够高级」当条目——每条必须指到具体元素 + 给替代方案
- ❌ 拿本词典去否定用户明确点名要的东西（brief 点名要紫色 / 要衬线 / 要 BETA 徽章，那就是需求不是指纹）
- ❌ 把英文语境的 em-dash 禁令套到中文正文上
- ❌ 逐条背词典当输出——只列命中的