# Slop Audit

> 前端 / 视觉产出的「AI 味」体检与反面词典——交付前逐条 sweep，抓出模型下意识写出来的模板指纹（装饰性眉标、假截图、地名时间条、滚动提示、章节编号、黄铜米色配色、Fraunces 衬线、彩虹渐变、AI 腔文案…），并给出替代方案。当用户说「看着像 AI 做的 / 有 AI 味 / 像模板 / 帮我挑挑毛病 / 交付前检查一下 / 去 AI 味 / anti-slop / AI tells」，或在落地页·作品集·营销页·海报·HTML artifact 交付前自检时使用。是 `frontend-aesthetic.md`（常驻审美规约）的重型配套：规约管「怎么做对」，本 skill 管「做完了逐条抓错」。

- Skill: `garveyhu/slop-audit` (Agent Skill)
- Install (CLI): `npx skillmds@latest add garveyhu/slop-audit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/garveyhu/slop-audit/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: garveyhu (https://skillmd.com/u/garveyhu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/garveyhu/slop-audit

---


# slop-audit · AI 味体检与反面词典

> 审美规约（`~/.claude/rules/frontend-aesthetic.md`）是**生成时**的约束，本 skill 是**交付前**的审查。
> 核心信念：**能数出来的规则才会被执行。** 「拒绝 AI 味」是废话，「眉标总数 ≤ ⌈章节数 ÷ 3⌉」才是规则。
> 本词典大量条目来自对 LLM 批量生成页面的实证反推（社区 taste-skill 的产测清单 + Links 自己的返工记录），不是凭感觉列的。

---

## 1 · 怎么用

**触发时机**：任何视觉产出（落地页 / 作品集 / 营销页 / Dashboard / 海报 / HTML artifact）**声明完成之前**，或用户说「看着像 AI 做的」时。

**三步 sweep**：

1. **机械数**：跑第 3 节的「可数判定表」，逐条数数量、比对阈值。命中即失败，不辩解。
2. **词典比对**：拿第 4–8 节的反面词典扫一遍产出（文案字符串、class 名、配色值、字体名、组件形态）。
3. **出结论**：列出命中的条目 + 每条的替代方案，**改完再交付**。不要只报告不修。

**审查别人的页面时**：同样流程，但输出改成「命中 N 条 AI 指纹 + 优先修哪 3 条」。

---

## 2 · 为什么这些是「指纹」

模型不是不懂审美，是**在没有明确约束时回退到训练集里的高频组合**。这些组合本身不丑，但它们在每一个 AI 生成的页面里同时出现，于是变成了签名。

判断一条模式是不是指纹，问三句话：

1. 它在你见过的 AI 产出里出现频率高得异常吗？
2. 它承载真实信息 / 真实功能吗，还是只为「看起来像设计过」？
3. 拿掉它，页面会更差还是更干净？

**只为「看起来设计过」而存在、拿掉更干净的元素 = 指纹。**

---

## 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 文案（交付前逐字重读每个可见字符串）

抓这四类：

1. **语法坏掉 / 指代不清**——AI 编的「可爱但不通」的句子
2. **假文青标签**：`From the field` · `Field notes` · `On our desks` · `Currently on the bench` · 「手边正在做的」· 「案头笔记」—— 换成功能性标签（「客户评价」「最新文章」）或直接不要
3. **假谦虚 / 行业梗**：`Quietly trusted by` · 「悄悄被 xx 在用」· 「我们尊重法国那批人」
4. **填充动词**：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 禁令套到中文正文上
- ❌ 逐条背词典当输出——只列命中的