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 级别问题阻断发布。
