---

name: ui-review description: "审查 UI 代码是否符合 StyleSeed 设计系统规范、无障碍性、移动端人体工学、间距规范和实现质量。" category: design risk: safe source: community source_repo: bitjaru/styleseed source_type: community date_added: "2026-04-08" author: bitjaru tags: [ui, review, design-system, accessibility, styleseed] tools: [claude, cursor, codex, gemini]

UI 审查

概述

作为 StyleSeed 的一部分，此技能根据 Toss seed 的规范审计 UI 代码，而非将其作为通用前端工作来审查。它专注于设计令牌规范、组件人体工学、无障碍性、移动端适配、排版和间距一致性。

何时使用

• 当组件或页面需要遵循 StyleSeed Toss 设计语言时使用
• 当审查以 UI 为主的 PR 以检查一致性和设计系统违规时使用
• 当输出看起来"基本没问题"但在细微之处感觉不对时使用
• 当需要带有具体修复建议的结构化审查时使用

审查清单

设计令牌

• 当存在语义化令牌时不使用硬编码的十六进制颜色
• 当存在令牌化阴影时不使用自创的阴影值
• 不使用系统比例之外的任意圆角选择
• 不使用破坏 seed 节奏的随机间距值

组件规范

• 使用项目的类合并辅助函数
• 在适当时支持 className 扩展
• 使用约定的类型模式
• 避免仅转发一个类字符串的包装组件
• 在发明新组件之前复用现有基础组件

无障碍性

• 触摸目标对移动端足够大
• 可见的键盘焦点状态
• 需要时提供标签和 aria-* 属性
• 足够的颜色对比度
• 动画遵循减少动效偏好

移动端用户体验

• 无水平溢出
• 相关位置处理安全区域
• 可读的文字大小
• 拇指友好的交互间距
• 底部导航或固定操作不遮挡内容

排版和间距

• 使用系统字体层级
• 展示标题和标题不过于松散
• 正文保持可读性
• 间距遵循 seed 网格而非任意值

输出格式

返回：

1. 结论：通过、需要改进或不通过
2. 按优先级排列的问题列表，尽可能附带文件和行号引用
3. 每个问题的具体修复方案
4. 设计意图不明确时的开放性问题

最佳实践

• 根据 seed 规范审查，而非个人品味
• 将风格偏移与真正的可用性或无障碍性问题区分开
• 优先提供可操作的差异而非抽象批评
• 当现有组件已解决问题时指出重复

附加资源

• StyleSeed 仓库
• 源技能

限制

• 仅在任务明确匹配上述描述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停下来寻求澄清。