# AI Slop 反模式清单

> **一千个 no 换一个 yes。** 下面每一条都是一看就是 AI 生成的信号。
> 每条给出：❌ 反模式 → ✅ 替代方案 → 📝 原因

---

## 一、视觉风格类

### 1. 紫蓝/粉紫渐变背景
- ❌ `background: linear-gradient(135deg, #667eea, #764ba2)`
- ✅ 纯色或低饱和背景；如需渐变，使用 oklch 在邻近色域内小范围过渡
- 📝 这种渐变是 2018 年 Stripe/Dribbble 风过度复制的结果，已烂大街

### 2. 圆角卡片 + 左边 4px 彩色 accent
- ❌ `border-left: 4px solid #6366f1; border-radius: 8px`
- ✅ 纯背景色区分、底部细横线、完全无修饰（靠留白与层级）
- 📝 这是 Notion / Linear 的复刻过度泛化，失去区分度

### 3. 用 SVG 自己画插画 / 吉祥物 / 场景图
- ❌ inline SVG 画人物、风景、产品
- ✅ 用 placeholder（灰框 + 尺寸标注 + 文字说明），问 Jane 要真素材
- 📝 AI 画的 SVG 插图线条生硬、比例错乱，破坏整体品质感

### 4. 过度使用 emoji
- ❌ ✨ 全场飞舞 / 🚀 文案开头 / 📊 icon 替代
- ✅ 仅在品牌明确使用 emoji 时才用；否则 0 emoji
- 📝 emoji 几乎永远让设计显得轻浮、幼稚

### 5. 玻璃拟态（glassmorphism）无节制
- ❌ 每个 card 都 `backdrop-filter: blur(20px)` + 半透明白
- ✅ 只在确实需要层次感时局部使用；背景必须够复杂才撑得起
- 📝 已经是 2021 年的 overused 风，且对比度常不达标

### 6. 炫酷但无意义的 3D / 立体装饰
- ❌ 漂浮的 3D 几何体、抽象圆球、伪 3D 按钮
- ✅ 平面 + 留白 + 排版节奏解决层次
- 📝 堆砌视觉噪音，不承担信息功能

---

## 二、字体类

### 7. 默认字体陷阱
- ❌ Inter / Roboto / Arial / system-ui / Fraunces / Poppins
- ✅ 根据品牌调性选有特征的字体：
  - 编辑类 / 故事类 → GT Alpina、Tiempos、Söhne、Untitled Sans
  - 科技 / 工具类 → JetBrains Mono 做点缀、Suisse Int'l、Neue Haas Grotesk
  - 艺术 / 情绪类 → PP Editorial New、Reckless、Authentic Sans
  - 中文优先 → 思源宋体、思源黑体、AaYuHei、鸿雷系列
- 📝 Inter/Roboto 是"安全牌"但辨识度为零

### 8. 字重堆叠无章法
- ❌ 同一页面 300/400/500/600/700 全用
- ✅ 最多 2–3 档（通常 Regular + Bold，必要时 Medium）
- 📝 字重混乱 = 视觉失控

### 9. 过度斜体 / 花体
- ❌ Pacifico / 手写风做主标题
- ✅ 靠排版节奏、字号对比、大小写创造重点
- 📝 花体除非品牌特色，否则廉价感极强

---

## 三、版式 / 布局类

### 10. Hero → 三栏功能 → CTA → 页脚 万能模板
- ❌ 所有落地页都是同一个套子
- ✅ 先问"这页承担什么任务"，再反推结构
- 📝 套模板 = 零差异化

### 11. 所有 section 背景色交替（白 / 浅灰 / 白 / 浅灰）
- ❌ 机械交替显得像 PPT 模板
- ✅ 用 1–2 种背景色，大部分纯色，在关键节点才切
- 📝 AI 默认节奏，不服务内容

### 12. 每个功能点配一个 icon
- ❌ 功能 × 3–6 个 + 各自小图标 in 一排
- ✅ 只在有真正视觉区分作用时用；否则纯文字
- 📝 icon slop 让页面信息密度下降

### 13. 信任标记满天飞
- ❌ "1000+ 客户" / "ISO 27001" / 客户 logo 墙
- ✅ 只展示真实可验证的信任信号，且放对位置
- 📝 虚假可信度装饰

### 14. 每张卡片一样大
- ❌ 3×3 网格，每格同尺寸同层级
- ✅ 按内容重要性分级排版（Bento grid、不等分 grid）
- 📝 平均化 = 无重点

