Figma Console MCP无障碍审计实战14项WCAG设计检查组件记分卡axe-core 104条代码规则【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcpFigma Console MCPfigma-console-mcp把设计系统变成一套 API让 AI 直连 Figma完成设计提取、组件创建和无障碍调试。在无障碍Accessibility领域它提供一套设计 代码双端审计组合拳——figma_lint_design执行14 项 WCAG 设计检查figma_audit_component_accessibility生成组件记分卡figma_scan_code_accessibility调用axe-core对 HTML 代码跑结构化验检。设计师和前端工程师可以不用手工对照 WCAG 条款逐条排查一条自然语言指令就能拿到带严重等级和合规级别A/AA/AAA的审计报告。为什么无障碍审计值得交给 AI 工具手工做 WCAG 审计的痛点大家都熟悉条款多光 WCAG 2.2 就有上百条、要同时看设计和代码、还要反复验证状态变体。Figma Console MCP 的思路是把这三件事拆成三个专用工具各管一段工具审计对象核心能力figma_lint_designFigma 设计稿页面/节点树14 项 WCAG 设计检查 设计系统卫生检查figma_audit_component_accessibility单个组件/组件集六维记分卡0-100 分 色觉模拟figma_scan_code_accessibilityHTML 代码字符串axe-core 规则扫描 文本间距建议三者结果可以互相印证设计侧的对比度问题、代码侧的 ARIA 缺失、组件层面的状态覆盖不全一次审计全部暴露。一键连通3 步让 MCP 接入你的 AI 客户端在客户端如 Codex、Claude 等 MCP 客户端的配置界面中添加启动命令npx figma-console-mcplatest并填入 Figma 访问令牌FIGMA_ACCESS_TOKEN即可保存使用。设计侧工具figma_lint_design、figma_audit_component_accessibility还需要 Figma 桌面端安装 Desktop Bridge 插件代码扫描工具则完全独立不需要任何 Figma 连接。详细说明见 docs/setup.md 和 docs/security.md。14项WCAG设计检查figma_lint_design 怎么跑figma_lint_design对当前页面或指定节点树执行综合审计检查项分为四类见 write-tools.ts① WCAG 合规检查10 条硬性规则颜色对比度AA 级 4.5:1非文本对比度1.4.11仅靠颜色区分1.4.1焦点指示器2.4.7触控目标尺寸2.5.8图片替代文本1.1.1标题层级1.3.1响应式回流1.4.10阅读顺序1.3.2禁用状态上下文4.1.2② 最佳实践可读性提示4 条可选字号、行高、字距、段距四项提示默认不启用——注意一个常见误区行高低于 1.5 倍并不算 WCAG 1.4.12 违规1.4.12 要求的是用户覆盖文本间距后内容不破版这是代码侧的事。所以这些提示仅针对多行文本且标注为非规范性建议。③ 设计系统检查5 条硬编码颜色、缺少文本样式、默认图层名、脱钩组件、token 误用如把背景色变量绑到文字填充上。④ 布局检查缺少自动布局、空容器。每条发现都会标注severitycritical/warning/info和WCAG 合规级别a/aa/aaa/best-practice团队可以按目标合规级别过滤整改优先级。组件记分卡audit_component_accessibility 考什么figma_audit_component_accessibility针对单个组件COMPONENT_SET、COMPONENT 或 INSTANCE做深度审计产出一张0-100 分的分类记分卡定义见 write-tools.ts覆盖六个维度状态覆盖default / hover / focus / disabled / error / active / loading 七种状态是否齐全焦点指示器质量焦点样式是否存在、对比度是否足够非颜色区分WCAG 1.4.1禁用/错误态是否只靠颜色表达触控目标一致性WCAG 2.5.8默认 24px可按 iOS 传 44、Android 传 48注释完整度开发者交付前需要的标注是否补齐色觉模拟模拟红色盲protanopia、绿色盲deuteranopia、蓝色盲tritanopia三组色觉验证信息是否仍然可辨审计结果附按优先级排序的整改建议适合在组件交付handoff前作为验收关卡。相关测试用例可参考 tests/component-accessibility-audit.test.ts。axe-core 代码扫描104 条规则的结构性子集figma_scan_code_accessibility不依赖 Figma 连接直接把组件 HTML 扔给它即可。工具把全部规则逻辑委托给axe-coreDequeMCP 自身不维护任何规则库实现见 accessibility-tools.ts。关键机制JSDOM 提供轻量 DOMaxe-core 完整规则库有 104 条其中约 50 条不依赖布局与渲染ARIA 属性、role、label、alt 文本、表单标签、标题顺序、landmark、tabindex、重复 ID、lang 属性等在 JSDOM 里可以稳定执行视觉类规则自动禁用color-contrast、focus-visible 等需要真实渲染的规则在 JSDOM 下会误报工具直接关闭并注明用figma_lint_design在设计侧覆盖文本间距建议WCAG 1.4.12 / 1.4.4axe 看不到布局工具额外做了一项启发式检查——发现line-height: 16px、font-size: 14px这类固定 px 字号时给出 info 级提醒建议改用无单位行高和 rem/em 字号让文本缩放支持这件事落在它真正该被验证的地方代码侧见 accessibility-tools.ts扫描结果按critical → warning → info排序每条违规附 WCAG 标签、失败摘要和元素定位还可以通过tags参数按wcag2a/wcag2aa/best-practice过滤或用context参数把范围限定到某个元素。实战工作流一条指令完成设计-代码无障碍闭环在客户端里直接用自然语言驱动典型流程如下检查我的设计有无无障碍问题→ 触发figma_lint_design拿到 14 项检查的分级发现审计 Button 组件集并打分→ 触发figma_audit_component_accessibility拿到记分卡与整改建议把组件 HTML 交给代码扫描→figma_scan_code_accessibility的mapToCodeSpec参数可自动生成一份代码侧无障碍规格对比设计和 React 代码的一致性→figma_check_design_parity把两端结果合流输出一致性评分如 85/100与双侧修复项这套流程让设计侧的视觉问题 代码侧的语义问题在一次会话内全部闭环工具清单详见 docs/tools.md。相关文件导航代码扫描引擎与 axe-core 集成src/core/accessibility-tools.ts设计侧 lint 与记分卡工具注册src/core/write-tools.ts设计-代码一致性对比含 a11y paritysrc/core/design-code-tools.ts无障碍功能测试tests/accessibility-tools.test.ts、tests/lint-design.test.ts工具文档与项目介绍docs/tools.md、docs/introduction.md小结Figma Console MCP 把无障碍审计从人工逐条对照条款变成了三条可组合的自动化管线14 项 WCAG 设计检查守住设计稿底线组件记分卡量化单个组件的交付质量axe-core 104 条规则JSDOM 下约 50 条结构性规则生效兜住代码侧语义正确性。配合合规级别标签和优先级建议小团队也能在交付前快速收敛无障碍债务。【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考