AI 辅助设计规范检查：自动验证间距、字号与颜色的一致性-开发者社区

AI 辅助设计规范检查：自动验证间距、字号与颜色的一致性

一、那个用 13px 字号的表单和用 14px 的侧边栏——没人注意到，直到审计那天

一个后台管理系统的"设计一致性审计"发现了一个让人脸红的数字：全站 270 个页面中，使用的字号值有 18 种（从 11px 到 48px），但设计系统只定义了 7 种。间距值出现了 23 种（从 2px 到 120px），但 Token 只定义了 9 种。颜色值出现了 57 种 HEX 值，Token 只定义了 32 种。这些"非法值"不是恶意添加的——是 7 位开发者在 3 年时间里，每次解决一个"这里间距看起来不太够"的问题时，随手敲下的margin-left: 14px或color: #5B6C7D。

代码可以跑、页面视觉也"还行"，但"还行"是设计规范的慢性死亡。每一次硬编码都让 Token 的权威性下降一点。AI 在设计规范检查中的角色是充当一个"永不疲劳的规范警察"——扫描所有 CSS 和 JSX 文件，找出每一个不在 Token 注册表中的样式值，生成合规报告，并在 CI 中拦截新的违反。

二、设计规范的自动审计模型

flowchart TD A["扫描源码<br/>(CSS/JSX/TSX/Vue)"] --> B["提取样式值"] B --> C["分类"] C --> C1["间距值<br/>(margin/padding/gap)"] C --> C2["字号值<br/>(font-size)"] C --> C3["颜色值<br/>(HEX/RGB/HSL)"] C --> C4["圆角值<br/>(border-radius)"] C1 --> D{"在 Token 表中?"} C2 --> D C3 --> D C4 --> D D -->|"是"| E["✅ 合规"] D -->|"否"| F["❌ 违反规范<br/>标记 + 建议替代"] F --> G["生成合规报告"]

三、设计规范自动检查器

