AI Slop 反模式

7 大禁忌模式

以下模式在任何由 AI 编码代理生成的 UI 中均被严格禁止：

描述：将 Inter 或 Roboto 作为所有文本的主字体。这些字体被过度使用，缺乏品牌辨识度。

检测：在生成的 CSS 中搜索 font-family: Inter 或 font-family: Roboto。

修复：使用 Geist、Plus Jakarta Sans 或其他有辨识度的字体作为主字体。

描述：from-purple-500 to-blue-500 的渐变 screaming "AI-generated"。

检测：正则表达式匹配 from-purple + to-blue 或类似的渐变模式。

修复：使用 --color-primary 或设计系统中的纯色。

描述：在 rounded-xl 卡片内再放 rounded-xl 卡片，形成俄罗斯套娃效果。

检测：检查具有 border-radius 类的多个嵌套元素。

修复：只使用一层圆角。内部元素应平坦或最小程度圆角。

描述：没有色相的文本颜色（例如 #000000、#808080）。

检测：检查精确的黑色/灰色十六进制值或 oklch(0 0 0)。

修复：使用带有微妙色相的中性色（例如 oklch(0.52 0.012 262) 用于弱化文本）。

描述：带有 bounce 或 elastic 缓动的动画，感觉不专业。

检测：搜索 bounce、elastic 或弹簧动画配置。

修复：使用 ease-out 或 cubic-bezier(0.4, 0, 0.2, 1)。

描述：在深色背景上带有 text-shadow 发光效果的文字。

检测：在深色主题上搜索带有发光/模糊值的 text-shadow。

修复：移除发光效果。使用具有合适对比度的纯色。

描述：在每个章节标题上方放置圆角方形图标容器（rounded-lg bg-primary/10）。

检测：检查直接位于标题元素之前的图标容器。

修复：将图标与标题内联，或完全省略图标。

除了 7 大禁忌模式外，还需检查：

# 检测源代码中的 AI Slop
npx impeccable detect src/ --fast

# 输出 JSON 用于 CI 集成
npx impeccable detect src/ --fast --json

CLI 使用确定性规则（正则表达式 + AST 分析）来捕获 7 大禁忌模式，无需 API 密钥。

# .github/workflows/design-check.yml
- name: Detect AI Slop
  run: npx impeccable detect src/ --fast --json

注意：在 MVP 阶段，不要在出现警告时使 CI 失败。仅在有确认的 AI Slop 错误时失败。

在代码审查期间，检查：