Zack Anti Ai Look

---
name: zack-anti-ai-look
description: "诊断并消灭界面的「AI 味」——那种一眼就能看出是模板生成、廉价、没有判断的观感。包含一套可执行的扫描清单、严重度分级、修复优先级和前后对照。当用户说「看起来像 AI 做的」「很土」「不高级」「廉价」「一眼假」，或要求新建落地页/官网/作品集时使用。这是设计类任务的起点技能。"
license: MIT
metadata:
  author: Zack
  homepage: https://github.com/yckonnnnn/zack-design-skills
  version: "1.0.0"
---

# 消灭 AI 味

## 核心判断

「AI 味」不是风格问题，是**统计回归问题**。

模型在生成界面时会回到训练数据里最高频的那个解：居中的 hero、紫蓝渐变、三张等宽卡片、`rounded-2xl`、`shadow-lg`、"赋能企业级智能体"、Inter 字体。每一项单独看都不算错，**叠在一起就成了一种可以一眼识别的平均值**。

所以修复方向不是「做得更花」，而是三条：

1. **打破均匀** —— 平均值之所以是平均值，因为处处等量。制造不等量：大小、疏密、轻重。
2. **建立判断** —— 每一个选择都要能回答「为什么是这个值，不是别的」。答不上来就是默认值，默认值就是 AI 味。
3. **说人话** —— 空话是 AI 味最便宜的信号，也是最容易修的。

**关键洞察：AI 味不能靠「加东西」修掉。** 加更多动效、更多渐变、更多图标，只会变成「花哨的 AI 味」。真正的修法是**删掉默认值，让每一个留存的元素都有理由**。

---

## 第一步：60 秒扫描

在动任何代码之前，先按这个顺序看。前 3 项命中任意一条，优先级高于后面全部。

| 顺序 | 看什么 | 一眼判死 |
|---|---|---|
| 1 | 首屏标题在桌面端占几行 | ≥ 3 行 → 容器太窄或字号没设计 |
| 2 | 有没有渐变文字或紫蓝渐变背景 | 有 → 2024 年模板签名 |
| 3 | 首屏第一句话在说什么 | 说不出「你是干嘛的、给谁用」→ 直接劝退 |
| 4 | 数一下页面上有几个字号 | > 6 个 → 没有系统 |
| 5 | 数一下有几种颜色在承担强调 | > 1 种 → 没有重点 |
| 6 | 每一屏的上下留白是否一样 | 是 → 没有节奏 |
| 7 | 三张卡片是否等宽等高 | 是 → 没有层级 |
| 8 | 有没有 `transition: all 0.3s ease` | 有 → 动效没想过 |

---

## 完整诊断清单

`P0` = 直接劝退访客 ｜ `P1` = 明显廉价 ｜ `P2` = 可以更好

完整 60 条可执行清单见 [`references/checklist.md`](references/checklist.md)。以下是最高频的 24 条。

### 排版

| 严重度 | 症状 | 修法 |
|---|---|---|
| P0 | 用 Inter / Roboto / Arial / Open Sans / 默认 sans | 换一个有个性的字：正文用一套可靠的人文 sans 或衬线，展示字用一个有明确骨架的 display 字。**只准用一到两套。** |
| P0 | 标题在 1440px 下超过 2 行（正文列太窄导致） | 给标题单独的最大宽度约束（`max-width: 18ch` 级别），或降字号。标题换行是容器问题，不是字号问题。 |
| P0 | 字号阶梯是等差：16/18/20/22/24 | 改成**比例阶梯**（约 1.25–1.33 倍进一级），拉开极端对比：正文 16–18px，展示字 48–80px，中间甚至可以有断层。 |
| P1 | 显示级大字号没有做负字距 | `letter-spacing: -0.02em` 到 `-0.04em`，字号越大收紧越多。 |
| P1 | 标题行高 1.5、正文行高 1.3 | 反过来：标题 0.98–1.12，正文 1.55–1.7。 |
| P1 | 正文行长超出 75–80 字符 | `max-width: 62ch` 左右。手机端卡片内也需要限制。 |
| P1 | 价格/数据表格数字不齐 | `font-variant-numeric: tabular-nums`。 |
| P2 | 中英混排字重、标点没处理 | 中文用 500 而不是 600 冒充粗体；中西文间留四分之一空隙；标点用全角。 |