/** * 设计规范自动检查引擎 */ import { readFileSync } from 'fs'; import { glob } from 'glob'; import postcss from 'postcss'; interface TokenRegistry { spacing: number[]; // 允许的间距值（px）: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64] fontSize: number[]; // 允许的字号值（px）: [12, 14, 16, 18, 20, 24, 30, 36, 48] colors: string[]; // 允许的 HEX 颜色: ['#3B82F6', '#F8FAFC', ...] radius: number[]; // 允许的圆角值（px）: [0, 4, 8, 12, 16, 9999] } interface DesignViolation { file: string; line: number; property: string; actualValue: string; // 实际使用的值 suggestion: string; // 推荐使用的 Token severity: 'error' | 'warning'; } const TOKEN_REGISTRY: TokenRegistry = { spacing: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64], fontSize: [12, 14, 16, 18, 20, 24, 30, 36, 48], colors: [ '#3B82F6', '#2563EB', '#1D4ED8', '#0F172A', '#475569', '#94A3B8', '#FFFFFF', '#F8FAFC', '#F1F5F9', '#E2E8F0', '#CBD5E1', '#EF4444', '#22C55E', ], radius: [0, 4, 8, 12, 16, 9999], }; /** * 检查 CSS 文件中的设计规范违反 */ function checkCSSFile(filePath: string): DesignViolation[] { const violations: DesignViolation[] = []; const css = readFileSync(filePath, 'utf-8'); const root = postcss.parse(css); root.walkDecls((decl) => { const prop = decl.prop; const value = decl.value; // 间距检查（跳过 CSS 变量赋值和 0 值） if (prop.match(/^(margin|padding|gap)/) && !value.includes('var(') && value !== '0') { checkSpacing({ prop, value, filePath, source: decl.source, violations, }); } // 字号检查 if (prop === 'font-size' && !value.includes('var(')) { checkFontSize({ prop, value, filePath, source: decl.source, violations }); } // 颜色检查 if (prop.match(/^(color|background|border-color)/) && value.match(/^#[0-9a-fA-F]+/)) { checkColor({ prop, value: value.trim().split(' ')[0], filePath, source: decl.source, violations }); } // 圆角检查 if (prop === 'border-radius' && value.match(/^\d+px$/)) { checkRadius({ prop, value, filePath, source: decl.source, violations }); } }); return violations; } function checkSpacing({ prop, value, filePath, source, violations }: any) { const pxMatch = value.match(/^(\d+)px/); if (!pxMatch) return; const px = parseInt(pxMatch[1]); if (!TOKEN_REGISTRY.spacing.includes(px)) { const nearest = findNearest(px, TOKEN_REGISTRY.spacing); violations.push({ file: filePath, line: source?.start?.line || 0, property: prop, actualValue: `${px}px`, suggestion: `使用 var(--space-${nearest}) (${nearest}px)`, severity: 'error', }); } } function checkFontSize({ prop, value, filePath, source, violations }: any) { const pxMatch = value.match(/^(\d+)px/); if (!pxMatch) return; const px = parseInt(pxMatch[1]); if (!TOKEN_REGISTRY.fontSize.includes(px)) { const nearest = findNearest(px, TOKEN_REGISTRY.fontSize); violations.push({ file: filePath, line: source?.start?.line || 0, property: prop, actualValue: `${px}px`, suggestion: `使用 var(--font-size-${nearest}) (${nearest}px)`, severity: 'warning', }); } } function checkColor({ value, filePath, source, violations }: any) { const hex = value.toUpperCase(); if (!TOKEN_REGISTRY.colors.map(c => c.toUpperCase()).includes(hex)) { violations.push({ file: filePath, line: source?.start?.line || 0, property: 'color', actualValue: hex, suggestion: `颜色 "${hex}" 不在 Token 注册表中。请添加到 Token 或使用已有颜色。`, severity: 'error', }); } } function checkRadius({ value, filePath, source, violations }: any) { const px = parseInt(value); if (!TOKEN_REGISTRY.radius.includes(px)) { const nearest = findNearest(px, TOKEN_REGISTRY.radius); violations.push({ file: filePath, line: source?.start?.line || 0, property: 'border-radius', actualValue: value, suggestion: `使用 var(--radius-${nearest}) (${nearest}px)`, severity: 'warning', }); } } function findNearest(target: number, allowed: number[]): number { return allowed.reduce((prev, curr) => Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev ); } /** * 扫描整个项目的设计规范合规性 */ async function auditDesignCompliance(projectDir: string) { const cssFiles = await glob(`${projectDir}/**/*.{css,scss,less}`, { ignore: ['**/node_modules/**', '**/dist/**'], }); const allViolations: DesignViolation[] = []; for (const file of cssFiles) { const violations = checkCSSFile(file); allViolations.push(...violations); } // 按严重性分组统计 const errors = allViolations.filter(v => v.severity === 'error'); const warnings = allViolations.filter(v => v.severity === 'warning'); return { total: allViolations.length, errors: errors.length, warnings: warnings.length, violations: allViolations, report: generateComplianceReport(allViolations), }; } function generateComplianceReport(violations: DesignViolation[]): string { const byProperty: Record<string, DesignViolation[]> = {}; for (const v of violations) { const key = v.property; if (!byProperty[key]) byProperty[key] = []; byProperty[key].push(v); } const lines = ['## 设计规范合规审计报告\n']; for (const [prop, items] of Object.entries(byProperty)) { lines.push(`### ${prop}（${items.length} 项违反）`); for (const item of items.slice(0, 5)) { lines.push(`- \`${item.file}:${item.line}\` — ${item.actualValue} → ${item.suggestion}`); } if (items.length > 5) lines.push(`- ... 及其他 ${items.length - 5} 项`); lines.push(''); } return lines.join('\n'); } export { auditDesignCompliance, checkCSSFile, TOKEN_REGISTRY }; export type { DesignViolation, TokenRegistry };

四、检查器的边界

"合理违反"与"误报"的差异。有些设计规范违反是故意的——比如一个折扣标签需要border-radius: 20px来形成胶囊形状，而 Token 只定义了0/4/8/12/16/9999。在 Token 中20px不在表内，但 9999 会形成完全的半圆角，不符合设计需求。这种情况下，团队的策略应该是"将 20px 增加到 Token 注册表"而非"警告但不处理"——如果它是合理需求，就应该被正式化。

Token 的演进和检查的同步。当设计师在 Figma 中新增了一个间距值--space-14: 56px，Token 注册表需要同步更新。如果检查器的 TOKEN_REGISTRY 是手动维护的，它会在 3 天内落后于真实的 Token 文件。正确的做法是检查器从 Token 的 JSON 文件自动读取允许值——Token 文件是唯一真值源。