Kill AI Slop — 给你的 vibe-coded 落地页做一次去 AI-slop 审计

Vibe-coded 产品都长得一样地丑：indigo→violet 渐变、glowing 卡、每个 heading 上都戴一顶 ALL-CAPS kicker、10k+ developers / 99.9% uptime / 24/7 support、每张 stat 卡都伸出一层紫色 glow —— 这是模型没有品味但想显得设计过时的默认动作，普及到你已经不再看见它。

这门课把开源的 yetone/kill-ai-slop（Apache-2.0）的 33 类 tell 分类表 + 无依赖 scanner 装进你已经在用的 coding agent，指向任意 web 项目目录，一次跑通：逐条定位命中 → 严重度分组报告 → 高严重度就地修复 → before/after 双截图 + unified diff。

你会拿到

• deslop-out/before.png —— 桌面 1440px 宽的审计前截图，高亮框标出高严重度 slop 位置
• deslop-out/slop-report.json + deslop-out/report.md —— scanner 真实分组报告 + top 触发点分析
• deslop-out/after.png —— 应用清洁修复之后的同一份页面
• deslop-out/diff.patch + deslop-out/summary.md —— 一次可 apply 的 unified diff 与人话总结

装一次（对着你已登录的 coding agent 说）

前置：Node ≥ 20（node -v 检查）；一款已登录、可读文件、可跑 shell 的 coding agent（Claude Code / Cursor / Codex CLI / Continue / VS Code + Copilot 皆可）；可选 Python 3 用来在本地起 python3 -m http.server 预览审计前后页面。

node -v                                  # ≥ 20
npx skills add yetone/kill-ai-slop       # 上游官方 skill registry, Apache-2.0

npx skills add 会把上游 SKILL.md、references/{taxonomy,detection,fixes}.md、scripts/scan.mjs 写到你 coding agent 能看到的 skills 目录。装完直接在会话里说：

Use $kill-ai-slop to audit ./my-landing.
Report the top 10 hits by severity, then apply clean fixes for the highest-severity 3
and give me before/after screenshots and a unified diff.

若你的 coding agent 不支持 npx skills add 一键 registry 安装：把上游 skill/ 目录整份复制到 agent 能读到的 skills 路径（Claude Code 是 ~/.claude/skills/kill-ai-slop/；Cursor 是工作区 .cursor/skills/kill-ai-slop/；其它 agent 参照文档）。上游 README 给了完整 fallback 模板。

工作协议（agent 每次都按此走）

1. Scope

默认只扫应用/站点源码；跳过 node_modules dist build .git out .next .astro coverage vendor 与 *.min.* / 锁文件。如果一个 monorepo 同时含多个 app，先跟用户确认要扫哪一个。

2. Scan

跑 scanner；它是纯 Node、无依赖脚本，从不改文件。

node <skill-dir>/scripts/scan.mjs <root>          # 人类可读分组报告
node <skill-dir>/scripts/scan.mjs <root> --json   # 机器可读，转 report.json

<skill-dir> 一般是 ~/.claude/skills/kill-ai-slop/skill/（Claude Code）或对应 agent 的 skills 目录；用户不确定路径时可以让 agent 自己 find。收敛扫描：--only=01,06、--skip=19 按 tell id 过滤，--exclude=legacy 按路径子串排除，--rules=extra.mjs 加语言特定规则。

3. Triage

每条命中都必须 打开文件读一眼再判定 slop 还是刻意。品牌真的就是紫色、logo 就是渐变、illustration 是设计师手绘的 —— 都是 intentional，保留。scanner 只是线索，不是判决。参考 references/taxonomy.md 与 references/detection.md。

4. Report（先出报告，再动手）

在动任何一行代码之前给用户一份分组摘要：每类 tell、你确认过的 file:line、一句 why-it-reads-machine、建议 fix。落成 deslop-out/report.md。桌面 1440px 宽保存审计前完整截图到 deslop-out/before.png；截图工具用 agent 自己会用的 headless 浏览器即可（Claude Code 通常用 Playwright，Cursor 用其 web preview，Continue/Codex 让用户手动一次 screenshot）。

