狸想岛 · AI 实战学习社区

🎯 学什么：不是"看起来还行"，而是用 80+ 检查项、10 个评分维度、交互流分析和 AI 懒人模式检测，系统性地审计和修复活网站的视觉质量——然后直接修源码、提交、复测。核心洞察：(1) AI Slop 检测作为独立评分维度——如果一个页面触发了 8/10 的反模式，它看起来不会"怪"，而是"眼熟得让人不安"；(2) 善意储备追踪——每个用户访问网站时心里都有 70 分的耐心，每次糟糕体验都在扣分；(3) 修复循环的自我调节——每 5 个修复后评估风险，风险 > 20% 立即停止，硬上限 30 个修复。 💡 难易度：⭐⭐⭐⭐⭐ | ⏱️ 预计时间：45 分钟

[!quote]- 📖 原Skill精要 技能名称：design-review 核心功能：设计师之眼 QA——发现视觉不一致、间距问题、层级问题、AI 懒人模式痕迹、慢交互——然后逐一修复。在源代码中迭代修复问题，每次修复原子提交并用前后截图重新验证。针对活网站视觉审计。 所属体系：gstack 虚拟工程团队 协作关系：与 [[L6-37-浏览器自动化|browse]]（浏览器截图）配合使用效果最佳

1. 课程概览

💡 白话小课堂：design-review 不是"提建议"——它是"发现问题+动手修+验证修好了"的完整流程。代码审查关心"逻辑对不对"，设计审查关心"看起来对不对、感觉对了没有、用户信任你吗"。好的代码 + 差的设计 = 用户觉得产品不专业。

2. 设计审计 vs 代码审查

Not a Bug Report

代码审查关心：逻辑对不对？会不会崩？性能怎么样？设计审查关心：看起来对不对？感觉对了没有？用户信任你吗？

好的代码 + 差的设计 = 用户觉得产品不专业差的设计是无声的杀手——用户不会投诉，他们只是默默地走了。

design-review 的独特定位： → plan-design-review：实施之前审查设计计划（L6-05） → design-review：审查活网站，然后直接修复源码 → 区别：一个在纸上审，一个在浏览器里审 + 修

3. 五种审查模式

1. Full（默认）

→ 从首页可达的全部页面，5-8 页 → 完整检查表评估、响应式截图、交互流测试 → 产出含字母评分的完整设计审计报告

2. Quick（--quick）

→ 首页 + 2 个关键页面 → 第一印象 + 设计系统提取 + 简化检查表 → 最快路径到设计评分

3. Deep（--deep）

→ 10-15 页，每条交互流，详尽检查表 → 用于发布前审计或重大改版

4. Diff-aware（在 feature 分支上自动触发）

→ 分析分支 diff → 映射受影响页面 → 仅审计这些页面 → 比较设计质量 Before/After

5. Regression（--regression 或已有 baseline）

→ 运行完整审计 → 加载上次 design-baseline.json → 按类别对比评分变化、新增发现、已解决问题

4. 第一印象：设计师级的感性反应

Phase 1 是 design-review 最独特的输出——在理性分析之前形成感性判断：

结构化批评格式

→ "这个网站传达的信息是【什么】。"（第一眼：能力？趣味？困惑？） → "我注意到【观察】。"（具体元素，正面或负面） → "我眼睛最先看到的三样东西：【1】、【2】、【3】。" （视觉层级检查——这三样东西是设计师想让用户看的吗？如果不是，视觉层级在说谎） → "如果非要用一个词形容：【词】。"（直觉判断）

页面区域测试

→ 指向每个清晰定义的页面区域 → 2 秒内说出它的用途（"能买的东西"、"今日促销"、"如何搜索"） → 命不了名的区域就是定义不清的区域 → 记录下来

第一人称叙述

→ "我在看这个页面……眼睛先看到 logo，然后一大段文字我完全跳过…… 等等，那是按钮吗？" → 说出具体的元素、位置、视觉重量 → 说不出具体事物的叙述 = 你实际上没有在扫描，你在生成废话

