| name | slop-audit |
| description | 前端 / 视觉产出的「AI 味」体检与反面词典——交付前逐条 sweep,抓出模型下意识写出来的模板指纹(装饰性眉标、假截图、地名时间条、滚动提示、章节编号、黄铜米色配色、Fraunces 衬线、彩虹渐变、AI 腔文案…),并给出替代方案。当用户说「看着像 AI 做的 / 有 AI 味 / 像模板 / 帮我挑挑毛病 / 交付前检查一下 / 去 AI 味 / anti-slop / AI tells」,或在落地页·作品集·营销页·海报·HTML artifact 交付前自检时使用。是 `frontend-aesthetic.md`(常驻审美规约)的重型配套:规约管「怎么做对」,本 skill 管「做完了逐条抓错」。 |
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 |
| 竖排旋转文字 | 转 90° |
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 禁令套到中文正文上
- ❌ 逐条背词典当输出——只列命中的