UI Polisher - UI 质量打磨器

核心理念：UI 质量不是一次做成的，而是打磨出来的。本 skill 提供系统化的检查清单和优化流程，确保每个界面都达到产品级质量。

---

打磨维度

维度	权重	说明
视觉一致性	25%	颜色、间距、字体、圆角是否统一
交互完整性	25%	状态、动效、反馈是否完整
响应式适配	20%	不同屏幕下是否正常
异常处理	15%	空、加载、错误状态是否友好
性能体验	10%	加载速度、交互响应
无障碍	5%	键盘、屏幕阅读器

---

一、视觉一致性检查

1.1 颜色检查

检查项：
- [ ] 所有颜色来自 Design Token
- [ ] 主色使用一致
- [ ] 文字颜色对比度达标 (WCAG AA: 4.5:1)
- [ ] 链接颜色可识别
- [ ] 禁用状态颜色明显
- [ ] 错误/成功/警告色正确

常见问题：
❌ 硬编码颜色值：color: #333
✅ 使用变量：color: var(--color-text)

❌ 颜色不一致：按钮有时蓝有时紫
✅ 统一使用：var(--color-primary)

1.2 间距检查

检查项：
- [ ] 所有间距使用 spacing 变量
- [ ] 同级元素间距一致
- [ ] 内容与边框有足够留白
- [ ] 区块间距 > 内容间距
- [ ] 移动端间距适当缩小

间距层级：
-xs (4px): 图标与文字间距
-sm (8px): 同组元素间距
-md (16px): 模块内间距
-lg (24px): 模块间间距
-xl (32px): 区块间间距
-2xl (48px): 页面级间距

1.3 字体检查

检查项：
- [ ] 字体大小层级分明
- [ ] 行高适中 (1.5-1.8)
- [ ] 标题与正文对比明显
- [ ] 字重使用合理 (400/500/600/700)
- [ ] 中文标点正确

字号层级：
-xs (12px): 辅助信息、标签
-sm (14px): 次要内容、时间
-base (16px): 正文
-lg (18px): 小标题
-xl (20px): 卡片标题
-2xl (24px): 页面标题

1.4 圆角检查

检查项：
- [ ] 同级元素圆角一致
- [ ] 按钮、输入框圆角匹配
- [ ] 卡片圆角适当
- [ ] 头像使用圆角或圆形

常见模式：
-sm (4px): 标签、徽章
-md (8px): 输入框、小按钮
-lg (12px): 卡片、大按钮
-xl (16px): 弹窗、抽屉
-full (9999px): 头像、药丸按钮

1.5 阴影检查

检查项：
- [ ] 阴影层级分明
- [ ] 悬浮元素有阴影
- [ ] 弹窗阴影 > 卡片阴影
- [ ] 不滥用阴影

阴影层级：
-sm: 轻微浮起 (下拉菜单)
-md: 明显浮起 (卡片)
-lg: 弹窗浮起 (Modal)
-xl: 高层级弹窗 (全局通知)

---

二、交互完整性检查

2.1 状态检查

## 按钮状态
| 状态 | 样式 | 触发 |
|------|------|------|
| 默认 | 主色背景 | - |
| 悬停 | 背景加深 10% | 鼠标移入 |
| 聚焦 | 外边框高亮 | Tab 键 |
| 激活 | 轻微缩放 | 点击 |
| 禁用 | 灰色，cursor: not-allowed | disabled |
| 加载 | 转圈图标，不可点击 | loading |

## 输入框状态
| 状态 | 样式 | 触发 |
|------|------|------|
| 默认 | 浅灰边框 | - |
| 聚焦 | 主色边框，阴影 | 点击/TAB |
| 错误 | 红色边框，错误提示 | 验证失败 |
| 禁用 | 灰色背景 | disabled |

2.2 动效检查

进入动效：
- [ ] 页面进入有淡入/滑入
- [ ] 弹窗进入有缩放/滑入
- [ ] 列表项有交错动画
- [ ] 骨架屏有脉冲动画

退出动效：
- [ ] 弹窗退出有缩放/滑出
- [ ] Toast 自动消失

交互动效：
- [ ] 按钮点击有缩放/涟漪
- [ ] 卡片悬停有上浮
- [ ] 切换有过渡

性能要求：
- [ ] 动效时长 ≤ 300ms
- [ ] 不影响主线程
- [ ] 使用 transform/opacity

2.3 反馈检查

操作反馈：
- [ ] 点击按钮有视觉反馈
- [ ] 提交表单有加载状态
- [ ] 操作成功有成功提示
- [ ] 操作失败有错误提示
- [ ] 删除操作有确认弹窗

