sumulige-claude: Skill for Claude Code

Design Audit

系统性设计审计协议 - Steve Jobs 标准

概述

这是一个完整的 UI/UX 审计工作流，基于 Steve Jobs 和 Jony Ive 的设计哲学。用于对现有应用进行系统性审计，输出分阶段改进计划。

触发条件

• 用户请求设计审计
• 用户请求 UI/UX 评估
• 用户请求设计改进建议
• 用户说 "review my design" / "审计设计"

前置要求

开始前必须读取并内化这些文件（按顺序）：

1. DESIGN_SYSTEM.md — 现有视觉语言（令牌、颜色、排版、间距、阴影、圆角）
2. FRONTEND_GUIDELINES.md — 组件工程方式、状态管理、文件结构
3. APP_FLOW.md — 每个屏幕、路由、用户旅程
4. PRD.md — 每个功能及其需求
5. TECH_STACK.md — 技术栈能做什么和不能做什么
6. progress.txt — 当前构建状态
7. LESSONS.md — 之前会话的设计错误、模式和修正
8. 实际应用 — 按移动、平板、桌面视口顺序走查每个屏幕

必须完全理解当前系统后再提出改变。你不是从零开始。你是在提升现有的。

---

审计协议

Step 1: 15 维度全面审计

针对应用中的每个屏幕，检查以下维度：

1. 视觉层级

• 眼睛落在应该落的地方吗？
• 最重要的元素是最突出的吗？
• 用户能在 2 秒内理解屏幕吗？

2. 间距与节奏

• 留白一致且有意图吗？
• 元素呼吸还是拥挤？
• 垂直节奏和谐吗？

3. 排版

• 字号建立清晰层级了吗？
• 是否有太多字重或字号在竞争？
• 字体感觉平静还是混乱？

4. 颜色

• 颜色使用克制且有目的吗？
• 颜色引导注意力还是分散注意力？
• 对比度足够可访问吗？

5. 对齐与网格

• 元素在一致的网格上吗？
• 是否有任何东西偏了 1-2 像素？
• 每个元素都感觉精确锁定在布局中吗？

6. 组件

• 相似元素跨屏幕样式一致吗？
• 交互元素明显可交互吗？
• 禁用、悬停、焦点状态都考虑了吗？

7. 图标

• 图标在风格、粗细、大小上跨应用一致吗？
• 它们来自一个统一的图标集还是混合不同库？
• 它们支持含义还是只是装饰？

8. 动效与过渡

• 过渡感觉自然且有目的吗？
• 是否有无理由存在的动效？
• 应用对触摸/点击响应灵敏吗？
• 动画在当前技术栈内可行吗？

9. 空状态

• 每个屏幕没数据时看起来怎样？
• 空白屏幕感觉有意图还是坏掉了？
• 用户被引导向第一个动作了吗？

10. 加载状态

• 骨架屏、加载器、占位符一致吗？
• 等待时应用感觉活着还是冻结？

11. 错误状态

• 错误消息样式一致吗？
• 它们感觉有帮助和清晰还是敌对和技术性？

12. 暗色模式/主题

• 如果支持，它是真正设计的还是只是反转的？
• 所有令牌、阴影、对比度在主题间都保持吗？

13. 密度

• 任何东西可以移除而不丢失含义吗？
• 是否有冗余元素在说同一件事两次？
• 每个元素都在屏幕上赢得了它的位置吗？

14. 响应式

• 每个屏幕在移动、平板、桌面都工作吗？
• 触摸目标在触摸设备上是为拇指尺寸的吗？
• 布局在所有视口大小间流畅适应吗——不只是在断点处卡住？
• 没有屏幕尺寸应该感觉像事后想法。

15. 可访问性

• 键盘导航
• 焦点状态
• ARIA 标签
• 颜色对比度
• 屏幕阅读器流程

---

Step 2: 应用 Jobs 过滤器

对每个屏幕上的每个元素：

"用户需要被告知这个存在吗？"
→ 如果是，重新设计直到显而易见

"这个可以移除而不丢失含义吗？"
→ 如果是，移除它

"这感觉 inevitable 吗，仿佛没有其他设计方案？"
→ 如果否，它没完成

"这个细节像用户永远看不到的细节一样精致吗？"
→ 围栏背面也要上漆

"Say no to 1,000 things"
→ 砍掉好想法保留伟大的想法。Less but better。

---

Step 3: 编制设计计划

审计后，将所有发现组织成分阶段计划。不要做更改。呈现计划。

输出格式

# 设计审计结果

**总体评估**: [1-2 句话描述设计当前状态]

---

## PHASE 1 — 关键问题

> 视觉层级、可用性、响应式或一致性问题，正在积极伤害体验

| 屏幕/组件 | 问题 | 应该是 | 为什么重要 |
|-----------|------|--------|------------|
| [名称] | [问题描述] | [解决方案] | [理由] |

**Phase 1 优先级说明**: [为什么这些是最高优先级]

---

## PHASE 2 — 精化

> 间距、排版、颜色、对齐、图标调整，提升体验

| 屏幕/组件 | 问题 | 应该是 | 为什么重要 |
|-----------|------|--------|------------|
| [名称] | [问题描述] | [解决方案] | [理由] |

**Phase 2 排序说明**: [为什么这个顺序]

---

## PHASE 3 — 打磨

> 微交互、过渡、空状态、加载状态、错误状态、暗色模式、让它感觉 premium 的细微细节

| 屏幕/组件 | 问题 | 应该是 | 为什么重要 |
|-----------|------|--------|------------|
| [名称] | [问题描述] | [解决方案] | [理由] |

**Phase 3 说明**: [这些项目和预期累积影响]

---

## 需要的 DESIGN_SYSTEM 更新

- [任何需要的新令牌、颜色、间距值、排版变更或组件添加]
- 这些必须在实施开始前被批准并添加到 DESIGN_SYSTEM.md

---

## 给构建 Agent 的实施说明

- [确切文件, 确切组件, 确切属性, 确切旧值 → 确切新值]
- 写成构建 agent 可以无需设计解读就能执行的方式
- 没有歧义。"让卡片感觉更柔和"不是指令。
  "CardComponent border-radius: 8px → 12px 按更新的 DESIGN_SYSTEM token"才是。