### 颜色与表面

| 严重度 | 症状 | 修法 |
|---|---|---|
| P0 | 紫→蓝（→粉）渐变 hero 背景 | 删掉。大面积表面用中性色，颜色留给一个点。 |
| P0 | 渐变文字标题 | 删掉。渐变文字会让小字号可读性塌掉，且是模板签名。 |
| P0 | 三处以上颜色在抢「强调」的位置 | 只留一个强调色，其余降为中性层级。 |
| P1 | 只有白 + 一个灰，没有中性阶梯 | 建 4–6 级中性色阶（例如近白 / 浅 / 中 / 深 / 近黑），用**层级**代替边框去分隔。 |
| P1 | 直接使用框架默认调色板（`indigo-500`、`slate-600` 原值） | 至少把中性色的色相往主色偏 3–8 度，让它有温度而不是死灰。 |
| P1 | 正文 14px + `#6B7280` on 白 | 正文 ≥ 16px，对比度 ≥ 4.5:1。小字浅灰是最常见的廉价信号。 |
| P1 | 大面积纯 `#000` / `#FFF` | 用近黑（如 L\* ≈ 12–18 的暖黑）和近白（偏暖的 off-white）。纯黑白让页面像打印错版。 |
| P2 | 玻璃拟态、霓虹辉光、3D 球体装饰 | 除非有明确理由，删。深度靠极低透明度的发丝边框和超扩散阴影建立。 |

### 布局与节奏

| 严重度 | 症状 | 修法 |
|---|---|---|
| P0 | 每一屏都居中 | 至少让一半的屏左对齐。左对齐是「有观点」的心智捷径。 |
| P0 | 每一屏 `padding: 80px 0` 完全一致 | 制造节奏：密 48px、常规 96px、疏 160px，按信息重要性分配。 |
| P1 | 三张等宽等高卡片 | 改 bento：不等跨、不等高、内容类型不同（一个数字、一个图表、一句引用、一段代码）。 |
| P1 | bento 网格出现空洞（某格空着） | 每一格必须被填满，或把 span 改到刚好。空洞比拥挤更廉价。 |
| P1 | 卡片套卡片套卡片 | 最多两层。第三层改用分隔线或背景色差。 |
| P1 | 全宽 sticky navbar 无条件贴顶 | 要么给理由（长页面导航），要么做成悬浮胶囊并带滚动状态变化。 |
| P1 | 「巨型数字 + 小标签 + 渐变强调」当首屏 | 这是默认解。除非它确实是最适合这个主题的形式，否则换：真图、真界面、真数据、一句话。 |
| P1 | 左右交替（图左文右 → 文左图右）反复出现 | 换成不同**形式**的区块，不是同一形式镜像翻转。 |
| P2 | `100vh` 当 hero 高度 | 用 `100svh` / `100dvh`，否则移动端地址栏会截内容。 |

### 组件与状态

| 严重度 | 症状 | 修法 |
|---|---|---|
| P1 | 所有按钮/卡片都是 `rounded-full` 药丸 | 药丸只给真胶囊语义的东西。容器和卡片用 4–12px 的小圆角。 |
| P1 | 默认重阴影 `shadow-md/lg/xl` | 阴影透明度 < 0.06、模糊半径大幅扩散；或干脆用边框和色阶表达层级。 |
| P1 | 到处是 1px 灰实线边框 | 换成背景色阶差 + 只在需要分隔处用极低透明度发丝线。 |
| P1 | 缺 hover / active / focus-visible / disabled / loading / empty / error | 状态是「有没有想过」的试纸。至少要齐 hover、focus-visible、disabled。 |
| P0 | 没有 `:focus-visible` 样式 | 键盘用户完全不可用。这是缺陷不是风格。 |
| P1 | `transition: all 0.3s ease-in-out` | 见 `zack-motion-taste`。至少指定属性、改缓动曲线。 |

### 文案

