lint-design-figma

lint-design-figma — 对节点树执行 WCAG 2.2 + 设计系统 lint

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

独特之处：原生 Figma MCP（get_design_context、get_metadata 等）会读取设计以生成代码，但不会对设计执行 lint。设计侧没有内置的“此设计是否无障碍／是否使用了规范令牌？”检查。此技能通过忠实移植 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 分）→ 使用 audit-accessibility-figma。
• 代码侧无障碍检查（对生成的 HTML 执行 axe-core 检查）→ 使用 scan-code-accessibility-figma。
• 设计与代码不一致检查 → 使用 check-design-parity-figma。

工作流

1. 选择范围。 从用户的选区或 URL 获取目标 NODE_ID（框架、组件集或屏幕）。将其设为 null 可对整个当前页面执行 lint。
2. 选择规则。 RULES 默认值为 ['all']。可将其缩小到某个分组（'wcag'、'design-system'、'layout'）或某条具体规则 ID（例如 'wcag-contrast'），以减少无关结果。完整目录见 references/lint-rules.md。
3. 运行通过 use_figma 执行 scripts/lint-design.js（skillNames: "lint-design-figma"）。先编辑顶部的 const 输入。
4. 按严重程度分类处理。 结果按规则分组，每项包含 severity（critical/warning/info）和 wcagLevel（a/aa/aaa/best-practice/design-system）。优先处理 critical（对比度、目标尺寸、焦点、仅靠颜色传达信息）。
5. 修复并重新执行 lint。 应用修复（通过 manage-variables-figma、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。
• 结果仅描述问题，不会自动修复。批量编辑设计前请先确认意图。