适用读者：用 AI 生成过界面，但结果"能用又难看"的人；要把设计意图写进提示词的人。
前置：S14-J05（布局）、J07（Vue）、S19-J03（提示词四层结构）。
覆盖旧文：4651–4667（17 篇 / 约 3 万字符：生 UI、视觉层级、留白对齐、克制与预算、状态三件套、习惯用法、控件选择、文案、流程克制、防错可逆、AI 味儿、审美词汇、看设计五步、生图构图、状态机与边界提示词）4663–4667含"别让 AI 发明新交互"。
扩展点：E-S14-026（UI 规格书八要素：AI 能执行的最小描述集）、E-S14-027（视觉三律：层级 / 间距刻度 / 颜色预算）、E-S14-028（"AI 味"的四个来源与消解法）。
上一篇：S14-J07 · Vue 2/3 笔记合并：响应式边界、路由、状态与项目结构
下一篇：S14-X02 · 生态库速查。
1. 一句话结论
AI 生成界面的失败，不是审美失败，是"规格缺失"——用户给的是形容词（"高级感""科技风"），模型只能回归到训练分布的中位数，于是产出"平均值界面"（这就是AI 味）。把形容词翻译成可执行的数字与规则，产出立刻可用。
出处：
A-4651（AI 味来源）、A-4652（视觉层级）、A-4653（留白对齐）、A-4654（克制与预算）、A-4657（生 UI 规格书）、A-4660（状态三件套）、A-4663–A-4667（习惯用法与边界）。
2. UI 规格书八要素（E-S14-026）
# 可直接粘进提示词的规格书
page: 订单列表页
audience: 商家运营，日均操作 200 次，桌面端 1440 宽
hierarchy: # ① 层级：一屏一个主角
primary: 数据表格
secondary: 筛选区、分页
tertiary: 页面标题、面包屑
grid: # ② 栅格与间距刻度（8pt）
columns: 12; gutter: 16; margin: 24
spacing_scale: [4, 8, 12, 16, 24, 32, 48]
type: # ③ 字号与行高预算
h1: 24/32; body: 14/22; caption: 12/18
max_font_families: 2; max_font_weights: 3
color: # ④ 颜色预算
neutral: 6 阶灰; primary: 1; semantic: success/warn/danger 各 1
max_accent_colors: 1
components: # ⑤ 组件与状态
table: 排序/筛选/空态/加载/错误/无权限
actions: 主按钮 1 个、次按钮 ≤2
copy: # ⑥ 文案规则
按钮用动词（"导出订单"）、空态给下一步、错误说原因+怎么修
flow: # ⑦ 流程克制
完成一次核心任务 ≤3 步；破坏性操作需二次确认
a11y: # ⑧ 可访问性底线
对比度 ≥4.5:1；焦点可见；键盘可达
判据：规格书里凡是"不能写成数字或枚举"的项，都不是规格——"现代简约"不可执行，"间距 8 的倍数 + 1 个强调色 + 2 个字族"可执行。
3. 视觉三律（E-S14-027）
3.1 层级：一屏只有一个主角
判定法：眯眼看法（squint test）——模糊后第一眼看到的是否是你想要的主角？
手段：尺寸差 ≥1.5×、字重差 ≥2 档、颜色对比、留白包围（不是加边框）
反例：标题加粗+彩色+阴影+边框（四重强调 = 无强调）
3.2 间距：对齐与刻度
| 规则 | 说明 |
|---|---|
| 统一刻度 | 4/8/12/16/24/32/48，禁止 13px、27px 这类随手值 |
| 亲密性 | 相关元素间距 < 不相关元素（组内 8，组间 24） |
| 对齐优先 | 左对齐列表 > 居中对齐（长文本居中难读） |
| 留白不是浪费 | 内容密度高时靠留白分组，而非加分割线 |
3.3 颜色与字体：做预算
灰阶 6 档管 80% 界面（文字/边框/背景）
强调色 1 个（主色）+ 语义色 3 个（成功/警告/危险）
字族 ≤2（正文 + 等宽）、字重 ≤3（400/500/700）
禁止：渐变滥用、纯黑 #000 正文、纯饱和红作大面积背景
4. "AI 味"的四个来源与消解（E-S14-028）
| 来源 | 表现 | 消解 |
|---|---|---|
| 平均化 | 一切都"还行"：中等圆角、中等阴影、中等对比 | 故意制造差异：主角放大 1.5×、次要信息降灰 |
| 装饰过度 | 到处渐变、玻璃拟态、发光边框 | 装饰只留在 1 处（主视觉），其余全素 |
| 状态缺失 | 只有"有数据"一种状态 | 状态三件套：loading（骨架屏）、空态（引导）、错误态（原因+重试） |
| 习惯违逆 | 自创交互（拖拽排序代替上下移动、自定义下拉替代原生） | 遵循平台习惯用法（4663）：表单回车提交、Esc 关闭、点击遮罩关闭 |
「AI 味」自检五问：
① 眯眼后第一眼是主角吗？
② 间距全是刻度值吗？
③ 强调色是否只有 1 个？
④ 空态/加载/错误都有设计吗？
⑤ 有没有"为了特别而特别"的交互？
5. 控件选择与流程克制（4664/4662）
| 需求 | 控件 | 反例 |
|---|---|---|
| 2–4 个互斥选项，且都需可见 | 单选组 / 分段控件 | 下拉（多点一次） |
| 多个可并存选项 | 复选框 | 单选组 |
| 立即生效的二元状态 | 开关 | 复选框 + 保存按钮 |
| ≥5 个选项 / 空间不足 | 下拉选择 | 一排单选（挤爆） |
| 危险操作 | 独立按钮 + 二次确认（输入名称） | 与主按钮并排同色 |
流程克制（4662）：每多一步，流失一批用户。核心任务 ≤3 步；把"可选项"折叠进高级设置；破坏性操作必须可逆（撤销/回收站，见 4661）。
6. 把规格写进提示词：一段可复用的模板
# 角色
你是资深产品设计师，输出可直接落地的 Vue 3 + Tailwind 组件。
# 任务与判据
为「订单列表页」生成组件。判据：① 层级符合给定规格 ② 间距只用给定刻度
③ 强调色只 1 个 ④ 必须包含 loading/empty/error 三态 ⑤ 键盘可达
# 上下文
<粘贴 §2 的 YAML 规格书>
配色：neutral 灰阶 6 档、primary #2563eb、danger #dc2626
组件库：Element Plus（不要自创交互）
# 输出契约
1) 单文件 .vue（<script setup lang="ts"> + <template> + <style scoped>）
2) 三态用 props `state: 'loading'|'empty'|'error'|'ready'` 切换
3) 不许引入未列出的依赖；不许用内联样式
判据：要求里带"不许"的约束比带"要好"的期望有效——模型无法执行"高级感"，但能执行"不许用内联样式"。
7. 反例：五种"生成了但不该上线"
| 现象 | 根因 |
|---|---|
| 按钮五花八门 | 没给组件库与按钮层级预算 |
| 页面像模板站 | 无层级（所有区块同等权重） |
| 移动端挤爆 | 未给断点与最小点击区（44×44） |
| 空数据白屏 | 缺空态设计 |
| 交互反直觉 | 自创交互替代平台习惯 |
8. 自测
- UI 规格书八要素？为什么形容词不可执行？
- 视觉三律分别是什么？眯眼法测什么？
- "AI 味"的四个来源？状态三件套指什么？
- 控件选择的三条判据？
- 为什么"不许"比"要好"有效？
答案
- 层级/栅格间距/字号/颜色预算/组件状态/文案/流程/可访问性；形容词无法转成数字或枚举。
- 层级、间距刻度、颜色字体预算；眯眼法测第一眼主角是否正确。
- 平均化、装饰过度、状态缺失、习惯违逆；loading/empty/error。
- 选项数量与可见性需求、生效方式（即时 vs 提交）、危险程度。
- 约束是可判定的，期望不可判定。
9. 下一篇
S14-X02 · 生态库速查 —— 21 个前端库（Node/TS/pnpm/Vitest/Biome/Capacitor/Pinia/VueUse/Iconify/KaTeX/Pagefind/Swup/PhotoSwipe/OverlayScrollbars/Draggable/Virtual/md-editor/markstream/Live2D/Expressive Code/ArchUnit）的选型表与版本口径。
本篇属于系列《S14 · 前端与可视化》。旧文来源：A-4651–4667（17 篇设计方法论）；扩展点 E-S14-026/027/028。库版本按原文写作时点，落地前需核对官方 release（标待核）。