anti-slop 是做什么的？
由 AI 生成的 UI 往往以相同的方式失败。本技能将三件事整合为一个工作流： 源自 unslop 的逐项消除方法、源自 taste-skill 的艺术指导机制，以及一个包含 20 个过时痕迹的清单及其检测脚本。
鸣谢与许可证
- 本方法改编自 unslop（作者：Damir Sokolovsky，https://github.com/heydamir/unslop），
采用 CC BY 4.0 许可（https://creativecommons.org/licenses/by/4.0/）。已适配：精简并与
Leonxlnx 的 taste-skill 以及 Molveau 的 tells（位于
references/playbook.md）合并。在任何副本或改编中均需保留此鸣谢。原始内容未做修改，放在references/vendor/unslop/目录下。 - 艺术指导流程、内部规则和检查器来自 taste-skill（作者：Leonxlnx，https://github.com/Leonxlnx/taste-skill），采用 MIT 许可，未做修改，放在
references/vendor/taste/目录下。 - 20 个痕迹列表和
scripts/detect-tells.mjs是 Molveau 的原创作品（MIT 许可）。 scripts/story.mjs改编自 unslop 的渲染器（CC BY 4.0，其头部标明了变更内容）；它仍采用 CC BY 4.0 许可，其本地服务器scripts/story-server.mjs亦然。scripts/story-contrast.mjs是 Molveau 的原创作品（MIT 许可）。
从这里开始
首先阅读 references/playbook.md，特别是其“先做这个”部分；仅在需要深入了解或查看工作示例时才打开供应商文件。 该操作手册是合并后的指导原则（方向、步骤、文案、间距、色彩、字体、图标、细节、数据、应用屏幕、图景、动效、检查），包含了来源标签以及在来源相悖时做出的决策。下面的“何时阅读什么”表格是深度索引。
重叠说明：这是针对 AI 外观的消除步骤。ui 技能的点评行是更轻量级的设计审查，而 design-grill 则是深度的多视角审计；当需要超越痕迹检查的设计质量评估时使用它们。
方向门控
在开始新页面或新屏幕的任何代码编写之前，以及在每次重度消除 AI 痕迹操作的第 3 步执行此步骤，即使请求只有一行或只是说“做就是了”。本技能的其余部分旨在消除错误，但不会赋予屏幕个性。如果跳过此步骤，结果将是每个模型都能生成的平庸页面：细节没错，但谁也不拥有它。
- 五行定义。 产品：它做什么，为谁而做。性格：两到三个具体的词（例如，“冷静、精确、稍显温暖”），永远不要使用“干净、现代、时尚、极简、高级”。世界：产品所属的地方或材质；它会渗透到中性色中并定义强调色。焦点时刻：一到两处获得丰富色彩和细节的地方。签名元素：仅此产品拥有的一个小细节，需要一致地使用。 焦点时刻是精心绘制的，而不仅仅是清理干净的：一个图表为表达其核心信息而重绘（流畅的线条、镜像对比、真实比例），或者产品本身的对象以重量感和光影呈现。
- 清单，然后是创意。 列出 8 到 12 件竞争对手没有的东西（名称、街道、需求中的数字、材料、工具、惯例、行业印刷的文档）。写下：“在这个屏幕上，[一件物品] 变成了 [装置]”。那个装置就是焦点时刻。
- 拒绝第二层默认值，除非品牌已经拥有这些元素。这些是模型在明显的痕迹被禁止后通常会选择的东西：
- 奶油色、石材色或暖白色页面，配以烧橙色、陶土色、鼠尾草绿或森林绿强调色，无论是否带有衬线标题（“纸和墨水”风格是新的默认值，而不是一种方向）；
- 默认使用 Fraunces、Instrument Serif、Playfair 或 Georgia 作为标题字体；仅使用 system-ui 作为字体；
- Inter 或 Geist 字体搭配白色背景和一个靛蓝或蓝色强调色；
- 英雄区域、三个特性、客户证言、行动号召，按此顺序排列，且没有论证理由；在应用屏幕中，四个等大的统计卡片放在一个条形图上方；
- 居中的眉毛标签、标题和两个按钮作为整个第一屏。
- 互换测试。 将产品名称和业务替换为竞争对手的。如果屏幕仍然适合，请更改主张、焦点时刻和签名元素，然后再次测试。
- 展示并等待。 展示五行定义和创意，并等待项目所有者确认。如果你无法询问（用户只是说“构建它”，或者你没有真人交互），请将这五行作为一个注释写在主文件顶部，并严格按照此定义构建。
深度阅读：anti-slop 操作手册 §2（方向）和 §12（应用屏幕）；design-inspiration-index 技能用于获取真实的参考。
核心思想
AI 痕迹将色彩和视觉效果散布在界面的各个部分上：背景、按钮、边框、标签。而精心设计则保持界面安静，将丰富性融入一到两个用户会记住的内容焦点时刻。消除 AI 痕迹只是工作的一半；一个干净但可以属于任何产品的屏幕只是下一个模板。每一次运行都应最终得到一个只属于该产品的屏幕。
工作顺序
- 全新页面还是深度重新设计？ 遵循 taste-skill 的流程运行（
references/vendor/taste/taste-skill.md）并应用操作手册的覆盖规则。应用屏幕：操作手册 §12。 - 审视屏幕，尽可能以渲染而非仅代码的形式查看。
- 审计：对照标志列表（
references/vendor/unslop/unslop/references/signs.md）和 20 个痕迹列表（references/tells.md）进行审计。每个标志一行，并注明其出现位置。 - 评估工作量（重度、轻度、无痕迹）并编写方向定义，然后等待项目所有者确认（操作手册 §1 和 §2）。
- 通过九个步骤修复，每个步骤覆盖整个屏幕：间距、色彩、图标、文案、字体、布局、细节、视觉、动效（操作手册 §3 至 §14）。
- 检查：使用操作手册的检查清单，运行检测脚本，与审计结果进行比较（操作手册 §15）。
- 报告：方向定义、每个步骤的简要记录，以及你删除或无法验证的每一处痕迹。
20 个痕迹
包含替换方案的完整表格：references/tells.md。摘要及脚本检测内容如下：
| # | 痕迹 | 脚本检测 |
|---|---|---|
| 1 | 紫色/紫红色/靛蓝色渐变 | 是 |
| 2 | 渐变文字 | 是 |
| 3 | 文案中的 Emoji | 是 |
| 4 | 通篇使用 Inter 或 Space Grotesk 字体 | 否 |
| 5 | 彩色侧边条边框 | 是 |
| 6 | 装饰性毛玻璃效果 | 是 |
| 7 | 低对比度深色模式 | 否 |
| 8 | 三个一排的图标盒子 | 否 |
| 9 | 标题上方的眉毛药丸标签 | 否 |
| 10 | 默认使用 Lucide 图标 | 是 |
| 11 | 未修改的 shadcn/ui | 否 |
| 12 | 滚动进入时的淡入动画 | 是 |
| 13 | 跟随鼠标的发光效果 | 否 |
| 14 | 按钮悬停时的淡出效果 | 是 |
| 15 | 不一致的间距 | 否 |
| 16 | 文案中的长破折号 (—) | 是 |
| 17 | 噱头文案 | 是 |
| 18 | 衬线字体斜体的强调词 | 否 |
| 19 | Space Grotesk 与其常见显示衬线字体的搭配（组合见 references/tells.md） | 是 |
| 20 | 在渐变上添加噪点纹理 | 否 |
检测器
node <skill folder>/scripts/detect-tells.mjs [--json] [--include-tests] <paths...>
零依赖，需要 Node 20 或更高版本，无此技能文件夹外的导入，因此即使单独安装此技能也能工作。退出码：0 表示干净，1 表示有发现，2 表示用法错误。它会跳过 node_modules .git .next dist build .open-next coverage 和测试文件。报告格式为 path:line #tell label match。限制值列在 references/tells.md 结尾处；将命中视为“查看此处”的提示。
项目中的棘轮测试
棘轮测试会固定当前的痕迹数量，并在数量增加时使测试失败，从而确保痕迹只会减少。以下是 node:test 的示例代码（适配路径和基线值）：
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync, globSync } from 'node:fs'; // globSync 需要 Node 22；在 Node 20 上需要自行遍历文件夹
import { detectTells } from './.agents/skills/anti-slop/scripts/detect-tells.mjs';
const BASELINE = { 10: 8, 5: 1 }; // tell number -> allowed findings today
test('no new vibe-coded tells', () => {
const files = globSync('{app,components}/**/*.{ts,tsx,css}').map((path) => ({ path, text: readFileSync(path, 'utf8') }));
const now = {};
for (const f of detectTells(files)) now[f.tell] = (now[f.tell] ?? 0) + 1;
for (const [tell, n] of Object.entries(now)) assert.ok(n <= (BASELINE[tell] ?? 0), `tell ${tell}: ${n} findings, baseline ${BASELINE[tell] ?? 0}`);
});
每当修复一个痕迹时降低基线值；切勿提高它。
故事视频
一个大约 10 秒的方形剪辑，展示屏幕如何逐步消除 AI 痕迹并带有红线标记。仅在被要求时才制作。完全按照 unslop 的“故事视频”部分所述构建故事文件（references/vendor/unslop/unslop.md：一个 story.html， .s1 到 .s5 的 CSS， data-gap、data-radius、data-slop、data-swap 属性），然后使用本技能适配的渲染器渲染：
node <skill folder>/scripts/story.mjs unslop-story/story.html unslop-story.mp4 # --wide 用于 16:9，--play 用于预览观看
相对于 unslop 渲染器增加的内容：
- 可访问性步骤。 一个名称中包含 Accessibility 的步骤会显示实时测量结果。在 2 到 4 个对比度会变化的文本元素上放置
data-contrast属性；每个元素会显示其 WCAG 比率，低于 4.5:1（大文本为 3:1）时显示红色，通过后显示白色并带AA标签，当颜色无法读取（如lab()或color(display-p3 ...)) 时显示灰色?：请在这些元素上使用 sRGB、十六进制或oklch()颜色。在 1 到 2 个控件上放置data-target属性；每个控件会显示其尺寸，小于 24x24 像素时显示红色。选择在“之前”状态中不合格的元素；切勿标记在“之后”状态中仍不合格的元素。 - 字幕，
<meta name="story-caption" content="...">，显示在左下角。仅陈述关于本次运行的真实信息，例如使用的模型以及屏幕未经手动编辑。 - 署名
molveau/skills · unslop method by @heydamir会绘制在每一帧上，这是 unslop 的 CC BY 4.0 许可的要求。请勿删除。
故事是对真实文件的演示：第 0 步是原始的“之前”状态，最后一步等同于你交付的干净文件。请不要将故事打磨得超出交付的屏幕质量。
何时阅读什么
| 需求 | 阅读 |
|---|---|
| 合并后的规则、值和冲突处理 | references/playbook.md |
| 20 个痕迹及其替换方案和检测器的限制 | references/tells.md |
| unslop 的完整方法、方向、九个步骤、检查清单、故事视频 | references/vendor/unslop/unslop.md |
| 精确值（间距、字号层级、色阶、动效曲线） | references/vendor/unslop/unslop/references/tokens.md（其动效值已被覆盖：ui 操作手册 §10 和 motion §5 优先，操作手册冲突 19 条） |
| 审计用的标志列表 | references/vendor/unslop/unslop/references/signs.md |
| 英雄视觉、图片提示、哪些风格有效 | references/vendor/unslop/unslop/references/visuals.md |
| 字形、半色调、抖动和双色调代码 | references/vendor/unslop/unslop/references/effects.md |
| 完成的参考屏幕（图片） | references/vendor/unslop/unslop/references/refs.md |
| 为处理副本而截取一个实时 URL | references/vendor/unslop/unslop/scripts/snapshot.mjs |
| 从零开始的页面或深度重新设计：清单、处理后的方向定义、创意、内部规则、门控 | references/vendor/taste/taste-skill.md |
| 仪表盘、管理和设置屏幕深度指南 | references/vendor/taste/taste-skill/references/app-screens.md |
| 文案甲板、两行算账、无需编造的验证 | references/vendor/taste/taste-skill/references/copy.md |
| 字号层级、展示设置、字体加载 | references/vendor/taste/taste-skill/references/type.md |
| 调色板角色、字段、深色页面、对比度 | references/vendor/taste/taste-skill/references/colour.md |
| 外边距、空白空间、框线、分区、移动端 | references/vendor/taste/taste-skill/references/layout.md |
| 查找、署名、放置和处理图片及视频 | references/vendor/taste/taste-skill/references/imagery.md |
动效配方（可选：motion 操作手册 §9）和滚动场景 | references/vendor/taste/taste-skill/references/motion.md、references/vendor/taste/taste-skill/references/scenes.md |
| 用量表评判结果 | references/vendor/taste/taste-skill/references/critique.md |
| 按时期划分的过时痕迹注册表 | references/vendor/taste/taste-skill/references/tells.md |
| taste 数据背后的研究 | references/vendor/taste/taste-skill/references/research.md |
供应商文件保留了其上游布局，因此其中的一些相对链接可能在此处无法解析。taste-skill 的脚本读取其 library/ 文件夹（不要整体读取；运行 draw.mjs）；某些脚本需要 Node 22、浏览器、Playwright、ffmpeg 或网络访问。运行哪些视觉检查由 ui 操作手册中的冲突 14（本操作手册的冲突 14 指向此处）决定。