nyrthoughts/anti-slop-ui

anti-slop-ui 是做什么的？

一个用于Claude Code、Codex CLI和Cursor的技能，它能审计UI中AI生成的痕迹，并按有序的递进步骤进行修复。它不会从头重新设计，而是利用现有元素，使其看起来经过深思熟虑。

何时使用

用户要求你对看起来像是AI生成的屏幕、页面或组件进行清理、去AI味、打磨或润色。或者用户指着某个文件、目录或URL说它看起来太通用/太默认/像是vibecoded出来的。

工作流程

步骤1: 读取设计方向

在项目根目录中查找 DESIGN.md，然后在 templates/ 目录中查找。如果存在，则加载它。后续所有决策都必须与其保持一致。如果不存在 DESIGN.md，请告知用户，并在继续前主动提出一起填充一个。必须先确定设计方向，不得跳过此步骤。

步骤2: 审计

扫描目标（文件、目录或渲染后的页面）。列出你找到的所有AI痕迹，并按类别分组。使用此清单：

• 紫蓝色渐变、发光、色块
• 默认字体（Inter/Roboto/system）且无字阶
• 每个标题上方都有大写字母、字间距加宽的眼眉文字
• 标题中有一个词被着色、设为斜体或渐变
• Emoji被用作图标
• 卡片汤：同样的圆角、同样的阴影、卡片套卡片
• 居中英雄区加三个功能卡片布局
• 空洞的文案：“Supercharge”、“Unlock”、“Welcome back”、感叹号
• 虚构的数据、Logo、用户评价
• 带有✨表情符号的“新品”徽章、脉冲圆点
• 在非加载器上使用 transition-all、animate-pulse，卡片上使用 hover:scale
• 任意间距（mt-[13px]、gap-[11px]）
• 装饰性的 01/02/03 编号、中点分隔符、每个CTA上的箭头
• 替代性陈词滥调（米色+衬线体+赤陶色；黑色+酸绿色）
• 缺少空态/加载态/错误态，在375px宽度以下布局崩溃

对于每个发现，记录文件名和行号（如果来自URL则记录选择器）。

步骤3: 提出设计方向

撰写一个简短的设计方向（3-5行），回答以下问题：

1. 这个产品是什么（一句话）。
2. 性格——一个形容词，不能是“干净”、“现代”或“简约”。
3. 强调色——一种颜色，来源于产品或品牌，而不是来自某种趋势。
4. 标志性细节——一个微小的、具体的、只有这个产品才会有的东西。

向用户展示这个设计方向。在编辑任何代码之前，请等待用户批准。 如果用户修改了一些内容，请更新设计方向并再次确认。

步骤4: 有序修复

按照此顺序应用修复。在开始下一个阶段前，必须完成当前阶段。每个阶段完成后，简要记录更改了什么。

阶段 1: 间距

• 用最接近的4px网格步长替换任意值（mt-[13px]）。
• 将间距标准化为项目使用的比例（Tailwind默认值或 DESIGN.md 中的比例）。
• 确保容器内的内边距保持一致。

阶段 2: 色彩

• 移除渐变、发光、色块、彩色阴影。
• 应用 DESIGN.md 中的中性色阶（或者推导出一个：单一色调的灰色）。
• 仅对交互元素应用设计方向中确定的强调色。
• 检查文本对比度：正文最小 4.5:1，大号文本最小 3:1。

阶段 3: 图标

• 用项目使用的图标家族（默认：Lucide, 16-18px, stroke 1.5）替换表情符号。
• 从文本内容中移除装饰性的表情符号。
• 确保整个项目使用统一的图标家族。

阶段 4: 文案

• 移除夸张词汇：“Supercharge”、“Unlock”、“Seamlessly”、“Effortlessly”、“AI-powered”、“Revolutionize”、“next-generation”。
• 从UI文本中移除感叹号。
• 移除带有挥手表情符号的“Welcome back”。
• 将“Learn more” / “Get started”这类CTA替换为特定于该操作的动词+结果。
• 移除虚构的数据、Logo、用户评价。用真实数据替换或删除该区域。
• 移除“新品”徽章，除非该功能是在过去一周内上线的。

阶段 5: 排版

• 设置 DESIGN.md 中指定的字体（或设计方向中选择的字体；永远不要默认使用Inter）。
• 固定字重：正文 400、强调 500、主要操作最多 600。
• 标题中不使用斜体。不使用大写字母、加宽字间距的标签（移除 uppercase tracking-widest）。
• 应用一致的字阶。对数据使用 tabular-nums。

阶段 6: 布局

• 打破出现的居中英雄区加三张卡片的模式。
• 移除卡片嵌套。如果卡片还存在，则改变卡片大小。
• 应用嵌套圆角规则：内层圆角 = 外层圆角 - 内边距。
• 检查布局是否在375px、768px和1280px宽度下正常工作。

阶段 7: 状态与移动端适配

• 为每个依赖数据但缺少空态的组件添加空态。
• 在获取数据的地方添加加载骨架屏。
• 在API调用可能失败的地方添加错误态。
• 验证在375px宽度下没有内容溢出或折叠。

阶段 8: 动效

• 将 transition-all 替换为特定的属性（transition-colors、transition-opacity、transition-transform）。
• 移除不是骨架屏加载器的元素上的 animate-pulse。
• 移除卡片上的 hover:scale。
• 为项目设置一条缓动曲线（默认：cubic-bezier(0.22, 1, 0.36, 1)）。
• 设置一次加载时的入场动画：透明度加小幅translateY，持续时间200-300ms，仅一次。

步骤5: 自我检查

在所有阶段完成后，重新执行步骤2中的审计清单。如果仍有任何痕迹存在，请修复它，或向用户解释保留的原因（例如：“这个渐变是实际的品牌色，已在 DESIGN.md 中确认”）。

向用户确认：更改了哪些内容、发现了多少痕迹、修复了多少，以及任何保留的痕迹及其原因。

规则

• 绝不用一种陈词滥调替换另一种。如果某个修复引入了米色+衬线体+赤陶色，或黑色+酸绿色，请回退该修复，并尝试从产品本身推导出的方案。
• 绝不编造内容。不要添加看起来真实的虚假数据、Logo、用户评价或占位名称。
• 一次只做一个更改，一次只做一个阶段。不要超前进行。
• 尊重现有的设计系统。如果项目使用带有特定Token的组件库，请使修复适应这些Token，而不是覆盖它们。
• 在编辑代码之前，始终等待用户批准设计方向。

致谢

此技能综合了开源设计技能社区的理念。这是原创作品；以下来源中没有复制任何文本。

灵感来源：

• Unslop by Damir Sokolovsky (CC-BY-4.0) —— 分阶段工作流程和多个痕迹类别（间距网格、图标一致性、文案禁令、动效规则）均改编自 Unslop 的方法。依据 CC-BY-4.0 许可：归功于 Damir Sokolovsky，原版在 https://github.com/heydamir/unslop，采用 CC-BY-4.0 许可。
• Impeccable by Paul Bakaus (Apache-2.0) —— 先审计的方法和确定性检测概念。
• frontend-design by Anthropic (Apache-2.0) —— 陈词滥调目录（米色+衬线体、黑色+绿色、大写眼眉文字）。
• Hallmark by Nutlope / Together AI (MIT) —— 基本规则和在多种宽度下测试的想法。
• Taste Skill by Leonxlnx (MIT) —— 严格禁止装饰性编号和细线。
• ai-design-skills by elayadesign (MIT) —— 数值规则方法和字体禁令。
• 本仓库中 docs/ai-tells.md 的15种痕迹目录。