unslop-ui

unslop-ui

请先阅读此内容，因为最常见的误解会让整件事功亏一篑。

这项技能不会为你带来好的设计，也没有偏好的风格。 它只做两件范围明确的事：去除那些让网站看起来像是由 AI 生成的特定特征，并在模型原本会采用默认方案时，强制做出审慎且符合项目实际情况的选择。品味、品牌和布局判断仍由你负责。防护机制不是设计师。

要避免的陷阱（这正是重点）

所有反套路设计努力都会遇到同一种失败模式：用一种默认风格取代另一种。2024 年的明显特征是深色主视觉区域上的紫蓝渐变。2026 年的明显特征则是温暖的奶油色背景、衬线展示字体（Instrument Serif、Fraunces），以及鼠尾草绿或森林绿点缀色——这是 Claude/Anthropic 当前的品牌风格。把前一种换成后一种并不算去套路化。它只是重置了周期，而人们同样会很快看出端倪。

因此，这项技能绝不指定配色、字体或布局。指定这些东西，正是让你成为明年套路的原因。它的做法是：识别默认方案（旧的和新的），并要求任何替代方案都必须是用户或项目实际做出的具体选择，而不是模型最可能想到的下一个猜测。这里唯一通用的规则是“审慎做出选择，并能说明理由”，而默认方案永远做不到这一点。

如果用户确实出于品牌决策而想用紫色、霓虹色、衬线字体或奶油色背景，那就不属于套路，这项技能会予以保留。问题在于未指定的默认方案，而不是某种被禁用的颜色。对于任何有意做出的选择，请遵循 unslop-ignore（参见审计模式）。

这与内置的 frontend-design 技能有何不同

Claude 已经内置了 frontend-design 技能，而且它很不错，但它会生成奶油色 + 衬线字体 + 绿色的品牌风格，而这正是这项技能现在标记为明显特征的风格。unslop-ui 与之互补，并增加了它所不具备的三项功能：可在 CI 中运行的确定性扫描器（退出代码可控制构建是否通过）、基于数据的优先级排序，让精力用在真正的投诉上，以及针对新的“雅致默认风格”进行明确检查，避免把一种套路包装成另一种套路。两者都用。让设计技能负责构建，让这项技能负责把关。

模式 1：构建（最重要）

大多数“看起来像 AI 生成”的结果，问题出在规格说明，而不是样式。没有明确要求的提示词，只会得到训练数据中的中位结果，而每个人的中位结果都一样。因此，在生成任何 UI 之前，先确定设计简报。要么向用户了解，要么在用户没有提供时，说明你做出的选择及其原因，然后继续。不要悄悄退回默认选项。

具体明确以下内容：

• 参考对象。 一个真实网站、截图、品牌或产品，作为设计语言的参照。这一项的影响胜过其他所有规则的总和。如果用户有参考对象，就以此为准。如果没有，就询问或选定一个具体且有名称的方向（编辑风、粗野主义、实用主义密集风、温暖消费风、技术单色风等），而不是毫无意义的“现代简洁”。
• 颜色选择。 明确选用真实的品牌色，或有意挑选一种颜色。不要用框架默认色，也不要用米色／鼠尾草绿默认色。
• 字体选择。 为这个项目挑选具体字体或字体组合，并说明理由。避免不假思索地选择排名前 50 的默认字体（无衬线字体中的 Inter、Geist；“雅致”风格中的 Instrument Serif、Fraunces、Playfair），除非这些确实是经过考虑的选择。
• 布局意图。 明确页面的实际用途，以及用户首先应该做什么，这决定了页面结构。这样才能避免“主视觉区 + 三张卡片”的骨架：结构应服务于目标，而不是套用模板。

如果用户没有提供设计简报，只想让你直接构建，不要产出一个平庸的中位结果。要有意做出选择并说明，或者提供两三个真正不同的方向。打破单一化才有价值，因此要有意识地偏离中心。

然后，在构建过程中，避免 references/tells.md 中提到的具体迹象。references/choosing-a-look.md 介绍了如何有意做出颜色／字体／布局选择。这是一套方法，而不是规定，正是为了避免它成为下一个默认选项。

模式 2：审查（护栏）

审查或清理现有代码，或者用户询问“这看起来像 AI 生成的吗”“去掉粗制滥造感”“别让它看起来像凭感觉拼出来的代码”时，先运行扫描器，再按优先级修复。

python3 scripts/devibe_scan.py <path>                 # full report + vibe score
python3 scripts/devibe_scan.py <path> --severity high # only the strongest signals
python3 scripts/devibe_scan.py <path> --json          # machine-readable, for CI

它会扫描 .html .css .scss .js .jsx .ts .tsx .vue .svelte .astro 文件，报告每项发现及其文件、行号和修复方法，并给出氛围评分。退出代码就是高严重性问题的数量，因此 CI 可以据此进行拦截。扫描器能发现机械性的迹象（颜色、字体、渐变、米色 + 衬线字体的组合）。它无法识别布局是否协调、间距是否一致，或文本是否溢出容器；这些同样会让网站显得像 AI 生成的。因此，扫描后要对照目录，亲自检查这些方面。

尊重有意为之的选择。 带有注释 unslop-ignore 的行会被跳过。如果某个被标记的值是经过考虑的选择，就使用它，让审查结果保持可信，也避免工具对选定的品牌色反复提示。

正确修复。 不要把 bg-purple-600 换成 bg-emerald-700，这只是换成了另一个默认值。应使用项目的实际颜色，或询问应该用什么颜色。引入新的未指定默认值，不算修复。

本工具有意不标记的内容

依据数据，而非感觉。网格、极光和 blob 背景几乎不会引发真实投诉（大多只是关键词造成的假象）。Bento 网格和玻璃拟态的使用率较低，评价也有争议。深色模式本身没有问题；只有未经要求就添加的光晕才是迹象。shadcn 和 Tailwind 本身没有问题；问题在于未经修改的默认值。过度标记会让人们忽略工具，因此扫描器会保持克制。

提交审计报告

先给出结论和影响最大的一项改动。然后按优先级列出发现的问题，注明文件:行号和修复方法。最后给出氛围评分和最重要的三项改动。表达简洁、具体。目标是让网站看起来像是有人做出了决定，而这是扫描器无法替他们完成的唯一一件事。