企业官网建设流程全解析

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-mcp

Figma Console MCP（figma-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 的思路是把这三件事拆成三个专用工具，各管一段：

三者结果可以互相印证：设计侧的对比度问题、代码侧的 ARIA 缺失、组件层面的状态覆盖不全，一次审计全部暴露。

一键连通：3 步让 MCP 接入你的 AI 客户端

在客户端（如 Codex、Claude 等 MCP 客户端）的配置界面中，添加启动命令npx figma-console-mcp@latest，并填入 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 误用（如把背景色变量绑到文字填充上）。

④ 布局检查：缺少自动布局、空容器。

每条发现都会标注severity（critical/warning/info）和WCAG 合规级别（a/aa/aaa/best-practice），团队可以按目标合规级别过滤整改优先级。

组件记分卡：audit_component_accessibility 考什么

figma_audit_component_accessibility针对单个组件（COMPONENT_SET、COMPONENT 或 INSTANCE）做深度审计，产出一张0-100 分的分类记分卡（定义见 write-tools.ts），覆盖六个维度：

1. 状态覆盖：default / hover / focus / disabled / error / active / loading 七种状态是否齐全
2. 焦点指示器质量：焦点样式是否存在、对比度是否足够
3. 非颜色区分（WCAG 1.4.1）：禁用/错误态是否只靠颜色表达
4. 触控目标一致性（WCAG 2.5.8）：默认 24px，可按 iOS 传 44、Android 传 48
5. 注释完整度：开发者交付前需要的标注是否补齐
6. 色觉模拟：模拟红色盲（protanopia）、绿色盲（deuteranopia）、蓝色盲（tritanopia）三组色觉，验证信息是否仍然可辨

审计结果附按优先级排序的整改建议，适合在组件交付（handoff）前作为验收关卡。相关测试用例可参考 tests/component-accessibility-audit.test.ts。

axe-core 代码扫描：104 条规则的结构性子集

figma_scan_code_accessibility不依赖 Figma 连接，直接把组件 HTML 扔给它即可。工具把全部规则逻辑委托给axe-core（Deque），MCP 自身不维护任何规则库（实现见 accessibility-tools.ts）。

关键机制：

• JSDOM 提供轻量 DOM：axe-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.4）：axe 看不到布局，工具额外做了一项启发式检查——发现line-height: 16px、font-size: 14px这类固定 px 字号时给出 info 级提醒，建议改用无单位行高和 rem/em 字号，让"文本缩放支持"这件事落在它真正该被验证的地方：代码侧（见 accessibility-tools.ts）

扫描结果按critical → warning → info排序，每条违规附 WCAG 标签、失败摘要和元素定位；还可以通过tags参数按wcag2a/wcag2aa/best-practice过滤，或用context参数把范围限定到某个元素。

实战工作流：一条指令完成"设计-代码"无障碍闭环

在客户端里直接用自然语言驱动，典型流程如下：

1. "检查我的设计有无无障碍问题"→ 触发figma_lint_design，拿到 14 项检查的分级发现
2. "审计 Button 组件集并打分"→ 触发figma_audit_component_accessibility，拿到记分卡与整改建议
3. 把组件 HTML 交给代码扫描→figma_scan_code_accessibility的mapToCodeSpec参数可自动生成一份代码侧无障碍规格
4. "对比设计和 React 代码的一致性"→figma_check_design_parity把两端结果合流，输出一致性评分（如 85/100）与双侧修复项

这套流程让"设计侧的视觉问题 + 代码侧的语义问题"在一次会话内全部闭环，工具清单详见 docs/tools.md。

相关文件导航

• 代码扫描引擎与 axe-core 集成：src/core/accessibility-tools.ts
• 设计侧 lint 与记分卡工具注册：src/core/write-tools.ts
• 设计-代码一致性对比（含 a11y parity）：src/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