用途
ss-review 是一项 UI 设计审查技能,用于检查 UI 代码是否符合设计系统规范、无障碍要求与最佳实践。它的定位是“审查并给出建议”,不直接编辑实现或项目配置。如果用户要求修复发现的问题,应作为单独的实现步骤、使用相应的编辑工具进行,而不是扩展这个只读技能的范围。它也会尊重用户更窄的请求范围。
主要能力(检查清单)
- 设计 Token 与配方合规:不硬编码十六进制颜色,使用语义 token;不在 Tailwind 中硬编码 px 间距;图案几何/层级使用选定配方或显式语义变量;不在无关配方间硬编码统一的 rounded-2xl + shadow + mx-6 语言。
- 组件约定:使用 data-slot;使用 cn() 合并 className;props 用 React.ComponentProps<> 类型化;支持 className 覆盖;具名导出;不创建只添加 className 的包装组件。
- 无障碍:触控目标在触控表面 ≥ 44x44px(指针优先的桌面控件在适配器与批准组件契约支持时可为 36–40px);交互元素有 focus-visible 样式;必要时使用正确的 aria-*;颜色对比满足 WCAG AA(正文 4.5:1,大字 3:1);动画尊重 prefers-reduced-motion;图片有 alt;表单输入有关联标签。
- 界面最佳实践:无横向溢出;交互元素间触控友好间距;适配器要求时处理移动端安全区;桌面密度/字号与非 Web 画布/导出规则遵循选定适配器;文本在适配器观看距离与支持缩放下可读;可滚动容器使用 -webkit-overflow-scrolling: touch。
- 性能:无不必要的重渲染;图片懒加载;重型组件代码分割。
- 排版:使用锁定的字体族与配方适配的字号角色;字号、字重、行距、字距遵循编译后的字号角色与批准 token;显示、标题、正文、注脚角色保持区分;语言、脚本、换行、缩放不导致裁切或影响阅读;手册示例是默认值,不是替换已批准字号体系的依据。
- 间距一致性:使用单一维护的 token 尺度与选定配方的主要节奏;偏离尺度的值需有视觉、画布或平台理由;使用 size-* 简写代替 w-* h-;使用 ms-/me-* 代替 ml-/mr-;动效过渡使用设计 token。
- 连贯性:检查是否是一个有意设计的角色系统,而非每个组件使用相同值;配方绑定的圆角尺度;一个可识别的主操作加所选语法的稳定语义/分类/品牌角色;不用 emoji 作为 UI 图标;状态与分类颜色有稳定角色,普通状态不与紧急状态竞争;无未签约的装饰色;一种阴影语言;一种图标族/填充模式/描边粗细;嵌套轮廓遵循配方关系;控件高度一致;错误/状态不只依赖颜色。
使用方式与产物边界
在开始前,需遵循每次会话仅一次的更新预检。采用注册表优先的产物边界:当 .styleseed/project.json 与 .styleseed/artifacts/index.json 存在时,先解析请求的 artifact ID,然后只读取 .styleseed/bundles/<artifact-id>.md 与 .styleseed/manifests/<artifact-id>.json。对于注册表项目,绝不回退到全局旧版 bundle。旧版项目仅在没有注册表时使用 .styleseed/effective-rules.md。
如果任一注册表文件存在,则要求两个文件都存在且 artifact 配置有效;只使用所选 artifact 的 bundle 与 manifest;不完整的注册表不算旧版项目。只有当两个注册表文件都不存在时,才读取 .styleseed/effective-rules.md 与 .styleseed/manifest.json。如果所选 bundle 缺失或陈旧,报告缺失证据;不要在仅审查请求中重新生成,也不要声称已验证合规。
审查顺序上,先审查任务适配性与语法连贯性,再看框架约定。对于非 Web 产物,用活动适配器的渲染/导出检查替代仅针对 React/Tailwind 的检查。可为每项违规引用所选契约,并区分核心失败、契约漂移、可选建议与缺失证据。库约定仅在项目使用这些约定时适用。
适用场景
适合需要在提交前或评审阶段系统性检查 UI 代码与设计系统一致性的场景,尤其是使用 StyleSeed 注册表或旧版规则的项目。
限制与不适用场景
仅处理无障碍问题 → 使用 /ss-a11y;Nielsen UX 启发式 → 使用 /ss-audit;快速自动检查 → 使用 /ss-lint;非 UI 代码(数据获取、业务规则)不适用。输出格式为:评分(Pass / Needs Improvement / Fail)、问题(带 file:line 引用)、修复(针对每个问题的具体代码变更)。