利用 AI 进行 UI 代码评审以确保设计系统一致性
解决 UI 开发中常见的“视觉微小偏差”问题：通过引入 StyleSeed 设计系统规范，让 AI 能够像资深 UI 工程师一样审计代码，快速发现硬编码颜色、间距违规及无障碍缺陷。
为什么需要这个技能
在前端开发中，UI 评审往往依赖人工在 Figma 和代码之间反复比对。即使是经验丰富的开发者，也难以在大量代码中精准捕捉到所有不符合设计令牌（Design Tokens）的硬编码值，或者忽略移动端触控目标的尺寸问题。
本技能将 AI 的关注点从“通用前端代码 Review”转移到“设计系统合规性审计”。它不再是泛泛而谈地建议“这里可以优化”，而是对照 StyleSeed 规范，指出具体哪个颜色、哪个间距违背了系统节奏，并提供可直接替换的令牌建议。
适用场景
- 设计系统对齐：当组件或页面必须严格遵循 StyleSeed (Toss) 设计语言时。
- UI 密集型 PR 评审：在合并包含大量样式改动的代码前，检查是否存在设计系统违规。
- 视觉微调阶段：当页面看起来“大致正确”但感觉细节不对（Off-pixel）时。
- 无障碍与移动端验收：快速验证触控区域、色彩对比度和安全区域（Safe Area）处理。
核心工作流
AI 将按照以下五个维度对代码进行扫描：
- 设计令牌（Design Tokens）：检查是否存在硬编码的 Hex 颜色或随机阴影值，要求必须使用语义化令牌。
- 组件约定：核查是否使用了类名合并助手（class merge helper）、是否重复造轮子而未复用现有原子组件。
- 无障碍访问（Accessibility）：验证触控目标是否足够大、键盘焦点状态是否可见、
aria-*属性是否完备。 - 移动端 UX：检查是否存在水平溢出、安全区域处理是否正确、交互间距是否符合大拇指操作习惯。
- 排版与间距：核对字体层级是否符合系统规范，间距是否遵循设计网格而非随机数值。
输出结果将包含：最终判定（通过/需改进/失败）、带行号的问题优先级列表、具体的修复代码方案。
下载和安装
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