教程概述
系列索引: gstack 教程系列
/design-review 审计你的 UI，发现 AI slop 和 UX 问题，然后修复它们。/devex-review 实时审计你的开发者体验。
你将学到
- ✅
/design-review实时审计工作流 - ✅ AI slop 检测模式
- ✅ 前后截图文档
- ✅
/devex-review实时 DX 审计 - ✅ 回旋镖效应比较
- ✅ 新手引导流程示例
为什么需要实时设计审查？
计划审查 vs 实时审查
| 阶段 | 命令 | 用途 |
|---|---|---|
| 编码前 | /plan-design-review |
评估拟议设计 |
| 编码后 | /design-review |
审计实际实现，修复问题 |
flowchart LR
A[拟议设计] --> B[/plan-design-review]
B --> C[实现]
C --> D[/design-review]
D --> E[修复后的 UI]
style B fill:#fff3e0
style D fill:#e8f5e9
/design-review 增加什么
计划审查只评估。实时审查：
- 导航 — 真实浏览器，实际页面
- 截图 — 捕获当前状态
- 发现问题 — AI slop、UX 问题、视觉 bug
- 修复 — 应用原子提交
- 文档 — 前后比较
/design-review — 实时 UX 审计
审计清单
与 /plan-design-review 相同的 10 个部分，实时评估：
| 部分 | 检查什么 |
|---|---|
| 1. 视觉层级 | 标题大小、间距、焦点 |
| 2. 颜色对比 | WCAG AA 合规、配色一致性 |
| 3. 字体排印 | 字号、行高、可读性 |
| 4. 布局与间距 | 网格对齐、空白、响应式 |
| 5. 交互 | 悬停状态、过渡、反馈 |
| 6. 无障碍 | ARIA 标签、焦点状态、键盘导航 |
| 7. 内容清晰 | 微文案、错误消息、占位符 |
| 8. AI slop 检测 | 通用模式、不自然表达 |
| 9. 移动体验 | 触摸目标、视口、手势 |
| 10. 品牌一致性 | Logo 使用、语气、视觉识别 |
使用
/design-review
输出：
正在对当前 UI 运行设计审查...
┌─────────────────────────────────────────────────────────────┐
│ 设计审查 │
├─────────────────────────────────────────────────────────────┤
│ 部分 1: 视觉层级 │
│ 评分: 6/10 │
│ 问题： │
│ - H1 与 H2 太相似（都是 24px） │
│ - 着陆页没有清晰的焦点 │
│ │
│ 🔧 正在修复... │
│ - H1 → 32px, H2 → 24px, H3 → 18px │
│ 提交: fix heading hierarchy for visual clarity │
│ │
│ 部分 8: AI Slop 检测 │
│ 评分: 4/10 │
│ 问题： │
│ ❌ "无缝集成您的 workflows" │
│ → 通用 AI 短语，无意义 │
│ ❌ "赋能您的团队协作" │
│ → 空洞的企业用语 │
│ ❌ "解锁...的力量" │
│ → 经典 AI 陈词滥调 │
│ │
│ 🔧 正在修复... │
│ - "无缝" → "2 次点击连接您的工具" │
│ - "赋能" → "与团队即时分享文件" │
│ - "解锁" → "实时查看您的数据" │
│ 提交: replace AI slop with concrete copy │
│ │
│ 部分 3: 字体排印 │
│ 评分: 8/10 │
│ 问题： │
│ - 移动端正文太小（14px → 需要 16px） │
│ │
│ 🔧 正在修复... │
│ - 移动端正文 → 16px 最小 │
│ 提交: increase mobile body text size │
└─────────────────────────────────────────────────────────────┘
设计审查完成。
审计部分: 10
发现问题: 5
应用修复: 5
截图: before-01.png, after-01.png, before-02.png, after-02.png
AI slop 检测模式
常见被标记的 AI 生成的短语：
| 模式 | 为什么是 slop | 替换 |
|---|---|---|
| “无缝” | 空头承诺 | 具体动作 + 时间 |
| “赋能” | 企业用语 | 具体好处 |
| “解锁…的力量” | 陈词滥调 | 用户实际得到什么 |
| “提升您的 X” | 模糊 | X 如何改进 |
| “简化” | 无意义 | 减少的步骤 |
| “转型” | 夸大 | 前后状态 |
| “利用” | 行话 | 使用、应用、连接 |
| “前沿” | 空洞 | 具体技术/功能 |
| “同类最佳” | 无法验证 | 具体指标 |
| “颠覆性” | 夸大 | 改变了什么 |
前后文档
自动截图捕获
每个修复生成：
screenshots/
├── design-review-2026-04-07/
│ ├── before-01-visual-hierarchy.png
│ ├── after-01-visual-hierarchy.png
│ ├── before-02-ai-slop.png
│ ├── after-02-ai-slop.png
│ ├── before-03-typography.png
│ ├── after-03-typography.png
│ └── diff-report.md
差异报告
# 设计审查差异报告
## 修复 1: 视觉层级
### 前
- H1: 24px
- H2: 24px
- 无焦点
### 后
- H1: 32px
- H2: 24px
- Hero 区域作为焦点
### 影响
用户现在能正确扫描页面。H1 作为主要标题突出。
## 修复 2: AI Slop 移除
### 前
"无缝集成您的 workflows"
### 后
"2 次点击连接您的工具"
### 影响
文案现在描述实际功能。用户理解会发生什么。
/devex-review — 实时 DX 审计
审计什么
你的文档、新手引导和 API 的开发者体验：
| 指标 | 测量 |
|---|---|
| TTHW（Hello World 时间） | 从文档到工作代码的分钟数 |
| Readme 清晰度 | 有人能在 5 分钟内开始吗？ |
| API 可发现性 | 端点有文档吗？ |
| 错误消息 | 它们能帮助调试吗？ |
| 示例质量 | 示例真的能用吗？ |
使用
/devex-review
输出：
正在运行开发者体验审查...
┌─────────────────────────────────────────────────────────────┐
│ DEVEX 审查 │
├─────────────────────────────────────────────────────────────┤
│ 🧪 测试: Getting Started 流程 │
│ │
│ 步骤 1: 阅读 README │
│ 时间: 2m │
│ 问题: 安装命令使用旧的包名 │
│ │
│ 🔧 正在修复... │
│ README.md:12: 'npm install mypkg' → 'npm install mypkg-v2' │
│ 提交: fix outdated package name in readme │
│ │
│ 步骤 2: 运行第一个示例 │
│ 时间: 3m │
│ 问题: 示例需要 API key 但文档未提及 │
│ │
│ 🔧 正在修复... │
│ README.md:45: 添加 "从 dashboard 获取您的 API key" │
│ 提交: add api key setup instructions │
│ │
│ 步骤 3: 发起第一个 API 调用 │
│ 时间: 1m │
│ ✅ 正常工作 │
│ │
│ ─────────────────────────────────────────────────────────────│
│ │
│ TTHW: 6 分钟（目标: 5） │
│ 评分: 7/10 │
│ │
│ 需改进： │
│ - 给 README 添加 quickstart 部分 │
│ - Getting started 中包含 API key 设置 │
│ - 添加复制粘贴示例 │
└─────────────────────────────────────────────────────────────┘
Devex 审查完成。
TTHW: 6 分钟（超出目标 1m）
应用修复: 2
回旋镖效应
比较计划评分 vs 实时评分
当你在编码前运行了 /plan-devex-review：
┌────────────────────────────────────────────┐
│ DEVEX 回旋镖比较 │
├────────────────────────────────────────────┤
│ 指标 计划 实时 Delta │
├────────────────────────────────────────────┤
│ TTHW 目标 5m 6m +1m ❌ │
│ 可读性 8/10 7/10 -1 ❌ │
│ API 文档 9/10 9/10 0 ✅ │
│ 示例 8/10 6/10 -2 ❌ │
├────────────────────────────────────────────┤
│ 总体 8/10 7/10 -1 │
│ │
│ 建议： │
│ 实时评分低于计划。在应用修复后 │
│ 重新运行。 │
└────────────────────────────────────────────┘
为什么评分漂移
- 计划过于乐观 — 估计 TTHW 但未测试
- 实现增加了复杂性 — 比计划更多步骤
- 文档过时 — README 与当前 API 不匹配
- 示例损坏 — 依赖变更
示例：新手引导流程审计
场景
审计从着陆页到首次操作的新用户引导流程。
命令
# 先设计审查
/design-review
# 然后文档的 devex 审查
/devex-review
# 检查回旋镖比较
# [与 plan-devex-review 评分比较]
/design-review 着陆页
正在审计着陆页...
┌─────────────────────────────────────────────────────────────┐
│ 新手引导流程审计 │
├─────────────────────────────────────────────────────────────┤
│ 步骤 1: 着陆 → 注册 │
│ │
│ 🔴 问题: 注册按钮无悬停状态 │
│ 🔧 修复: 添加 cursor:pointer + 悬停时背景变化 │
│ │
│ 🟡 问题: 表单占位符说 "输入邮箱" │
│ 更好: "[email protected]" │
│ 🔧 修复: 更新占位符显示格式 │
│ │
│ 步骤 2: 注册 → 仪表板 │
│ │
│ ✅ 过渡流畅 │
│ │
│ 🟡 问题: 注册后无欢迎消息 │
│ 🔧 修复: 添加 "欢迎！让我们开始吧。"横幅 │
│ │
│ 步骤 3: 仪表板 → 首次操作 │
│ │
│ 🔴 问题: 无清晰的首次操作 │
│ 🔧 修复: 添加带箭头的"从这里开始"提示 │
└─────────────────────────────────────────────────────────────┘
新手引导审计完成。
审计步骤: 3
发现问题: 4
应用修复: 4
前后截图已保存。
与 QA 工作流集成
组合流程
flowchart TD
A[UI 完成] --> B[/design-review]
B --> C{UX 问题?}
C -->|是| D[修复 UX]
D --> B
C -->|否| E[/devex-review]
E --> F{DX 问题?}
F -->|是| G[修复文档]
G --> E
F -->|否| H[/qa]
H --> I[发布]
style B fill:#e8f5e9
style E fill:#fff3e0
style I fill:#e1f5ff
典型序列
# 1. 设计审查（UI/UX）
/design-review
# 2. Devex 审查（文档/新手引导）
/devex-review
# 3. QA（功能测试）
/qa https://staging.myapp.com
# 4. 全部通过后发布
/ship
技能快速参考
| 命令 | 用途 | 输出 |
|---|---|---|
/design-review |
实时 UX 审计 + 修复 | 10 部分，前后对比 |
/devex-review |
实时 DX 审计 + 修复 | TTHW、文档、示例 |
/design-review --section 8 |
仅 AI slop | Slop 检测聚焦 |
/devex-review --tthw |
仅 TTHW 测量 | 时间基础指标 |
总结
gstack 中的实时设计审查提供：
- 10 部分 UX 审计 — 与计划相同的清单，实时应用
- AI slop 检测 — 发现并替换空洞短语
- 前后截图 — 每个修复的视觉文档
- Devex 审计 — TTHW、文档清晰度、示例质量
- 回旋镖比较 — 计划评分 vs 实时现实
关键要点
- ✅ UI 实现后运行
/design-review - ✅ 文档编写后运行
/devex-review - ✅ 专门检查 AI slop 部分（部分 8）
- ✅ 用回旋镖效应与计划评分比较
系列导航：
- ← 上一篇: 教程 8：QA 与安全
- → 下一篇: 教程 10：发布工程
- 返回: 系列索引