---

## 四、内容 / 文案类

### 15. Placeholder 名字 / 评价 / 数据
- ❌ "Sarah J. — CEO at TechCorp" + 5 星
- ✅ 留白或 "[客户证言待补]" placeholder
- 📝 虚假社交证明廉价且违反诚信

### 16. 虚构统计数字
- ❌ "效率提升 300%"、"用户增长 10x"
- ✅ 只用真实数字，否则不用
- 📝 AI 发明的数字一眼假

### 17. 填充式段落
- ❌ 每个 section 都塞 3–4 句描述
- ✅ 留白、大字、一句话说清、其余靠视觉
- 📝 AI 倾向于"写满"，好设计倾向于"写少"

### 18. 无意义副标题
- ❌ 主标题 + 一行"温和解释的副标题"
- ✅ 要副标题就让它承担真实信息，否则去掉
- 📝 副标题不是标配

### 19. 感叹号 / 问号狂魔
- ❌ "Make it yours today!" / "Why wait?"
- ✅ 陈述式、自信的文案
- 📝 销售感太强 = 廉价感

---

## 五、交互 / 动效类

### 20. 首屏无脑淡入 + Y 轴位移
- ❌ 所有元素 `opacity: 0 → 1, translateY(20px → 0)` 一齐
- ✅ 有意图的 staged 动画（先主后次），或完全不要
- 📝 默认模板动画，毫无记忆点

### 21. Hover 全部 scale(1.05) + shadow 增强
- ❌ 所有可交互元素同一行为
- ✅ 不同层级用不同反馈（颜色变化 / 细线条移动 / 内部细节显露）
- 📝 单调

### 22. Scroll 视差 用来用去
- ❌ parallax 每一层
- ✅ 只在关键一两个 section 用，其他保持静态
- 📝 性能差 + 晕

### 26. 永不用 scrollIntoView

- ❌ `element.scrollIntoView({behavior: 'smooth'})`
- ✅ 手动算偏移后 `window.scrollTo({top, behavior: 'smooth'})`
- 📝 scrollIntoView 会搞乱 iframe 父窗口的滚动位置，在嵌入 host 的场景里会崩。用替代方法更稳。

---

## 六、色彩类

### 23. 饱和度拉满
- ❌ #FF0000、#00FF00 等屏幕纯色
- ✅ oklch 在舒适亮度区间调色；参考实体印刷色板
- 📝 AI 默认色杂乱刺眼

### 24. 无限延伸的新色
- ❌ 每个组件都发明一个新颜色
- ✅ 严格 5–7 色（primary、neutral 3 级、semantic 2 色）
- 📝 色盘失控 = 品牌感崩溃

### 25. 深色模式 = 直接反色
- ❌ 把浅色模式全部反过来就当深色
- ✅ 深色模式重新设计 contrast、hierarchy、color weight
- 📝 deeper is not darker

---

## 自检流程

输出 HTML 前，用这份清单走一遍：

1. 打开文件
2. 对照 1–26 条，中任意一条 → 改
3. 改完再开一次 Grep：`grep -E "linear-gradient|border-radius.*border-left|Inter|Roboto|🚀|✨|scrollIntoView"` 看还有没漏

**全部过关 → 才算交付。**

---

## 七、内容密度原则（正面立场）

前面 26 条是"不要做什么"。但只有禁令不够。做设计需要一个主动原则：

### 每个元素必须 earn its place

往页面里加任何一个东西之前，问自己：
- 这个 section 承担什么任务？
- 这个 icon 有真实区分作用吗，还是装饰？
- 这个数字是真的，还是为了"看起来专业"编的？

**答不出来 → 删掉。**

### 不填充式思维

空白不是"设计问题"，是"节奏"。一个 section 觉得"太空了"，正确做法是：
- ✅ 调整周围元素的视觉重量，让空白有呼吸感
- ❌ 往里塞 lorem ipsum / 虚构数据 / 通用 icon

### icon 不是默认配件

很多"专业感"的页面其实是 icon 堆出来的。但 icon 堆多了恰恰显得没信息。规则：
- ✅ 有真实语义区分（比如状态指示、类别标记）才加
- ❌ 纯装饰、为填充而加 → 纯文字更干净

### 遇到内容缺口先问用户

想到"加一个客户 logo 墙会更可信"——先问用户："你有真实客户 logo 吗？没有就不加。"

AI 发明的"可信信号"是假的，但假的痕迹读者一眼看得到。