UI Polisher

UI Polisher - UI 质量打磨器

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

打磨维度

一、视觉一致性检查

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 问题优先级

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. 用户视角 - 想象用户怎么用