SuperAPI AI 工具集

audit-accessibility-figma

设计与创作

查看项目

更新于 10-16 01:28

技能介绍

用途:对单个 Figma 组件或组件集做深度无障碍(a11y)审计,返回带权重的 0–100 评分卡及按优先级排列的修复清单。若需扫描整棵设计树的 WCAG 与设计系统规则,应改用 lint-design-figma;代码侧 axe-core 审计用 scan-code-accessibility-figma;设计稿与代码差异检查用 check-design-parity-figma。

主要能力:通过 use_figma 读取真实变体树、填充、描边、效果与组件描述;理解变体轴,自动区分交互型与展示型组件,并据此决定各无障碍维度的评分与权重(如 badge 不因缺少 focus 态扣分,按钮则会)。评分覆盖状态完备性(default/hover/focus/disabled/error/active/loading 等)、对比度、色盲模拟、触控目标尺寸等六个类别,overallScore 为按分类加权的综合分。

使用方式:先加载官方 figma-use 技能(Figma Plugin API 参考)。设置 NODE_ID 为 COMPONENT_SET、COMPONENT 或 INSTANCE 的 id,脚本会自动从 INSTANCE 走到主组件及其父组件集;留 null 则审计当前单选。TARGET_SIZE 默认 24(WCAG 2.5.8 最低值),移动端严格场景可传 44 或 48。通过 use_figma 运行 scripts/audit-accessibility.js(skillNames: "audit-accessibility-figma"),查看评分卡与 recommendations[],按其 high/medium/low 优先级及标注的 WCAG SC 修复后重跑以确认分数变化。

脚本约定:纯 JS,顶层 await + return,不用 IIFE,不调用 figma.closePlugin(),console.log 不会被返回;输入以 const 内联在脚本顶部;颜色为 0–1 范围;任何文本操作前先加载字体;使用 await figma.getNodeByIdAsync(...);脚本错误为原子性,失败则不产生任何修改。对比度基于 sRGB 亮度,色盲模拟使用 Brettel/Viénot 二色觉矩阵。

限制:审计为只读,不会应用修复;需用 manage-variables-figma / figma-use 手动修改后再重新审计。考核项权重、评分类别细节见 references/audit-categories.md。具体价格、平台差异等资料暂未提供。