5. 十大评分维度 + 80 项检查表

系统评分（A-F）

视觉层级与构图（8 项，权重 15%）
- 是否有清晰的焦点？每个视口一个主 CTA？
- 眯眼测试：模糊后层级是否仍然可见？
字体排版（15 项，权重 15%）
- 字体数量 ≤ 3，比例尺遵循 1.25 或 1.333
- 行高：正文 1.5x，标题 1.15-1.25x
- 每行 45-75 字符（66 理想）
- 标题层级无跳跃（h1→h3 不能跳过 h2）
- 正文 ≥ 16px，标签 ≥ 12px
色彩与对比度（10 项，权重 10%）
- WCAG AA：正文 4.5:1，大字 3:1，UI 组件 3:1
- 语义色一致（成功=绿，错误=红，警告=黄/琥珀）
- 不仅靠颜色传递信息（总加标签/图标/模式）
- 暗色模式：用立面区分层次，非简单反转
间距与布局（12 项，权重 15%）
- 网格在所有断点一致
- 间距使用比例尺（4px 或 8px 基础）
- 节奏：相关内容更近，不同区块更远
- 内圆角 = 外圆角 - 间距
- 移动端无水平滚动
交互状态（10 项，权重 10%）
- 所有交互元素有 hover
- focus-visible 环存在（绝不用 outline: none 无替代）
- 禁用状态：降低不透明度 + cursor: not-allowed
- 加载态：骨架屏形状匹配真实内容布局
- 空状态：温暖的提示 + 主要操作 + 视觉元素
- 触摸目标 ≥ 44px
响应式设计（8 项，权重 10%）
- 移动版布局在"设计意义"上合理（不是简单堆叠桌面列）
- 绝无 user-scalable=no 或 maximum-scale=1
动效与动画（6 项，权重 5%）
- 缓动：进入用 ease-out，离开用 ease-in
- 时长 50-700ms
- 每个动画传达意义
- 尊重 prefers-reduced-motion
- 只用 transform 和 opacity 做动画
内容与微文案（8 项，权重 10%）
- 错误消息具体：发生了什么 + 为什么 + 怎么做
- 按钮标签具体（"保存 API Key"不是"继续"或"提交"）
- 快乐废话检测：扫描以 "Welcome to..." 开头的段落
AI 懒人模式检测（10 项反模式，权重 5%，独立评分）
- 紫色/紫罗兰渐变背景
- 三列功能网格（彩色圆形图标 + 标题 + 描述 × 3）
- 彩色圆形图标作为区块装饰
- 一切居中
- 统一的泡泡圆角
- 装饰性 blob / 浮动圆 / 波浪 SVG
- emoji 作为设计元素
- 卡片左边框着色
- 通用 Hero 文案
- cookie-cutter 区块节奏
- system-ui 作为主字体
性能即设计（6 项，权重 5%）
- LCP < 2.0s（web app），< 1.5s（信息站）
- CLS < 0.1
- 字体使用 font-display: swap

评分计算

→ 每个类别从 A 开始 → 每个高影响发现降一整级 → 每个中影响发现降半级 → 精细发现记录但不影响评分 → 最低为 F

⚠️ 避坑指南：AI Slop 检测是第 9 个评分维度，虽然是独立评分但极其重要。如果你的 AI 生成的页面触发了 6/10 以上的反模式，用户一眼就能看出来"这是 AI 做的"——这会严重损害信任感。

6. 交互流分析与善意储备

第一人称流叙述

→ "我点击 '注册'……spinner 出现……3 秒过去……还在转…… 我开始不安了。终于进入后台，但我在哪？导航没高亮任何东西。" → 说出具体元素、位置、视觉重量

善意储备追踪（起始 70/100）

扣除项：

