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): PromiseComplianceReport { 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 ): PromiseAlignmentResult { // 调用视觉模型分析截图 const analysis await this.analyzeWithVisionModel(screenshot); return { misalignedElements: analysis.misaligned, inconsistentSpacing: analysis.spacingIssues, confidence: analysis.confidence, }; } async checkVisualHierarchy( screenshot: Blob ): PromiseHierarchyResult { const analysis await this.analyzeWithVisionModel(screenshot); return { hierarchyIssues: analysis.hierarchyProblems, // 为什么标记为建议而非违规 // 视觉层级是主观判断AI 的结论 // 不应直接标记为违规而是作为 // 设计师审查的参考 severity: suggestion as const, }; } private async analyzeWithVisionModel( screenshot: Blob ): PromiseVisionAnalysisResult { // 实际实现调用多模态 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、ARIAAI 层处理需要审美判断的合规要求对齐、层级、品牌一致性。落地时建议先实现规则层的核心检测对比度 ARIA再逐步扩展 Token 使用和国际化检测。AI 视觉层作为补充结果标记为建议而非违规。合规报告按严重程度分级Critical 级别问题阻断发布。
AI UI 设计合规性检测：从人工审查到自动化合规引擎
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): PromiseComplianceReport { 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 ): PromiseAlignmentResult { // 调用视觉模型分析截图 const analysis await this.analyzeWithVisionModel(screenshot); return { misalignedElements: analysis.misaligned, inconsistentSpacing: analysis.spacingIssues, confidence: analysis.confidence, }; } async checkVisualHierarchy( screenshot: Blob ): PromiseHierarchyResult { const analysis await this.analyzeWithVisionModel(screenshot); return { hierarchyIssues: analysis.hierarchyProblems, // 为什么标记为建议而非违规 // 视觉层级是主观判断AI 的结论 // 不应直接标记为违规而是作为 // 设计师审查的参考 severity: suggestion as const, }; } private async analyzeWithVisionModel( screenshot: Blob ): PromiseVisionAnalysisResult { // 实际实现调用多模态 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、ARIAAI 层处理需要审美判断的合规要求对齐、层级、品牌一致性。落地时建议先实现规则层的核心检测对比度 ARIA再逐步扩展 Token 使用和国际化检测。AI 视觉层作为补充结果标记为建议而非违规。合规报告按严重程度分级Critical 级别问题阻断发布。
