SuperAPI AI 工具集

design-to-code-check

设计与创作

查看项目

更新于 10-16 09:34

技能介绍

用途:审查设计规范与代码实现之间的一致性,输出按维度和严重程度分类的结构化差异报告,适用于设计 QA、交接评审与签核。

主要能力:从五个维度检查——间距与布局、颜色与视觉处理、字体排版、交互状态、响应式与自适应行为。差异分为四类:Type I 实现错误(规范明确但代码不符)、Type II 规范缺口(设计未定义、开发做了合理假设)、Type III 系统不一致(设计本身偏离设计系统)、Type IV 已接受的偏差。严重程度分 Critical、High、Medium、Low,其中无障碍回归(焦点不可见、对比度不足、无法键盘操作)始终为 Critical。

使用方式:先确认 frontmatter 中 references 路径存在,缺失则说明安装不完整,需按 1-INSTALL.md 重装并运行 verify-install.sh。若存在 .ds-ops-config.yml,按配置读取 severity、system.framework、system.styling、integrations.figma、integrations.chromatic、integrations.github、gates.design_to_code。可自动拉取 Figma MCP(get_design_context、get_variable_defs 或 figma_get_component_for_development、figma_capture_screenshot)、Chromatic 视觉快照与 GitHub 组件源码。随后收集设计参考与实现参考,运行设计规范完整性清单,逐维度检查,分类差异并生成报告,含差异日志、按维度汇总、规范缺口、范围与质量检查。

限制:若只有设计或实现一侧可用,依赖该侧的维度标记为“未检查”而非通过;仅从源码读取选择器与分支时,渲染效果标记为“未检查”,除非使用了运行构建或 Storybook。Prop API 契约与 AI 描述漂移需分别转交 component-api-validator 与 ai-component-description。每条差异须同时具备实现侧 file:line 与设计侧 node id 或规范行,否则列入“未检查”。