AI UI 设计合规性检测：从人工审查到自动化合规引擎
一、设计合规审查的规模化困境：人工 Review 无法覆盖全量页面
UI 设计的合规性审查包括可访问性（WCAG）、品牌一致性（设计 Token 使用）、交互规范（组件状态完整性）和国际化（文本溢出处理）。传统审查依赖设计师逐页检查，但在大型项目中，页面数量可能达到数百个，每次迭代都需要重新审查。人工审查的覆盖率通常不到 30%，大量合规问题在线上才被发现。
AI 辅助的合规检测可以将覆盖率提升到接近 100%。核心思路是：将合规规则转化为可自动执行的检测脚本，AI 视觉模型补充无法用规则表达的检测（如布局是否对齐、视觉层级是否清晰），两者结合实现全量自动化审查。
二、AI 合规检测架构：规则引擎 + 视觉模型
合规检测分为两层：规则层处理可形式化的合规要求（对比度、Token 使用、ARIA 属性），AI 视觉层处理需要审美判断的合规要求（布局对齐、视觉层级、品牌一致性）。规则层精确但覆盖有限，AI 层覆盖更广但有误判。
flowchart TB A[页面截图 + DOM] --> B{合规检测} B --> C[规则引擎层] B --> D[AI 视觉层] C --> C1[对比度检测<br/>WCAG 标准] C --> C2[Token 使用检测<br/>设计系统合规] C --> C3[ARIA 属性检测<br/>可访问性合规] C --> C4[文本溢出检测<br/>国际化合规] D --> D1[布局对齐检测<br/>视觉一致性] D --> D2[组件识别<br/>品牌一致性] D --> D3[视觉层级评估<br/>信息架构合规] C1 --> E[合规报告] C2 --> E C3 --> E C4 --> E D1 --> E D2 --> E D3 --> E E --> F[严重程度分级<br/>Critical/Major/Minor] F --> G[修复建议]关键设计点：规则层的结果是确定性的（通过/不通过），AI 层的结果是概率性的（置信度分数）。合规报告应区分两类结果，避免将 AI 的"疑似问题"与规则的"确定违规"混淆。
三、生产级代码实现：规则引擎与 AI 视觉检测
3.1 合规规则引擎
// 合规规则定义 interface ComplianceRule { id: string; category: "accessibility" | "design-system" | "i18n" | "interaction"; severity: "critical" | "major" | "minor"; description: string; check: (element: HTMLElement) => CheckResult; } interface CheckResult { passed: boolean; message: string; suggestion?: string; } // 对比度合规规则 const contrastRule: ComplianceRule = { id: "a11y-contrast", category: "accessibility", severity: "critical", description: "文本与背景的对比度必须满足 WCAG AA 标准", check: (element) => { const style = window.getComputedStyle(element); const textColor = style.color; const bgColor = getEffectiveBackground(element); if (!bgColor) return { passed: true, message: "无法确定背景色" }; const ratio = calculateContrastRatio(textColor, bgColor); const fontSize = parseFloat(style.fontSize); const fontWeight = parseInt(style.fontWeight); const isLargeText = fontSize >= 18 || (fontSize >= 14 && fontWeight >= 700); const minRatio = isLargeText ? 3 : 4.5; if (ratio < minRatio) { return { passed: false, message: `对比度 ${ratio.toFixed(2)}:1 低于 ${minRatio}:1 要求`, suggestion: `建议将文字颜色加深或背景色调浅，使对比度达到 ${minRatio}:1`, }; } return { passed: true, message: `对比度 ${ratio.toFixed(2)}:1` }; }, }; // 设计 Token 使用合规规则 const tokenUsageRule: ComplianceRule = { id: "design-token-usage", category: "design-system", severity: "major", description: "样式值必须使用设计 Token，禁止硬编码", check: (element) => { const style = window.getComputedStyle(element); const violations: string[] = []; // 检查颜色是否硬编码 // 为什么检查硬编码：硬编码颜色绕过了 // 设计 Token 系统，导致品牌不一致和 // 主题切换失效 const colorProps = ["color", "backgroundColor", "borderColor"]; for (const prop of colorProps) { const value = style.getPropertyValue(prop); if (value && /^rgb\(|#[0-9a-f]{3,8}$/i.test(value.trim())) { // 检查是否与某个 Token 值匹配 if (!matchesAnyToken(value)) { violations.push(`${prop}: ${value}`); } } } if (violations.length > 0) { return { passed: false, message: `发现硬编码样式值: ${violations.join(", ")}`, suggestion: "请使用设计 Token 替代硬编码值", }; } return { passed: true, message: "样式值均使用设计 Token" }; }, }; // ARIA 属性合规规则 const ariaRule: ComplianceRule = { id: "a11y-aria", category: "accessibility", severity: "critical", description: "交互元素必须有正确的 ARIA 属性", check: (element) => { const tagName = element.tagName.toLowerCase(); const role = element.getAttribute("role"); const violations: string[] = []; // 按钮必须有可访问名称 // 为什么检查可访问名称：屏幕阅读器 // 通过可访问名称识别元素用途， // 没有名称的按钮对辅助技术用户不可用 if (tagName === "button" || role === "button") { const hasAriaLabel = element.hasAttribute("aria-label"); const hasAriaLabelledBy = element.hasAttribute("aria-labelledby"); const hasTextContent = element.textContent?.trim().length > 0; const hasImgAlt = element.querySelector("img[alt]"); if (!hasAriaLabel && !hasAriaLabelledBy && !hasTextContent && !hasImgAlt) { violations.push("按钮缺少可访问名称（aria-label 或文本内容）"); } } // 图片必须有 alt 属性 if (tagName === "img") { if (!element.hasAttribute("alt")) { violations.push("图片缺少 alt 属性"); } } if (violations.length > 0) { return { passed: false, message: violations.join("; "), }; } return { passed: true, message: "ARIA 属性合规" }; }, };3.2 合规检测引擎
class ComplianceEngine { private rules: ComplianceRule[] = []; addRule(rule: ComplianceRule) { this.rules.push(rule); } async auditPage(root: HTMLElement = document.body): Promise<ComplianceReport> { const results: RuleResult[] = []; const elements = root.querySelectorAll("*"); for (const element of elements) { const htmlEl = element as HTMLElement; for (const rule of this.rules) { try { const result = rule.check(htmlEl); if (!result.passed) { results.push({ ruleId: rule.id, category: rule.category, severity: rule.severity, element: this.describeElement(htmlEl), message: result.message, suggestion: result.suggestion, }); } } catch (e) { // 规则执行失败时记录但不中断 // 为什么不中断：单个规则失败不应阻止 // 其他规则的执行；合规检测应尽可能 // 覆盖所有问题 console.warn(`规则 ${rule.id} 执行失败:`, e); } } } // 按严重程度排序 const severityOrder = { critical: 0, major: 1, minor: 2 }; results.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity] ); return { timestamp: new Date().toISOString(), totalElements: elements.length, totalViolations: results.length, criticalCount: results.filter((r) => r.severity === "critical").length, majorCount: results.filter((r) => r.severity === "major").length, minorCount: results.filter((r) => r.severity === "minor").length, results, }; } private describeElement(el: HTMLElement): string { const tag = el.tagName.toLowerCase(); const classes = el.className ? `.${el.className.split(" ").join(".")}` : ""; const id = el.id ? `#${el.id}` : ""; const text = el.textContent?.slice(0, 30) || ""; return `<${tag}${id}${classes}> "${text}"`; } }3.3 AI 视觉合规检测
class VisualComplianceChecker { /** * AI 视觉合规检测：布局对齐、视觉层级 * 为什么需要 AI 视觉层：某些合规问题无法用 * DOM 规则检测——如元素是否视觉对齐、 * 间距是否一致、视觉层级是否清晰； * 这些需要"看"页面才能判断 */ async checkLayoutAlignment( screenshot: Blob ): Promise<AlignmentResult> { // 调用视觉模型分析截图 const analysis = await this.analyzeWithVisionModel(screenshot); return { misalignedElements: analysis.misaligned, inconsistentSpacing: analysis.spacingIssues, confidence: analysis.confidence, }; } async checkVisualHierarchy( screenshot: Blob ): Promise<HierarchyResult> { const analysis = await this.analyzeWithVisionModel(screenshot); return { hierarchyIssues: analysis.hierarchyProblems, // 为什么标记为"建议"而非"违规"： // 视觉层级是主观判断，AI 的结论 // 不应直接标记为违规，而是作为 // 设计师审查的参考 severity: "suggestion" as const, }; } private async analyzeWithVisionModel( screenshot: Blob ): Promise<VisionAnalysisResult> { // 实际实现：调用多模态 AI 模型 // 输入：页面截图 + 合规检测 Prompt // 输出：结构化的合规分析结果 throw new Error("需要接入视觉模型 API"); } }四、AI 合规检测的架构权衡：误判率、覆盖度与修复成本
规则层与 AI 层的误判差异：规则层的误判率接近 0（规则是确定性的），但覆盖度有限（只能检测可形式化的问题）。AI 层的覆盖度更高，但误判率约 15-20%——将正常设计误判为违规，或遗漏真正的违规。建议规则层的结果直接阻断发布，AI 层的结果作为建议供人工审查。
检测频率与性能：全量 DOM 检测在大型页面上可能需要数秒。CI 环境中建议只检测变更影响的组件，而非全量页面。开发环境可以实时检测（如 VS Code 插件），但需要限制检测频率避免影响编辑体验。
修复建议的可行性：检测出问题后，自动生成修复建议比仅报告问题更有价值。但修复建议的可行性取决于问题的复杂度——"添加 aria-label"可以直接修复，"调整视觉层级"需要设计师判断。建议对 Critical 级别问题提供自动修复脚本，对 Major/Minor 级别问题提供修复建议。
合规标准的版本管理：WCAG 和设计规范会随时间更新，合规检测规则需要同步更新。建议将规则文件纳入版本控制，每次规范更新时同步修改规则，并通过 CI 确保规则的正确性。
五、总结
AI UI 设计合规检测的核心是"规则层 + AI 层"的双引擎架构。规则层处理确定性的合规要求（对比度、Token、ARIA），AI 层处理需要审美判断的合规要求（对齐、层级、品牌一致性）。落地时建议先实现规则层的核心检测（对比度 + ARIA），再逐步扩展 Token 使用和国际化检测。AI 视觉层作为补充，结果标记为"建议"而非"违规"。合规报告按严重程度分级，Critical 级别问题阻断发布。