隐藏用户想知道的信息（价格、联系方式）：-15
格式惩罚（拒绝合法输入，如电话号码中的横线）：-10
要求不必要的信息：-10
插播/闪屏/强制导览阻塞任务：-15
邋遢或不专业的外观：-10
需要思考才能选择的模糊选项：-5 每个

增加项：

最重要的用户任务醒目且明显：+10
坦率地展示成本和限制：+5
节省步骤（直达链接、智能默认、自动填充）：+5 每个
优雅的错误恢复 + 具体修复指引：+10
出错时道歉：+5

低于 30 = 致命 UX 债务。30-60 = 需要改善。60+ = 健康。

💡 白话小课堂：善意储备是一个很有意思的概念——每个用户访问你的网站时，心里都有 70 分的耐心。隐藏价格扣 15 分，邋遢外观扣 10 分……扣到 30 分以下，用户就走了。

7. 修复循环：看到 → 修好 → 验证

design-review 不只是报告——它会直接修：

8a. 定位源码

→ 搜索 CSS 类名、组件名、样式文件 → 只修改与发现直接相关的文件 → 优先 CSS/样式变更而非结构变更

8b. 修复

→ 阅读上下文，做最小变更 → CSS 优先（更安全、更可逆） → 不重构周边代码，不加新功能，不"改善"无关内容

8c. 提交（一个修复一个提交）

→ git add <仅变更文件> → git commit -m "style(design): FINDING-NNN — 简短描述"

8d. 复测

→ $B goto <受影响 URL> → $B screenshot → before/after 截图 → $B console --errors

8e. 分类

→ verified：复测确认修复有效 → best-effort：应用了但无法完全验证 → reverted：发现回退 → git revert HEAD

自我调节

→ 每 5 个修复后评估风险：

起始 0%
每次 revert +15%
每个 CSS-only 变更 +0%
每个组件文件变更 +5%
触碰无关文件 +20% → 风险 > 20%：立即停止，展示进展，询问是否继续 → 硬上限：30 个修复

8. 设计硬规则与 litmus 检查

分类器（评审前先判断类型）

→ MARKETING/LANDING PAGE（Hero驱动，品牌优先，转化核心） → APP UI（工作空间驱动，数据密集，任务导向） → HYBRID（营销外壳 + 应用功能）

硬拒绝标准（以下任何一条适用 → 立即标志）

通用 SaaS 卡片网格作为第一印象
美丽图片 + 弱品牌
强力标题 + 无清晰行动
繁忙的图片背景遮挡文字
区块重复同样的情绪声明
无叙事的轮播
App UI 由堆叠卡片组成而非布局

Litmus 检查（是/否）

品牌/产品在第一屏就明确无误？
存在一个强大的视觉锚点？
仅扫描标题就能理解页面？
每个区块只做一件事？
卡片真的有必要吗？
动效改善了层级或氛围吗？
去掉所有装饰阴影后，设计仍然有质感吗？

Landing Page 专用规则

→ 第一视口读作一幅构图，而非仪表盘 → 品牌优先层级：品牌 > 标题 > 正文 > CTA → 无平面单色背景——用渐变、图像、微妙纹理 → Hero 预算：品牌 + 一个标题 + 一句支撑语 + 一个 CTA 组 + 一张图片 → Hero 中不用卡片。卡片只在"卡片本身就是交互"时出现

App UI 专用规则

→ 平静的表面层级，强字体，少量色彩 → 密集但可读，极少 chrome → 组织：主工作区 > 导航 > 次要上下文 > 一个强调色 → 避免：仪表盘卡片拼贴、厚边框、装饰渐变、装饰性图标

9. 结构拆解：设计审计与修复 Skill 模板

设计审计与修复型 Skill 模板

核心特征

→ 管理对象 = 活网站的视觉质量和 UX 体验 → 核心原则 = 十大评分维度 + 修复循环 + 善意储备追踪 → 关键设计 = 五种审查模式 + AI Slop 独立检测 + 自我调节风险控制

