figma-lint-design

figma-lint-design — 节点树的 WCAG 2.2 与设计系统检查

遍历 Figma 节点（或整个当前页面），一次性报告无障碍和设计质量问题。完全通过 use_figma 运行，因此适用于任何 Figma 套餐，并检查真实设计（实际颜色、真实自动布局、实际变体名称），而非生成的代码。

独特之处：原生 Figma MCP（get_design_context、get_metadata 等）会读取设计以生成代码，但不会检查设计。设计侧没有内置的“是否无障碍／是否符合设计令牌？”检查。本技能通过忠实移植 14 条 WCAG 2.2 规则和 6 条设计系统／布局规则，填补了这一空白。

技能边界

• use_figma 规则 — 首先加载官方 figma-use 技能；它是完整的 Figma Plugin API 参考。这些脚本依赖的要点：使用带顶层 await 和 return 的纯 JS（不使用 IIFE 或 figma.closePlugin()；console.log 不会作为返回值返回），在每个脚本顶部以内联 const 声明输入，颜色范围为 0–1，任何文本操作前先加载字体，使用 await figma.getNodeByIdAsync(...)，并遵循原子错误原则（脚本失败时不会应用任何更改——读取错误、修复后重试）。
• 逐组件深度评分卡（状态覆盖率、色盲模拟、0–100 分）→ 使用 figma-audit-accessibility。
• 代码侧无障碍检查（对生成的 HTML 使用 axe-core）→ 使用 figma-scan-code-accessibility。
• 设计与代码的偏差检查 → 使用 figma-check-design-parity。

工作流

1. 选择范围。 从用户的选区或 URL 获取目标 NODE_ID（框架、组件集或屏幕）。将其设为 null，即可检查整个当前页面。
2. 选择规则。 RULES 默认为 ['all']。可缩小范围，选择某个规则组（'wcag'、'design-system'、'layout'）或特定规则 ID（例如 'wcag-contrast'），以减少干扰。完整目录见 references/lint-rules.md。
3. 运行 scripts/lint-design.js，通过 use_figma 执行 （skillNames: "figma-lint-design"）。先编辑顶部的 const 输入。
4. 按严重程度分类。 结果按规则归类，每项发现均包含 severity （critical／warning／info）和 wcagLevel（a／aa／aaa／best-practice／design-system）。 优先处理 critical（对比度、目标尺寸、焦点、仅依赖颜色）。
5. 修复并重新检查。 应用修复（通过 figma-manage-variables、figma-use 等），然后对相同范围重新运行，确认 summary.total 已下降。每项发现都包含问题节点的 node.id，可直接跳转到该节点。

关键规则

• 颜色是 0–1 范围的浮点数。 对比度计算使用 sRGB 线性化和相对亮度；脚本内置了所需函数（输入无需使用十六进制值）。
• 背景颜色通过沿祖先节点查找最近的纯色填充推断（默认为白色）。 半透明填充上的对比度会标记为 approximate: true。
• MAX_DEPTH（默认值为 10）和 MAX_FINDINGS（默认值为 100）会限制遍历范围。如果设置了 truncated，请缩小范围或提高上限。
• **符合 WCAG 的严重程度标注：**某些规则（文本尺寸、行高、字母／段落间距）标记为 best-practice，而非 WCAG 硬性失败——各规则的具体理由见 lint-rules.md。
• 发现仅作描述，不会自动修复。批量编辑设计前，请先确认意图。