L6-40：设计深度审计 —— 像顶尖设计师一样挑出每个像素的毛病

🎯 学 gstack 的设计审查系统：不是模糊地说"这个页面不好看"，而是用 6 个 AI Slop 检测模式、字体排版规则、间距布局检查、交互状态审计来系统性地评估 UI 质量——并把机械性问题 AUTO-FIX，需要设计判断的 ASK。 ⏱️ 预计时间：30 分钟

💡 新手提示：AI Slop 是指 AI 生成的 UI 中那些千篇一律的"模板感"——紫色渐变、三列布局、居中一切。学会识别这 6 个特征，你就能从"让 AI 做出来"进阶到"让 AI 做得好"。

---

§1 课程概览

[!note]- 白话小课堂 AI 生成的 UI 有一种"模板味"——紫色渐变背景、三列功能网格、居中一切、泡泡圆角、通用 Hero 文案。这就是 AI Slop。design-review 就是系统性地找出这些问题：从字体排版、间距布局、交互状态到设计系统规范遵守。

AUTO-FIX 处理机械问题：body 字体小于 16px？自动改。缺 focus 样式？自动加。!important 滥用？自动删。ASK 处理需要设计判断的决策：颜色方案要不要改、布局要不要重构、字体要不要换——这些涉及品牌识别和视觉风格，AI 只标记不替你做决定。

记住一个角色定位：AI 是"卫生检查员"，不是"艺术总监"。它确保设计符合卫生标准（可访问、一致、规范），但设计的"灵魂"由人来赋予。

---

[!quote]- 📖 原Skill精要 技能名称：design-review（深度审计维度） 核心功能：与 [[L6-10-设计审计与修复|design-review]] 共享同一个 Skill，本课从不同维度展开——6 个 AI Slop 检测模式（紫色渐变、三列网格、居中一切等模板感特征）、字体排版规则、间距布局检查、交互状态审计。专门针对 AI 生成 UI 的质量深化。 所属体系：gstack 虚拟工程团队 协作关系：与 [[L6-37-浏览器自动化|browse]] 配合获取活网站截图，与 [[L6-12-设计稿转代码|design-html]] 的设计规范交叉验证

§2 AI Slop 检测——识别 AI 生成的"模板感"UI

---

§3 Fix-First 设计修复

---

结构拆解

---

§4 电商 Skill 案例：女装电商App首页AI Slop深度检测与修复

🛒 实战案例：某女装电商团队用AI快速生成了新首页，但视觉效果有"AI味"——设计主管直觉感觉不对但无法精确描述问题。使用/design-review对首页进行AI Slop专项检测+排版+间距+交互+设计系统遵守度5维度审计。

• AI Slop检测（8/10反模式触发）：紫色渐变Hero区（#7c3aed→#a855f7，置信度HIGH——Tailwind默认indigo/purple gradient是AI生成UI的最常见痕迹）、3列feature grid带圆形图标×3（置信度HIGH——AI训练数据中大量模板使用此模式）、text-align:center使用率78%（>60%阈值，置信度MEDIUM——AI倾向于居中一切）、5种不同字体（Inter/Roboto/Poppins/Montserrat/Open Sans，建议≤3种）、泡泡圆角16px（品牌规定8px）→总AI Slop评分D(38/100)。
• 其他维度发现：排版——5种字体混合、body font-size 14px(<16px无障碍最低标准)→需修复。间距——卡片间距不一致（24px/32px/28px，应统一到品牌4px scale的24px或32px）、响应式布局使用flex+max-width OK。交互——按钮有hover状态✓、商品卡片缺focus样式（键盘导航不可见）→需修复。设计系统遵守——品牌色应为#FF6B35(橙色)而非紫色渐变、按钮圆角应为8px而非16px→严重违反。
• AUTO-FIX（7项机械修复）：统一卡片间距到32px、body font-size提升到16px、添加商品卡片:focus-visible样式（outline替代方案）、精简字体到Inter+Space Grotesk(品牌规定)、按钮圆角改为8px、删除!important声明（共6处）、Hero区outline: none替换为:focus-visible。每项AUTO-FIX有明确CSS patch可直接应用。
• ASK（3项需设计判断）：紫色渐变Hero → 品牌橙色#FF6B35——但具体替换方案需要设计确认（纯色背景/渐变色/图片Hero？）、3列圆形图标grid → 替换为品牌特色的商品故事卡片——需要设计和文案协作、居中一切→改为左对齐为主的阅读流——布局重构需要整体设计决策。预期修复后AI Slop评分从D(38/100)→B(78/100)。实际效果（修复后A/B test）：加购率从4.2%→6.8%（+62%提升），首页跳出率从38%→29%（-24%）。

