# 设计审查 (design-review)

> 以设计师视角审查线上页面的视觉一致性、间距、层级和 AI 痕迹，再逐项修复并复验。

- 分类: [UI 与交互](https://www.myskills.tools/zh/categories/ui-interaction/)
- 来源: 社区 · Garry Tan
- 代码仓库: https://github.com/garrytan/gstack/tree/main/design-review (commit ed10791 · v2.0.0)
- SKILL.md: https://github.com/garrytan/gstack/blob/main/design-review/SKILL.md
- 安装命令: `npx skills add garrytan/gstack --skill design-review`
- 许可证: MIT
- 兼容工具: Claude Code, Codex, Cursor, Copilot
- 权限: read-repo ✓, write-files ✓, shell ✓, network ✓
- 状态: 扫描通过
- 规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。
- ⚠ 每项修复都会 git 提交（开始前可能提交或暂存你未提交的改动），并用你已登录的浏览器会话访问网站。

## 核心规则

每个问题只做最小修复并单独提交，一旦引发回归就立即回滚。

## 执行阶段

1. **准备** — 确定目标 URL（功能分支无 URL 时按 diff 限定范围），读取 DESIGN.md 或代码中的设计令牌，并要求 git 工作区干净。
2. **设计审计** — 通过浏览器截图记录第一印象、提取实际设计系统、逐页按清单检查，再审查交互流程和跨页一致性，每个问题都附截图。
3. **分级与修复** — 按影响排序，优先改 CSS 做最小修复，每项单独提交并复测；风险超过20%时暂停询问，最多修复30项。
4. **终审与报告** — 重新审计受影响页面并计算前后评分，写出含修复状态与截图对比的报告，并更新 TODOS.md。

## 权限说明（据 SKILL.md 整理）

| 能力 | 是否需要 | 说明 |
|---|---|---|
| 文件写入 | 部分需要 | 只修改与问题直接相关的源文件，可新建回归测试、报告和经同意的 DESIGN.md；不改 CI 配置和已有测试。 |
| 命令执行 | 需要 | 运行 git、浏览器驱动脚本（Aside 或 gstack 浏览器）、gstack 辅助工具和测试命令。 |
| 网络外发 | 需要 | 访问目标网站，可使用 WebSearch，并可请求 Codex 提供外部意见。 |

## SKILL.md 头部信息（YAML）

```yaml
---
name: design-review
preamble-tier: 4
version: 2.0.0
description: "Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (gstack)"
allowed-tools:
  - Bash
  - Read
  - Write
  - Edit
  - Glob
  - Grep
  - AskUserQuestion
  - WebSearch
triggers:
  - visual design audit
  - design qa
  - fix design issues
---
```

首页: https://www.myskills.tools/zh/ · URL: https://www.myskills.tools/zh/skills/design-review/