Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From apple-dev
Use after completing a page/module UI, before visual optimization, or when the user says 'review design' or 'check visual quality'. Reviews visual hierarchy, color strategy, spacing rhythm, and overall polish. Complements /ui-review (code compliance) and /feature-review (user journey).
npx claudepluginhub n0rvyn/indie-toolkit --plugin apple-devHow this skill is triggered — by the user, by Claude, or both
Slash command
/apple-dev:design-reviewThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
App 设计质量审查。关注视觉层级、色彩策略、间距节奏、整体打磨感。与 `/ui-review`（代码合规）互补。
Guides technical evaluation of code review feedback: read fully, restate for understanding, verify against codebase, respond with reasoning or pushback before implementing.
Share bugs, ideas, or general feedback.
App 设计质量审查。关注视觉层级、色彩策略、间距节奏、整体打磨感。与 /ui-review（代码合规）互补。
询问用户或自动识别：
*View.swift、*Screen.swift、*Card.swiftreferences/ui-design-principles.md 获取设计原则和精确数值标准references/apple-ui-checklist.md 的「设计质量」章节获取代码级检查项WindowGroup/MenuBarExtra/NSViewRepresentable/#if os(macOS)），额外读取 ui-design-principles.md section 11b（macOS 平台特定：Window 尺寸、Sidebar、Toolbar）以下项目通过读代码即可判断。
原则参考：
ui-design-principles.md§4 视觉层级
检查页面是否有明确的 3 级字重/字号梯度：
| 层级 | 典型用法 | 代码特征 |
|---|---|---|
| 一级（标题） | 页面标题、卡片标题 | .font(.title2) / .font(.headline) + .fontWeight(.semibold) |
| 二级（正文） | 主要内容 | .font(.body) |
| 三级（辅助） | 时间、状态、说明 | .font(.caption) / .font(.subheadline) + .foregroundStyle(.secondary) |
检查项：
.secondary / .tertiary 降级？原则参考：
ui-design-principles.md§3 颜色系统 注：颜色合规性（语义色、深色模式变体、对比度）归/ui-review；色彩策略（比例、和谐、种类数）归本命令。
检查项：
代码检查：搜索文件中所有 Color( / .foregroundStyle( / .tint( / .accentColor 调用，统计颜色种类数。搜索 .opacity( 值 < 0.15 的有色背景，标记为深色模式风险。
原则参考：
ui-design-principles.md§2 间距系统
检查项：
Spacing.xs 会让界面局促）代码检查：提取文件中所有 .padding() / .spacing() / Spacing.* 值，检查是否存在不一致的同级间距。
原则参考：
ui-design-principles.md§5 布局原则
检查项：
原则参考：
ui-design-principles.md§2.3 嵌套圆角、§10.2 卡片规范
检查项：
.frame(maxWidth: .infinity) 或全部内容自适应，不混用）.frame(maxWidth: .infinity)？ScrollView > VStack/LazyVStack 内的卡片/区块如果有 .background() 或 .clipShape() 但无 .frame(maxWidth:)，且不在 List/Form 内 → 🔴 容器会抱住内容宽度而非撑满。.frame(width:) 而非 .frame(maxWidth:) 的容器？固定宽度在不同设备上会显示异常。.background() 颜色/材质是否一致？CardStyle.cornerRadius 等）？opacity ≤ 0.08, radius ≤ 4）代码检查（跨文件）：从当前检查文件的 struct 名提取类型后缀，搜索同后缀组件 Grep("struct \\w+{suffix}", glob: "*.swift")（将 {suffix} 替换为实际后缀），提取每个组件的 .frame( / .padding( / .background( / .clipShape( / .shadow( 修饰符，逐项对比。不一致项标记 🔴。
原则参考：
ui-design-principles.md§10.3 图标规范
检查项：
.symbolRenderingMode()）？原则参考：
ui-design-principles.md§16
检查项：
代码检查：提取文件中所有 .padding() / .spacing() 值。如果一个可滚动页面中所有 spacing 值相同 → 标记"无密度变化"。
检查项：
AppSpacing.* / AppLayout.* 而非硬编码）？Color.appPrimary 而非 Color(hex:)）？.font(.body) 而非 .font(.system(size:))）？AppCornerRadius.medium 而非硬编码 12）？opacity ≤ 0.08）？代码检查：搜索硬编码 .padding(N) 或 .spacing(N)，N 不是 4pt 倍数即标记。搜索 Color(hex: / .font(.system(size: 等非 Token 用法。
💡 完成设计审查后，如需完整 Token 合规扫描，单独运行
/validate-design-tokens。
检查项：
代码检查：Search for NavigationStack/NavigationLink/sheet/fullScreenCover nesting. Count max depth.
检查项：
代码检查：Search for .sensoryFeedback, withAnimation, .alert, .confirmationDialog near save/delete/submit. Flag write operations without feedback.
原则参考：
ui-design-principles.md§4.1 — 弱化不重要的信息，比放大重要信息更有效。
检查项：
.font(.title) 或 .font(.title2)？（= 标题竞争）代码检查：统计同一 View body 中 .font(.title / .font(.title2 出现次数。>1 且无一个明确更大 → 🔴 标题竞争。
原则参考：
ui-design-principles.md§2.1 — 所有间距值基于 4pt 倍数。
检查项：
.padding() / spacing: 数值是否在项目 Spacing Token 列表内？代码检查：提取所有数字型 padding/spacing 参数，检查是否为 4 的倍数且在 Token 范围内。非 4pt 倍数 → 🔴；hardcoded 与 Token 混用 → 🟡。
仅当 Step 2 判定为 macOS 项目时执行。参考
ui-design-principles.md§11.7-11.9。
.defaultSize() 和 .frame(minWidth:minHeight:)？.listStyle(.sidebar) 获得系统外观？以下项目 Claude 无法通过代码完全验证，生成针对性检查清单供用户在设备上执行。
代码预检：统计目标文件使用的 .font() 种类和 .foregroundStyle() 种类数。
≤ 1 种字号 + ≤ 1 种前景色 → "无层级，眯眼测试大概率不通过"
请在设备上执行：
半闭眼睛看页面，回答：
- [ ] 能否分辨出 3 个层级（标题 / 内容 / 辅助信息）？
- [ ] 主操作按钮是否是页面最突出的元素？
- [ ] 是否有某个区域过于密集或过于空旷？
请在设备上执行：
截图后用标尺/参考线工具检查：
- [ ] 所有内容块的左边缘是否对齐到同一条线？
- [ ] 卡片/列表项之间的间距是否均匀？
- [ ] 是否存在"差 1~2pt"的微妙不对齐？
请在设备上执行：
- [ ] 把手机调为灰度模式（辅助功能 → 色彩滤镜 → 灰度），页面层级是否仍然清晰？
- [ ] 切换深色模式，卡片/背景层级是否可辨？
- [ ] 页面整体色调是否和谐（没有某个颜色突兀跳出）？
请在设备上执行：
- [ ] 页面是否有"喘息空间"？（内容区域不贴屏幕边缘，组之间有留白）
- [ ] 信息是否分组清晰？（相关内容靠近，不相关内容有明确间隔）
- [ ] 首屏内容是否过多导致拥挤？
请在设备上执行：
- [ ] 页面切换是否流畅？有无掉帧？
- [ ] 元素出现/消失是否有过渡动画（而非闪现）？
- [ ] 动画时长是否适中？（太快 < 200ms 看不到，太慢 > 400ms 感觉卡）
- [ ] 是否尊重「减少动态效果」设置？
请在设备上执行（冷启动或首次进入该页面）：
- [ ] 第一眼看到的是内容还是空白/loading？
- [ ] 骨架屏或占位是否合理？
- [ ] 页面整体是否给人"精致"还是"粗糙"的感觉？
## Design Review Report
### 检查范围
- [文件列表]
### Part A: 设计规则（代码验证）
#### 🔴 必须修复
- [file:line] 问题描述
现状：{当前代码}
建议：{修复方案}
#### 🟡 建议优化
- [file:line] 问题描述
建议：{优化方案}
#### ⚪ 通过
- {通过的检查项摘要}
### Part B: 设备验证清单
基于代码分析，建议在设备上验证以下项目：
#### 眯眼测试
- [ ] {针对该页面的具体检查点}
#### 对齐审查
- [ ] {针对该页面的具体检查点}
#### 色彩感知
- [ ] {针对该页面的具体检查点}
#### 留白与呼吸感
- [ ] {针对该页面的具体检查点}
#### 动效与过渡
- [ ] {针对该页面的具体检查点}
### 总结
- 检查文件数：N
- 设计规则问题：N（🔴 X / 🟡 Y）
- 设备验证项：N
- 💡 完成设备验证后，标记各项通过/不通过，再决定是否需要调整
| 级别 | 定义 | 示例 |
|---|---|---|
| 🔴 必须修复 | 明显破坏视觉层级或一致性 | 无层级区分（所有文字同大小同颜色）、卡片圆角不统一、颜色竞争（两个强调色） |
| 🟡 建议优化 | 不破坏但可提升 | 间距不完全一致、阴影偏重、图标风格略有混用 |
| ⚪ 通过 | 符合设计质量标准 | - |
/ui-review 不重复：本命令不检查状态完整性、无障碍标签、交互防护等 /ui-review 已覆盖的项目报告输出后，禁止自行修改被审查文件。必须使用 AskUserQuestion 让用户选择：