| 严重度 | 症状 | 修法 |
|---|---|---|
| P0 | 「赋能」「触手可及」「开启新时代」「引领变革」「让 X 更简单」 | 删。换成「你是谁、给谁、解决什么具体问题、凭什么」。 |
| P0 | 首屏读完不知道你是干嘛的 | 用「为 \[谁\] 提供 \[什么\]，让他们 \[得到什么结果\]」重写。 |
| P1 | 没有任何具体数字 | 有据可查的数字全放上去：价格、延迟、可用性、条数、期限。 |
| P1 | 一次列 8 个卖点 | 只留 3 个最硬的，其余降级到次级区块。卖点数量与说服力成反比。 |
| P1 | 「已被 1000+ 企业信赖」无出处 | 要么给出真实的客户名/行业，要么删。编造的社会证明是负资产。 |
| P2 | 五条结构相同的五星好评 | 换成 2–3 条有具体细节的，带真实身份。 |
| P1 | `FEATURE 01` / `SECTION 02` 这类元标签 | 删。它是填充物，不提供信息。 |

---

## 修复顺序（不要跳）

1. **先说人话。** 改首屏那句标题和文案。这一步零成本，收益最大。
2. **删默认值。** 渐变、重阴影、药丸、emoji、元标签。只删不加。
3. **建系统。** 字号阶梯、中性色阶、间距尺度。三张表定下来，后面才有依据。
4. **造对比。** 打破居中、打破等宽、拉开字号极端对比和留白节奏。
5. **补状态。** hover / focus / disabled / loading / empty。
6. **最后才动效。** 动效是锦上添花，前面没做完时加动效只会放大廉价感。

**自检问题**：如果把你页面上的 logo 换掉，能认出这是谁做的吗？认不出，就还是一眼 AI。

---

## 前后对照（真实改法）

**改前**
> 紫蓝渐变全屏 hero，居中，标题「赋能企业级智能体，让 AI 触手可及」占 4 行，副标题「开启智能新时代」，两个药丸按钮「了解更多」「立即体验」，下方三张等宽卡片带 🚀✨🔥 图标，`rounded-2xl shadow-lg`。

**改后**
> 暖白底，左对齐。标题两行：「把你的模型调用，统一成一个接口。」副标题一句实话：「一个 key 接 40+ 模型，用量、额度、账单在一张表里对齐。免费额度 200 万 token。」右侧是真实的用量面板（SVG 画的面积图 + 密钥表 + 延迟折线），不是插画。强调色只有一个琥珀色，用在「200 万 token」和主按钮上。下面不是三张等宽卡片，是 bento：一个大格放实时延迟图，一个小格放一个数字「平均 P95 延迟 380ms」，一个窄格放一段可直接复制的 `curl` 代码，一个横格放一句客户原话。

**差异清单**

| 维度 | 改前 | 改后 |
|---|---|---|
| 对齐 | 全部居中 | 左对齐为主 |
| 颜色 | 渐变 + 3 个强调色 | 中性 + 1 个强调色 |
| 标题 | 4 行、含糊 | 2 行、具体 |
| 视觉 | 插画/空 | 真实产品界面 |
| 布局 | 3 张等宽卡 | bento 不等跨 |
| 文案 | 抽象名词 | 具体数字与动作 |
| 深度 | `shadow-lg` | 发丝线 + 色阶 |

---

## 绝对禁止清单

违反任意一条，产出即不合格：

- ❌ 渐变文字（`background-clip: text`）
- ❌ 紫→蓝 / 紫→粉的大面积渐变背景
- ❌ Inter / Roboto / Arial / Open Sans 作为唯一字体
- ❌ emoji 当图标
- ❌ `FEATURE 01` / `SECTION 02` / `STEP 03` 元标签
- ❌ 三张完全等宽等高的卡片当唯一版式
- ❌ 编造客户名、编造数据、编造评价
- ❌ 只交付 hover，没有 `:focus-visible`
- ❌ 用 `transition: all`
- ❌ 交付时不说自己改了什么

---

## 相关

- 首屏与价格页的具体做法 → `zack-hero-and-pricing`
- 字号阶梯、色阶的具体数值 → `zack-typography-and-color`
- 留白与网格的具体数值 → `zack-layout-and-rhythm`
- 改版任务的完整流程 → `zack-redesign-audit`
- 文案重写模板 → [`references/copy-rewrite.md`](references/copy-rewrite.md)
- 8 个基础状态 + 10 个进阶状态的补法 → [`references/state-design.md`](references/state-design.md)