如何使用 kill-ai-slop 清理 Web 界面中的 AI 垃圾

每次有人通过 Claude 或 Cursor 生成界面时，如果没有明确的设计系统，输出都是相同的模板。紫罗兰渐变、发光的卡片边框、散落在屏幕各处的表情符号、指标计数器中的大写字母，以及角落里的吉祥物。

当机器缺乏品味但需要营造复杂工作的表象时，就会生成这些元素。我们已经对 Product Hunt 和新项目中的这种视觉噪音习以为常，甚至停止注意它。

一个项目 kill-ai-slop 最近在 GitHub 上出现，对这种数字品味缺失宣战。作者汇编了 33 个生成设计的特征标志，将它们组织起来，并编写了一个自动代码清理工具。

一个项目的两个部分

该仓库从两个层面解决这个问题：理论和实践。

一方面，它是一个部署在独立网站上的交互式参考资料。包含 33 个具体的机器设计模式。每个示例都包含纯 HTML 的交互式前后对比演示，展示如何将杂乱的代码块转换为干净的标记。

另一方面，该项目包含一个现成的编码助手技能和一个独立的扫描器。该工具遍历源代码树，识别生成的代码标记，解释根本原因，并建议一个干净的解决方案。

扫描器具体将什么视为垃圾

该项目的数据库不包含抽象的抱怨——所有规则都源于生成模型默认注入到 CSS 和标记中的实际代码片段。

扫描器会查找特征标记：

• 卡片后面模糊的色块和渐变光晕（紫罗兰色调的 blur 效果）
• 每个标题上方无意义的状态徽章
• 到处都是表情符号，而不是正确的排版或矢量图标
• 文案充满企业流行语，如