# UI设计走查 Skill

基于 viaim Design System v3.5。

设计师如何用 AI 做 UI 走查——方法论、规范基准、输出标准。可复用到任何团队的设计系统。

## 四种触发方式

### 方式一：截图对比

发来设计稿 + 实现截图，逐维度对比。支持批量多组配对，每组第 1 张 = 设计稿，第 2 张 = 实现截图。

### 方式二：链接对比

提供 Figma 设计稿链接 + 开发页面 URL。Figma 链接中自带的 node ID 直接指向具体画板，精准读取该节点的样式数据。

### 方式三：源码走查

提供代码仓库或本地路径（iOS / Android / Web 均可）。AI 用关键词精准定位样式代码（`border-radius`、`font-weight`、`padding`、`color` 等），只读样式文件和 UI 组件，跳过业务逻辑。

### 方式四：页面跳转逻辑检查

描述预期的页面跳转流程（登录页 → 首页 → 设置页 → 返回），AI 读路由配置逐一验证跳转链是否存在、方式是否正确。

## 核心原则

**只看样式，不看内容。** 设计稿和实现中的文字、图片内容几乎一定不同（设计稿用假数据，实现用真实数据），这些差异必须忽略。只关注视觉样式的还原度。

## viaim 设计规范（走查基准）

以下数值来自 viaim 36 个平台级 Design Skill，可替换为你自己的 Design Token。

### 圆角规范（9 档）

合法圆角：`0 / 1 / 2 / 4 / 8 / 12 / 16 / 24 / 32 px`。

- 卡片通常用 `12` 或 `16`。
- 按钮通常用 `8` 或 `12`，全圆角按钮用 `height/2`（胶囊形），不写 `999`。
- 输入框通常用 `8` 或 `12`。
- 禁止出现：`3 / 5 / 6 / 7 / 10 / 14 / 18 / 20 / 26` 等非法档位。

### 间距规范（14 档）

合法间距：`0 / 2 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 56 / 64 / 72 px`。

- 4pt 基底 × 8pt 节奏。
- 禁止出现：`5 / 6 / 7 / 9 / 10 / 11 / 13 / 14 / 15 / 18 / 22 / 28 / 30 / 36 / 44 / 60` 等非法档位。

### 字体规范

字重用语义 Text Style，不写裸数字：

- `caption-xs/s/m/l` → `8 / 10 / 12 / 13pt`（副信息、占位、角标）。
- `body-s/m/l/xl` → `14 / 15 / 16 / 17pt`（正文、列表、卡片）。
- `title-s/m/l` → `18 / 20 / 24pt`（卡片标题、模块、页面）。
- `headline-s/m/l` → `28 / 32 / 40pt`（大模块、营销）。

字重只有两档：`Regular(400)` 和 `Medium(500)`，没有 `Bold(700)` / `Light(300)`。

### 颜色规范

永远不写裸 hex 值，统一用语义 token：

- 五大命名空间：`text-icon / fillaction / background / border / shadow`。
- 状态盘 5 槽（按钮 / 控件必须配齐）：`disable / main / hover / active / border`。
- 成功色：`#0EA550`，危险 / 错误色：`#E50038`。
- Light · Dark 双 mode，组件层不判断 `isDark`，全靠 token 自动切换。

### 描边规范（7 档）

- `stroke/center-0-5`（0.5px）/ `stroke/center-1`（1px）。
- `stroke/outside-1-5`（1.5px）/ `stroke/outside-2`（2px）。
- `border/inside`（0.5px）/ `border/outside-1`（1px）/ `border/outside-2`（2px）。

## 走查维度（7 维）

每组图片逐一比对：

### 颜色体系

背景色、文字色（标题 / 正文 / 辅助分别比对）、图标色、分割线 / 边框色、按钮 / 标签填充色。

### 字体与排版

字号（对照档位表）、字重（只有 400 / 500）、行高、对齐方式。

### 间距与边距

元素纵横间距（是否在 14 档内）、页面左右边距（移动 16px，平板 24px）、卡片内边距（16–24px）。

### 圆角

卡片圆角（12 或 16）、按钮圆角、输入框圆角（是否在 9 档内）。

### 布局与对齐

整体布局结构、左右 / 上下对齐、并列元素等距、内容宽度比例。

### 元素层级

阴影 / 投影效果、毛玻璃 / 遮罩效果。

### 图标样式

图标大小、线宽粗细、颜色。

## 严重程度判定

### 🔴 高

- 功能受损：用户无法完成操作。
- 视觉崩坏：第一眼就感知到异常。
- 品牌违规：错误品牌色、错误字重（Bold / Black）、不在规范档位内的圆角。

### 🟡 中

视觉可感知（3 秒内看出），但不影响功能。如间距偏差 > 4px、字号差一档、圆角差一档、颜色有明显色差但语义正确。

### 🟢 低

视觉极细微，需精确测量才能发现，完全不影响功能。如间距偏差 ≤ 2px、圆角差 1px、描边差 0.5px。

**全局性提升：**同一问题在页面重复出现，严重程度整体提升一级。

## 输出格式：HTML 报告

走查完成后输出 HTML 报告文件，不输出纯文字。

### 报告结构

1. 页头：页面名、日期、规范版本、总体评级、高 / 中 / 低数量统计。
2. 问题清单：按高 → 中 → 低分组。
3. 每个问题卡片：
   - 严重程度标签 + 问题标题。
   - 问题类型（维度标签）。
   - 内容网格：位置 / 是否影响功能 / 设计稿表现 / 实现表现。
   - 修改建议区：给出合法 token 数值。

### 截图标注

每个问题卡片支持：

- 上传截图（支持多张）。
- 画红框标注问题区域。
- 添加文字说明。
- 缩略图列表切换。

### CSS 设计决策

- 字体：`-apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif`。
- 圆角只用合法档位：`4 / 8 / 12 / 16px`。
- 间距只用合法档位：`4 / 8 / 12 / 16 / 20 / 24 / 32 / 40px`。
- 评级色：红（高）/ 橙（中）/ 蓝（低）/ 绿（通过）。

## 适配你的团队

替换以下内容即可适配到你自己的设计系统：

| 替换项 | viaim 值 | 你的值 |
| --- | --- | --- |
| 设计规范来源 | viaim 36 Skill | 你的 Design Token 文件 |
| Figma 文件 ID | `bkDoCeIiqjo7exhJGzVttv` | 你的 Figma 文件 ID |
| 品牌色 | `#0277DB` | 你的品牌色 |
| 圆角档位 | 9 档 | 你的圆角规范 |
| 间距档位 | 14 档（4pt 基底）| 你的间距规范 |
| 字重限制 | 仅 400 / 500 | 你的字重规范 |
| 输出格式 | HTML 报告 | 可改为 Markdown、Notion 等 |

## 走查原则

- 对照设计规范，若发现非法圆角 / 间距档位，给出最近的合法档位。
- 同一问题在页面多处重复出现，合并为一条并注明“全局性问题”。
- 报告只列确认存在偏差的问题，不列检查通过的维度。
- 拍摄屏幕的照片适当放宽颜色判断精度。
- 有源码优先从代码提取精确数值，不目测估算。