🔑 启示：AI Slop检测的价值不在"挑AI的刺"——而在将"设计主管的模糊直觉"转化为"可操作的结构化问题清单"。紫色渐变和3列圆形图标——当有人告诉你这是AI痕迹时你立刻就能认出来，但在AI Slop被命名之前，你只是"感觉不对"。命名问题=让问题可被系统性地检测和修复。

[!info] 参考来源 AI Slop 检测模式参考了 design/spark 的 AI 生成 UI 特征识别方法论。设计审计的 AUTO-FIX/ASK 分层参考了 ESLint 的 auto-fix vs suggestion 两级分类。

§5 掌握检验

Q1：AI Slop 检测中，"紫色/蓝紫渐变背景"为什么被列为最容易识别的 AI 痕迹？

• A) 紫色在所有文化中都代表 AI 生成的内容
• B) AI 的训练数据中大量 UI 模板使用紫色渐变（如 Tailwind 的 indigo/purple gradient 示例），导致 AI 生成 UI 时这种配色模式出现的频率远高于人类设计师的作品
• C) 紫色是人眼最敏感的颜色
• D) 只有 AI 能渲染紫色

Q2：设计审查中 AUTO-FIX 和 ASK 的分界线是什么？

• A) AUTO-FIX 修复所有问题，ASK 不做任何修复
• B) AUTO-FIX 处理机械的 CSS 修复（outline: none 替代、!important 移除、body font-size < 16px）——不涉及设计判断；ASK 处理需要设计判断的决策（颜色变更、布局重构、字体选择、品牌决策）
• C) AUTO-FIX 处理颜色问题，ASK 处理字体问题
• D) 两者没有区别，随机分配

Q3：AI Slop 的 6 个特征中，除了紫色渐变外还有哪些？请逐一列出并说明每个特征的检测方法（grep 搜索什么、计数什么、检查什么）。为什么"居中一切"（text-align: center > 60%）被列为 Slop 特征——在实际的优质设计中，居中对齐的使用频率通常是多少？

Q4：电商首页设计审查中发现"品牌色应为 #FF6B35（橙色）而非紫色渐变"——为什么这个标记为 ASK（需要设计确认具体的新 hero 样式）而非 AUTO-FIX（直接替换颜色值）？请从"视觉层次"和"品牌一致性"两个角度说明：为什么把紫色渐变简单替换为橙色渐变仍然可能是一个糟糕的设计？

Q5：字体排版规则中，"body < 16px"和">3 个字体族"为什么被标记为问题？如果 body 字体是 14px 且使用了 5 种不同的字体，具体会产生什么用户体验问题（从可读性、加载性能、和视觉一致性三个角度分析）？

Q6：设计审查发现了"商品卡片缺 focus 样式（键盘导航不可见）"——这被标记为 AUTO-FIX（添加 focus 环），但设计审查同时保持了克制：没有建议"改变商品卡片的整体布局"。请分析 design-review 的 scope 边界——什么属于"设计审计"的范畴（应该被检测和修复），什么属于"设计创意"的范畴（不应该被自动化判断）？如果这个边界判断错误（自动化试图修正设计创意），会导致什么问题？

---

§6 答案

点击查看答案

Q1：B —— AI 的训练数据（如 GitHub 上的 Tailwind UI 模板、Next.js starter templates、Vercel templates）中大量使用了紫色/蓝紫渐变作为 Hero 区域的背景。

Q2：B —— AUTO-FIX 的分界线："这个修复在所有情况下都是正确的"——outline: none 有 a11y 硬性替代方案（focus-visible 环），body font-size < 16px 有可访问性标准（WCAG），!important 有 CSS specificity 的正确替代。