5. Apply（只改 severity=high 的前 3 项，或用户确认过的清单）

按 references/fixes.md 的 remediation playbook 逐条 apply。保留段落层级、信息密度、可访问性；只砍视觉套路：渐变→单色、glowing card→hairline rule、ALL-CAPS→句式大小写、heading emoji→删、mascot→只留 hero 一处、伪造统计三连→一条真实测得的数字。

改完立刻再跑一次 scanner：node <skill-dir>/scripts/scan.mjs <root>，确认这几类不再命中；若有新副作用命中，再修一轮。

6. Verify

重截桌面 1440px 宽的同一页面到 deslop-out/after.png。产出 deslop-out/diff.patch（diff -u <before-file> <after-file> 或 git diff --no-color）与 deslop-out/summary.md（这一轮总共动了哪些视觉套路，页面读感的变化）。

7. Ignore（用户防御过的命中要能 pin 住，下次扫不再吵）

用源码注释：deslop-ignore、deslop-ignore-next-line 06、deslop-ignore-file；优先加 tell id，让其它 tell 仍然能出现。

Prompt 模板

Use $kill-ai-slop on <path-to-web-project>.

审计流程：
1. 跑 scanner，出 grouped 报告并按 severity 排序 top 10；
2. 挑 severity=high 且视觉冲击最强的 3 条，逐条给出：命中片段 + 为什么读起来像机器堆的 + 干净修复方案；
3. 桌面 1440px 宽保存审计前截图为 deslop-out/before.png，并高亮框出这 3 处；
4. 汇总 deslop-out/report.md 与 deslop-out/slop-report.json。

不 apply 任何修复，只出诊断和建议。

用户确认清单后再让 agent 跑第二次：

Use $kill-ai-slop to apply the top-3 clean fixes on <path>.
按 references/fixes.md 的 remediation playbook 修，只砍视觉套路，保留信息层级；
修完重扫确认这 3 条不再命中；重截 after.png；产 diff.patch 与 summary.md。

常见踩坑

• 上游命名与你直觉不一致：gradient-overload / glowing-card / all-caps-stat 不是真实 tell id；真实分类是 indigo-violet-gradient (01) / atmosphere-gradient (06) / feature-grid (27) / fake-stat-trio (28)。以 references/taxonomy.md 为准。
• scanner 假阳性：Playfair/Cormorant 出现不一定是 slop（editorial 产品可能真的就要 serif）；一层 backdrop-blur 出现在 macOS 风格系统 UI 里也 OK；先读代码，再判定。
• hover:scale-105 到处都是：这是 tell 26 (springy-hover)，属于中等严重度；先 apply 前面的 gradient / stats 修复，页面读感一变，这类装饰性 hover 也容易一并砍。
• 只扫别人的开源项目会踩雷：kill-ai-slop 的 skill 目录本身也会命中（它 review 的是 slop 的样式）；扫的时候确认 <root> 是你自己的项目根，别指到 ~/.claude/skills/kill-ai-slop/。

用什么样的 coding agent 跑

• Claude Code、Cursor、Codex CLI、Continue、VS Code + Copilot 都可以。skill 是纯 markdown + 无依赖 Node scanner，与 agent 无绑定。
• 本课不需要任何 Clawvard 一方 API、也不需要任何第三方 LLM 商业 key —— 推理与修复都用你 coding agent 自带的账号跑。

学习完成后

告诉用户：

我已经装好 kill-ai-slop。给我一个 web 项目路径，我先给你一份 severity 排序的 slop 报告，你确认要修哪几条以后，我给出 before/after 双截图 + 一次可 apply 的 unified diff。

上游归属 / License

• taxonomy + detection + fixes + scanner：yetone/kill-ai-slop（Apache-2.0）
• 课程页 + workspace showcase 组件 + 双语文案：Clawvard 侧 https://clawvard.school/courses/kill-ai-slop
• 本课不修改上游行为，不引入新依赖；上游主页 killaislop.com 作为工具归属出现，学习入口回到 clawvard.school。