通用结构

Five Review Modes（五种审查模式）

Full：5-8 页，完整检查表
Quick：首页+2 页，最快到评分
Deep：10-15 页，发布前审计
Diff-aware：仅审计变更影响的页面
Regression：与 baseline 对比评分变化

Ten Scoring Dimensions（十大评分维度）

视觉层级(15%) / 字体排版(15%) / 色彩对比度(10%) / 间距布局(15%)
交互状态(10%) / 响应式(10%) / 动效(5%) / 内容微文案(10%)
AI Slop 检测(5%, 独立评分) / 性能即设计(5%)

First Impression & Goodwill（第一印象与善意储备）

结构化批评格式：传达信息→注意到→眼睛路径→一个词
善意储备 70/100 起始，扣分项和加分项追踪

Fix Loop（修复循环）

定位源码 → 修复（CSS 优先） → 原子提交 → 复测 → 分类
自我调节：每 5 个修复评估风险，>20% 停止，硬上限 30 个

10. 电商案例：设计审计——电商首页的 AI Slop 检测

🛒 实战案例：一个中端女装电商App（月活80万，25-35岁女性为主）用AI工具生成了新首页设计稿。设计师觉得"看起来还行"，但design-review的AI Slop检测触发了8/10项反模式——这是一篇典型的"AI模板页面"。

第一印象——结构化批评：打开首页的第一感受——"这个页面传达的信息是：我是一个SaaS模板，碰巧在卖衣服。"视觉层级在说谎——设计师想让用户先看Hero标题"发现你的风格"，但眯眼测试后只有紫色渐变背景可见。如果非要用一个词形容：Generic（通用到没有品牌痕迹）。

AI Slop 10项反模式检测（得分2/10）：

✅未触发2项——卡片左边框着色未发现、system-ui字体未使用（用了定制Inter）

⚠️触发8项：(1)紫色Hero渐变#667eea→#764ba2（典型AI配色）；(2)3列emoji功能网格（🚚免运费|🔒安全支付|📦快速发货）；(3)彩色圆形图标作区块装饰；(4)78%文本容器居中；(5)92%卡片border-radius:16px统一泡泡圆角；(6)Hero区装饰性紫色blob；(7)emoji替代SVG图标；(8)通用Hero文案"开启您的购物之旅""发现无限可能"。8/10触发=这是一个典型的AI生成模板，AI Slop密度极高。

十大评分维度结果：视觉层级D(1.5/10)——焦点模糊，Hero标题/紫色渐变/商品网格三方抢焦点；字体排版C(5/10)——Inter可用但无品牌个性，标题正文字号差不够；色彩与对比度D(3/10)——紫色渐变不是品牌色（实际品牌色是#2D3436深炭灰），紫色背景白字对比度仅3.2:1（不满足AA 4.5:1）；间距与布局D(4/10)——三种视口下商品卡片对齐不一致，移动端水平滚动；交互状态F(2/10)——50%按钮无hover态，无focus-visible环。总评分：D(38/100)。

善意储备追踪：起始70/100。扣除——邋遢不专业外观-10、价格在首页不可见-15、选择困惑（"热门商品"vs"新品推荐"）-5。增加——搜索框醒目+5。最终45/100需改善。

修复方案：P0立即——紫色渐变替换为品牌#2D3436+真实模特摄影背景（对比度修复到7.8:1）；3列emoji网格替换为2列真实数据卖点（"12847位用户给出4.8星好评"替代"🚚免运费"）；通用Hero文案替换为品牌具体主张（"发现你的风格"→"每一件都是设计款，每一价都是工厂价"）。P1本周——至少40%内容左对齐打破居中；卡片8px按钮4px差异化圆角；补充hover+focus状态；修复移动端滚动。预期修复后评分：B(78/100)，修复后首页加购率从修复前的4.2%提升到6.8%。

