AI 生成组件怎么验收：AST、Token 与截图一起看

AI 生成组件怎么验收AST、Token 与截图一起看AI 能把设计稿很快翻成 JSX 或 Vue但“截图像”不等于组件能进仓库。常见问题是满屏绝对定位、层层套div以及把颜色和间距写死。短期看不出来换主题、补无障碍或适配窄屏时就会还债。我更愿意把验收拆成两件事画面是否接近基准图代码是否遵守现有的 Token 和结构约束。本文用 AST 检查、Token 覆盖率和 SSIM 做一条可复现的检查链供 AI 生成组件提交前使用。视觉与结构一起验AI 生成的组件先进入检查链再由评审决定是否合并。AST 用来找硬编码样式和明显的结构问题Headless 浏览器在固定环境里跑截图回归。阈值应按组件类型和已有基线设定不宜把一次评分当成自动合并条件。flowchart TD subgraph 资源输入与代码生成 A[Figma 设计元数据 / Design Token 规则库] -- B[AI 辅助 UI 代码生成引擎] B -- C[生成代码组件 JSX / TSX] end subgraph 静态 AST 语义与 Token 契约校验 C -- D[Babel / SWC AST 语法树解析器] D -- E{Design Token 契约检查} E -- 存在硬编码颜色/尺寸 (#3b82f6 / 16px) -- F[标记 Token 违规项并拦截] E -- Token 覆盖率 90% 且无非法嵌套 -- G[放行至 Headless 动态渲染管线] end subgraph 动态图像 SSIM 渲染比对 G -- H[Puppeteer / Playwright 渲染 DOM 快照] H -- I[与 Figma 导出的基准图执行 SSIM 比对] I -- SSIM 结构相似度 0.95 -- J[标记视觉还原度不达标] I -- SSIM 0.95 且无布局溢出 -- K[自动通过构建并创建 Merge Request] end F J -- L[反馈精准提示词上下文至 AI 重新生成]截图接近基准图也不能说明组件可维护。比如把$color-primary-500换成#3B82F6画面可能暂时没差主题切换时就会露出问题。AST 报告应把这类位置列出来交给评审判断是否需要改回 Token。评估诊断命令与静态 AST 分析自动化检查可以把静态分析和截图比对放在一起但报告更适合用来定位问题而不是给组件下结论。以下命令是检查链的示意接入前请替换为项目实际存在的脚本与组件地址# 1. 运行自定义 AST 扫描脚本计算 AI 生成 TSX 代码中的 Design Token 匹配率 npx design-token-lint --src./generated/components --tokens./design-system/tokens.json --outtoken-report.json # 2. 启动 Headless 渲染抓取生成组件的 DOM 图像与 Figma 原稿做 SSIM 比对 npx puppeteer-ssim-checker --component-urlhttp://localhost:6006/iframe.html?idai-component --baseline./baselines/card.png --outvisual-report.json # 3. 提取 AST 与图像比对综合得分 jq {token_coverage: .tokenCoverage, ssim_score: .ssim, hardcoded_count: .hardcodedCount} token-report.json visual-report.jsontoken_coverage与硬编码数量可以作为提醒。具体阈值取决于团队已有组件和例外规则报告里最好保留文件名、属性和值让评审知道该从哪里改起。用 AST 找出 Token 偏离处下面的 TypeScript 模块用 Babel Parser 遍历 AI 生成的 TSX找出内联样式中的硬编码值与不符合约定的 class并计算一个可供参考的 Token 覆盖率。import * as parser from babel/parser; import traverse from babel/traverse; import * as t from babel/types; export interface TokenAnalysisResult { totalStyleNodes: number; validTokenNodes: number; tokenCoverage: number; hardcodedValues: string[]; } /** * 校验 AI 生成 TSX 代码中的 Design Token 覆盖率 * param sourceCode AI 生成的 TSX 源码 * param allowedTokens 设计系统已注册的合法 Token 集合 */ export function analyzeDesignTokenCoverage( sourceCode: string, allowedTokens: Setstring ): TokenAnalysisResult { const ast parser.parse(sourceCode, { sourceType: module, plugins: [jsx, typescript], }); let totalStyleNodes 0; let validTokenNodes 0; const hardcodedValues: string[] []; traverse(ast, { // 遍历 JSX 元素的 style 属性与 className 属性 JSXAttribute(path) { const attributeName path.node.name.name; // 检查内联 style 属性中的硬编码数值 if (attributeName style path.node.value?.type JSXExpressionContainer) { const expression path.node.value.expression; if (t.isObjectExpression(expression)) { expression.properties.forEach((prop) { if (t.isObjectProperty(prop) t.isIdentifier(prop.key)) { totalStyleNodes; const propVal prop.value; // 检查值是否使用了 var(--token-name) 形式 if (t.isStringLiteral(propVal)) { if (propVal.value.includes(var(--) || allowedTokens.has(propVal.value)) { validTokenNodes; } else { hardcodedValues.push(${prop.key.name}: ${propVal.value}); } } else if (t.isNumericLiteral(propVal)) { // 硬编码像素数字 (如 margin: 16) hardcodedValues.push(${prop.key.name}: ${propVal.value}px); } } }); } } // 检查 className 是否完全由设计系统原子类组成 if (attributeName className t.isStringLiteral(path.node.value)) { const classNames path.node.value.value.split(/\s/); classNames.forEach((cls) { if (cls.trim()) { totalStyleNodes; if (allowedTokens.has(cls) || cls.startsWith(ds-)) { validTokenNodes; } else { hardcodedValues.push(className: ${cls}); } } }); } }, }); const tokenCoverage totalStyleNodes 0 ? (validTokenNodes / totalStyleNodes) * 100 : 100; return { totalStyleNodes, validTokenNodes, tokenCoverage: Number(tokenCoverage.toFixed(2)), hardcodedValues, }; }边界条件推演与防范机制AI 生成组件时下面两类问题值得单独看1. 深度嵌套与无语义div堆叠AI 解析复杂 Figma 分组时常为辅助框生成无语义的div。层级过深会增加样式计算和排查成本但没有通用的层数红线。处理方式在 AST 报告中标出 DOM 深度和连续无语义容器由开发者结合 CSS、事件绑定和无障碍语义手工处理。不要直接自动扁平化 DOM这很容易改变布局或交互。2. 色值微小偏差与像素比对陷阱在不同的 OS 操作系统与浏览器渲染引擎下由于 Color Profile如 sRGB 与 Display P3的解析差异静态图像截取的 SSIM 得分可能因渲染色彩空间的不一致而产生误报。处理方式截图任务固定浏览器版本、字体、视口和色彩配置例如统一到 sRGB。阈值附近的差异保留人工复核先排除字体抗锯齿和色彩配置造成的噪声。最后看结构也看视觉实际落地时先守住三件事Token 不被硬编码绕开AST 负责结构问题截图负责视觉回归失败报告要带上具体违规项再交给人或模型改下一版。这样审的不是“AI 写得像不像”而是这段组件能不能维护。