加载反馈：
- [ ] 首屏加载有骨架屏
- [ ] 局部加载有转圈图标
- [ ] 列表加载有 loading 指示器
- [ ] 图片加载有占位图

空状态反馈：
- [ ] 列表为空有空状态图
- [ ] 搜索无结果有提示
- [ ] 网络断开有离线提示

---

三、响应式适配检查

3.1 断点检查

/* 标准断点 */
/* 手机 */ @media (max-width: 767px)
/* 平板 */ @media (min-width: 768px) and (max-width: 1023px)
/* 桌面 */ @media (min-width: 1024px)
/* 大屏 */ @media (min-width: 1280px)

3.2 移动端检查

布局：
- [ ] 单列布局
- [ ] 侧边栏变底部导航
- [ ] 弹窗全屏或底部弹出
- [ ] 表格横向滚动

交互：
- [ ] 点击区域 ≥ 44px
- [ ] 不依赖 hover
- [ ] 滑动手势支持
- [ ] 底部固定操作栏

性能：
- [ ] 图片按需加载
- [ ] 减少动画
- [ ] 骨架屏优先

---

四、异常处理检查

4.1 错误状态

表单错误：
- [ ] 必填项未填有提示
- [ ] 格式错误有提示
- [ ] 错误信息具体、友好
- [ ] 定位到错误字段

API 错误：
- [ ] 网络超时有重试
- [ ] 服务器错误有提示
- [ ] 权限不足有引导
- [ ] Token 过期有处理

4.2 空状态

数据为空：
- [ ] 列表为空：插图 + 文字 + 操作按钮
- [ ] 搜索无结果：建议关键词
- [ ] 购物车为空：推荐商品
- [ ] 消息为空：引导发消息

设计规范：
- 图标/插图风格统一
- 文案简洁友好
- 提供下一步操作

4.3 边界情况

数据边界：
- [ ] 超长文字截断或换行
- [ ] 大数字格式化 (1.2k, 1.5M)
- [ ] 价格显示两位小数
- [ ] 时间格式化 (刚刚, 3分钟前)

操作边界：
- [ ] 输入长度限制
- [ ] 文件大小限制
- [ ] 上传数量限制
- [ ] 批量操作确认

---

五、打磨流程

5.1 逐页打磨

1. 选择一个页面
2. 按检查清单逐项检查
3. 记录问题清单
4. 逐项修复
5. 验收确认

5.2 问题优先级

优先级	问题类型	示例
P0	功能阻断	按钮点击无响应、表单无法提交
P1	严重影响	颜色对比度不够、移动端布局错乱
P2	明显缺陷	间距不一致、状态缺失
P3	细节优化	动效不够流畅、空状态不够美观

5.3 打磨记录

## [页面名称] 打磨记录

### 检查时间：2026-03-13

### 发现问题
| # | 问题 | 优先级 | 状态 |
|---|------|--------|------|
| 1 | 按钮悬停无动效 | P2 | ✅ 已修复 |
| 2 | 移动端导航错位 | P1 | 🔄 修复中 |
| 3 | 空状态缺插图 | P3 | ⏳ 待处理 |

### 修复记录
- [日期] 修复 #1: 添加 hover 动效，缩放 1.02

---

六、快速检查脚本

# 检查硬编码颜色
grep -rn "color: #" src/ --include="*.css" --include="*.vue"

# 检查硬编码间距
grep -rn "padding: [0-9]" src/ --include="*.css" --include="*.vue"

# 检查缺失的 alt 属性
grep -rn "<img" src/ --include="*.vue" | grep -v "alt="

# 检查缺失的 aria-label
grep -rn "<button" src/ --include="*.vue" | grep -v "aria-label"

---

七、工具推荐

设计工具

• Figma - 设计协作
• Storybook - 组件文档
• Framer - 动效设计

检查工具

• Lighthouse - 性能、无障碍
• axe DevTools - 无障碍检查
• Responsively - 响应式预览
• Polypane - 多设备预览

设计系统参考

• Ant Design
• Tailwind UI
• shadcn/ui

---

触发条件

当检测到以下情况时，自动启动此 skill：

1. 用户说"打磨 UI"、"优化界面"
2. 功能开发完成后
3. 用户对 UI 不满意
4. 准备发布前

---

核心原则

细节决定体验，体验决定留存

1. 先功能后打磨 - 功能正确是前提
2. 逐页逐项检查 - 不要遗漏
3. 优先级驱动 - 先修复 P0/P1
4. 用户视角 - 想象用户怎么用