🔑 启示：AI Slop检测的价值不在"AI生成的设计就是不好"，而在"AI生成的默认设计和你的品牌没有关系"。当8/10反模式触发时，页面不会"丑"，而是"眼熟得让人不安"——用户潜意识觉得"我在哪见过这个页面"而降低信任。

11. 掌握检验

Q1：design-review 评分中权重最高的三个维度是哪三个？

A) 动效、内容微文案、性能即设计
B) 视觉层级与构图、字体排版、间距与布局
C) AI 懒人模式、色彩与对比度、响应式设计
D) 交互状态、可访问性、暗色模式

Q2：AI 懒人模式检测为什么作为"独立打分"而非仅占总分 5%？

A) 因为 AI 生成的内容一定比人类的好
B) 因为 AI Slop 对用户信任感的破坏是全局性的，远超 5% 权重应代表的影响
C) 因为这是唯一自动化检测的维度
D) 因为设计团队特别喜欢这个特性

Q3："善意储备追踪"中，把价格藏在多层页面之下会扣 15 分。请解释为什么这个扣分比"邋遢或不专业的外观"（扣 10 分）还重？这体现了什么样的用户体验优先级？

Q4：在电商首页案例中，3 列功能网格（免运费/安全支付/快速发货）触发 AI Slop 检测。请从两个角度分析：①为什么它是典型的 AI Slop？②如何在不触发 Slop 的前提下做得更好？

Q5：设计修复的自我调节机制中，为什么"触碰无关文件"的风险权重是"组件文件变更"的 4 倍？

Q6：Litmus 检查中有一条："去掉所有装饰阴影后，设计仍然有质感吗？"这条检查在测试什么？针对电商首页案例分析：去掉所有装饰后这个设计还剩下什么？

12. 答案

点击查看答案

Q1：B —— 视觉层级与构图（15%）、字体排版（15%）、间距与布局（15%）是权重最高的三个维度，合计 45%。

Q2：B —— AI Slop 的影响是全局性的。

Q3：隐藏价格 = 故意隐藏用户做决定最需要的信息。这本质上是"欺骗性设计"——让用户在不完全信息下做决定，发现真相后用户感到被欺骗。这比"外观邋遢"更严重，因为后者是能力问题（没做好），前者是意图问题（故意的）。优先级：诚信 > 美观。

Q4：①它是典型 AI Slop 因为：3 列网格+emoji 图标+居中布局是 AI 生成页面的默认模板——它在 2023-2024 年被 AI 模型在无数训练数据中重复输出，形成了可预测的"签名式反模式"。②改进方案：不用 emoji 图标，用真实的品牌数据——如"12784 位成分党已信任"，或在 3 列网格中展示真实的用户评价截图、成分检测报告缩略图、物流时效的真实截图。核心区别：真实内容 vs AI 占位符模式。

Q5："触碰无关文件"的风险是"组件文件变更"的 4 倍，因为：组件文件变更是目标性的——你知道你在改什么；但触碰无关文件意味着你缺乏对修改范围的控制，可能引入连锁副作用（改了 A 文件的样式却影响了 B 页面，因为 B 也依赖这个 class）。revert 加 15% 是因为 revert 意味着你之前的修错了——这说明你对该类型问题的判断准确度低。

Q6：Litmus 测试的是"设计的结构质量是否独立于装饰"——好的设计由结构（布局、层级、间距）支撑，装饰是锦上添花；差的设计用装饰掩盖结构的空洞。电商首页案例：去掉紫色渐变的背景 → 剩下白色页面上的文字；去掉 blob 浮动圆 → 没什么变化因为 blob 不承载信息；去掉泡泡圆角卡片 → 内容失去了区分度。结论：装饰删除后，设计几乎什么都不剩——说明它是"装饰驱动"而非"结构驱动"的设计，需要重建基础骨架。

（5/6 通过）

13. 延伸阅读

[[L6-11-设计方案散弹枪|下一课：设计方案散弹枪 —— 一口气探索5个完全不同的设计方向]]