反AI味设计指南

open-design项目里总结的，原文在：
github.com/nexu-io/open-design/blob/main/craft/anti-ai-slop.md
大概这么几点：

# 反 AI 味输出规则

一组具体、可检查的规则，用来区分“由真正发布过产品的人设计”与“默认 LLM 输出”。下面有几条规则会由 daemon 的 `lint-artifact` linter 自动强制执行——违反这些强制规则不是风格偏好问题，而是回归缺陷。其余规则供 agent 和 reviewer 参考，并会在文中标注为“（指导性规则，不自动检查）”，以便如实反映与 linter 之间的契约。

> 改编自 `refero_skill`（MIT），并收紧以匹配 Open Design 的 lint 覆盖范围。

## 七宗罪

这些是 linter 在 P0 级别拦截的模式，必须修复：

1. **默认 Tailwind 靛蓝色作为强调色**
精确包括：`#6366f1`、`#4f46e5`、`#4338ca`、`#3730a3`、`#8b5cf6`、`#7c3aed`、`#a855f7`。当前的 `DESIGN.md` 会提供 `--accent`，请使用它。靛蓝色是教科书级的 AI 痕迹。（daemon 的 `lint-artifact` 会把这些颜色识别为纯强调色；请确保此列表与 `apps/daemon/src/lint-artifact.ts` 中的 `AI_DEFAULT_INDIGO` 保持同步。）

2. **Hero 区使用两段式“信任感”渐变**
例如紫→蓝、蓝→青、靛蓝→粉。相比之下，纯色表面加上有意图的字体处理通常更好。

3. **用 emoji 作为功能图标**
例如在 ``、``、`

` 或 `class*="icon"` 中使用 ✨、🚀、🎯、⚡、🔥、💡。应改用 `currentColor` 的 1.6–1.8px 描边单线 SVG 图标。

4. **当 seed 绑定了衬线字体时，展示文本仍使用无衬线字体**
`h1` / `h2` 必须使用 `var(--font-display)`，而不是硬编码的 Inter / Roboto / system-ui。

5. **圆角卡片加彩色左边框强调**
这是典型的“AI 仪表盘卡片”形状。要么去掉圆角，要么去掉左边框。

6. **编造指标**
例如“快 10 倍”、“99.9% uptime”、“生产力提升 3 倍”。要么引用真实来源，要么使用明确标注的占位数据。

7. **填充文案**
例如 lorem ipsum、feature one / two / three、placeholder text、sample content。空白 section 是一个需要通过构图解决的设计问题，而不是靠编造文字填满。

## 轻微 AI 痕迹（P1 — 应该修复）

- **标准的 “Hero → Features → Pricing → FAQ → CTA” 顺序，且没有任何变化**
（指导性规则，不自动检查）这是 AI 模板骨架；至少引入一个非惯常 section，例如全出血引用墙、把定价设计成“与现状对比”、或内嵌一个迷你产品 demo。

- **使用外部占位图片 CDN**
例如 `unsplash.com`、`placehold.co`、`placekitten.com`、`picsum.photos`。这既脆弱又明显。使用随项目提供的 `.ph-img` 占位类。

- **在 `:root` 之外使用超过约 12 个原始 hex 色值**
说明没有遵守 token。

- **在渲染后的 body 中使用 `var(--accent)` 6 次以上**
每屏可见使用次数应控制在 2 次以内。

## 打磨层面的 AI 痕迹（P2 — 可优化）

- **section 缺少 `data-od-id`**
评论模式无法定位它们。

- **装饰性的 blob / wave SVG 背景**
（指导性规则，不自动检查）这类几何装饰通常没有实际意义。

- **过于完美对称、没有视觉张力的布局**
（指导性规则，不自动检查）交替使用不同密度的区域，例如一个紧凑 section 搭配一个留白充足的 section，会显得更有意图。

## 如何在不破坏规则的前提下加入“灵魂”

目标是大约 **80% 成熟模式 + 20% 独特选择**。那 20% 应该体现在：

- **一个大胆的视觉动作**
例如字体选择、单一色彩决策，或出人意料的比例。

- **语气和微文案**
按钮写“Start tracking”比写“Get started”更好。

- **一个让用户记住的微交互**
例如按钮按下时移动 2px，或数字递增动画。

- **一个只有真正用过产品的人才会放进去的细节**
例如细微的键盘快捷键提示，或带有产品特定措辞的状态徽章。

如果 reviewer 截一张 artifact 的图，项目外的人也能看出它属于哪个产品——说明它有灵魂。否则，你交付的只是一个模板。

发布于 山东