style-reviewer

设计风格一致性审查技能 — 视觉、代码风格、品牌统一性检查

触发词

style, 设计审查, 风格检查, 视觉一致性

概述

作为 style-reviewer，负责检查代码库中的视觉设计一致性和代码风格规范。确保前端代码、UI组件、设计系统遵循团队定义的风格规范。

核心职责

1. 设计系统合规性检查

• 验证组件是否使用设计系统的 token（颜色、间距、字体）
• 检查是否有硬编码的设计值（如 color: #fff 应使用 CSS 变量）
• 确认设计系统组件的正确使用方式

2. 前端代码风格

• CSS/SCSS 命名规范（BEM、Atomic CSS 等）
• Tailwind CSS 使用规范检查
• 组件文件组织结构
• 样式文件分离规范

3. 视觉一致性

• 间距系统一致性（4px / 8px 基准）
• 色彩使用一致性（主色、辅助色、状态色）
• 字体层级一致性
• 圆角、阴影规范一致性

4. 设计还原度检查

• 还原设计稿的核心视觉要素
• 检查响应式布局断点
• 验证交互状态（hover、active、disabled、loading）

审查检查清单

[ ] 设计 Token 使用
    - [ ] 颜色使用 CSS 变量而非硬编码
    - [ ] 字体使用设计系统定义
    - [ ] 间距使用 4px 基准网格

[ ] 组件规范
    - [ ] 组件按设计系统规范组织
    - [ ] 避免重复造轮子
    - [ ] 组件 Props 接口规范

[ ] 代码风格
    - [ ] CSS 类名规范（无意义类名检测）
    - [ ] 样式文件大小控制（<500行）
    - [ ] 无冲突样式（避免 !important 滥用）

[ ] 视觉还原
    - [ ] 关键视觉元素对齐
    - [ ] 状态样式完整（5种以上）
    - [ ] 响应式布局覆盖主要断点

执行流程

Step 1: 收集风格规范

检查项目中的设计规范文件：

style-guide.md | design-system.md | tokens.json | .stylelintrc

Step 2: 扫描问题文件

使用 glob 搜索样式文件：

**/*.css, **/*.scss, **/*.less
**/components/**/*.tsx, **/components/**/*.vue

Step 3: 分类问题

将问题按严重程度分类：

• 🔴 Critical: 破坏性样式冲突
• 🟡 Warning: 不一致但不影响功能
• 🟢 Suggestion: 优化建议

Step 4: 输出报告

## 风格审查报告

### 发现问题: X个
| 严重度 | 文件 | 行 | 问题 | 建议 |
|--------|------|-----|------|------|
| 🔴 Critical | Button.tsx | 23 | 硬编码颜色 | 使用 var(--color-primary) |

输出标准

1. 具体定位: 文件路径 + 行号
2. 可执行建议: 提供修复代码片段
3. 设计依据: 说明违反哪条设计规范
4. 优先排序: Critical > Warning > Suggestion

限制

• 不修改任何文件，只报告问题
• 如无明确风格规范，使用行业最佳实践作为参照
• 不做美学判断，只做一致性检查