Q3：六个特征：①紫色/蓝紫渐变背景——grep 搜索 #7c3aed、#a855f7、purple、indigo 等颜色值，特别关注 gradient 组合。②3 列功能网格——计数"彩色圆形图标 + 粗标题 + 2 行描述"的结构模式（flex grid + 3 children）。③彩色圆形图标作为区块装饰——检测装饰性 <div> 元素（无实际交互功能但有颜色和圆角）。④居中一切——计算 text-align: center 的使用率。⑤统一的泡泡圆角——统计 border-radius 分布（>80% 元素使用相同 ≥16px 的圆角）。⑥通用 Hero 文案——搜索 "Welcome to X"、"Unlock the power of..." 等模板文案。居中率 > 60% 的问题：在优质设计中，居中对齐通常用在 Hero 和 CTA 区域（10-20% 的文本容器），大部分内容文本（产品描述、文章、功能列表）应该左对齐——左对齐提供更稳定的阅读线。AI 倾向于"居中一切"因为模板中最显眼的部分（Hero）是居中的——AI 过度泛化了这个模式。

Q4：不能 AUTO-FIX 的原因：①视觉层次——品牌色的渐变方向（橙色从哪个色调到哪个色调）、渐变角度（45deg vs 90deg）、渐变在 Hero 中的位置（覆盖整个背景 vs 只是侧边装饰）——这些决定 Hero 的视觉层次。简单替换颜色值可能让 Hero 从"有层次"变成"一块橙色板"。②品牌一致性——品牌色 #FF6B35 是一个具体的色值，但品牌色在 UI 中的"使用方式"（作为点缀色 vs 背景色、与白色的对比度、在按钮上的表现）需要设计系统规范——不是所有"用了正确色值"的设计都是品牌一致的。简单替换 = 颜色对了但感觉不对——就像把可口可乐的 Logo 红色用在整页背景上——颜色对但品牌表达错。

Q5：三个角度：①可读性——14px body 字体在移动端（高 DPI 屏幕）上的实际物理尺寸太小，用户需要更近或眯眼才能阅读（Apple 的 Human Interface Guidelines 建议 body 至少 17pt，Material Design 建议至少 16sp）。5 种字体 = 每种字体有不同的 x-height 和笔画宽度 → 在同一页面上视觉节奏混乱 → 用户无法建立"阅读习惯"。②加载性能——每种 Web 字体需要额外的 HTTP 请求（或从 Google Fonts CDN 加载），5 种字体 × 多个 weight（regular/bold/italic）× 每种 50-200KB → 总字体载荷可能 > 1MB → 在移动网络上增加 3-5 秒加载时间。③视觉一致性——字体的切换应该是有意为之的（如标题用衬线体、正文用无衬线体），5 种字体 = 切换是没有设计意图的（每个组件独立选择字体）→ 页面看起来像"不同团队的组件拼在一起"。

Q6：Scope 边界：设计审计的范畴——可访问性（focus 样式、对比度、alt 文本）、排版卫生（字体大小、字体数量、层级）、间距一致性（grid baselines、margin 统一）、设计系统遵守（颜色、字体、间距是否在 DESIGN.md 中定义）、AI Slop 检测（模板化的设计模式）。设计创意的范畴——布局策略（三列 vs 两列需要根据内容特性判断）、视觉风格（极简 vs 丰富需要品牌策略）、色彩情绪（暖色调 vs 冷色调是品牌个性的表达）、信息架构（导航结构、页面流程需要用户研究）。边界判断错误的后果：如果 AI 试图"修正"设计创意 → 它会把所有设计拉到训练数据的"平均审美"→ 品牌失去个性 → 就像让一个 AI 写所有的歌曲——旋律都对但没有灵魂。design-review 的 AI 角色是"卫生检查员"而非"艺术总监"——它确保设计符合卫生标准（可访问、一致、规范），但设计的"灵魂"由人来赋予。

（5/6 通过）

---

延伸阅读

• [[L6-39-浏览器身份配置|上一课：浏览器身份配置]]
• [[L6-41-设计发散探索|下一课：视觉设计探索]]