反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 的图,项目外的人也能看出它属于哪个产品——说明它有灵魂。否则,你交付的只是一个模板。