像Lighthouse一样给设计系统打分Figma Console MCP六维度健康审计评分引擎原理与MCP Apps仪表盘【免费下载链接】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 MCPYour design system as an API把设计系统变成可查询的 API除了提取与创建能力它还内置了一套设计系统健康审计评分引擎像 Lighthouse 给网页打健康分一样对 Figma 文件做六维度体检输出 0-100 的加权总分和可视化仪表盘。本文带你理解这套评分引擎的工作原理、六维度检查项以及 MCP Apps 仪表盘如何把分数变成下一步行动。设计系统也需要体检审计评分引擎解决什么问题设计系统用得越久越容易出现这些问题变量命名混乱一堆color/blue/500、组件缺少描述文档、状态变体缺失、对比度不达标……传统做法靠设计师人工巡检成本高且不持续。Figma Console MCP 的思路是让 AI 定期给设计系统打分。它从 Figma 拉取变量、集合、组件、样式等原始数据交给评分引擎逐维度计算得分最终产出一份类似 Lighthouse 报告的健康分——你甚至可以把它挂到 CI 或让 AI 助手每周自动跑一次审计。最快上手两步启用设计系统审计使用审计功能只需要一个 Figma 文件和一个访问令牌配置 MCP 服务在客户端如 Claude Desktop、Codex 等中登记 MCP 服务器启动命令为npx -y figma-console-mcplatest并在环境变量中填入FIGMA_ACCESS_TOKEN打开仪表盘设置环境变量ENABLE_MCP_APPStrue后AI 调用figma_audit_design_system工具即可拉起设计系统健康仪表盘。 提示变量Token数据需要 Figma Enterprise 计划或连接 figma-desktop-bridge/ 桌面桥接插件组件数据支持实时文件与已发布库快照两种来源。数据获取不到的维度会明确标注数据缺失而不是打低分避免误判。评分引擎原理加权总分 三档健康状态整个引擎的入口是 scoring/engine.ts 中的scoreDesignSystem()函数数据流非常清晰Figma 原始数据变量/集合/组件/样式 ↓ 六个维度评分器各自独立计算 0-100 分 ↓ 按权重加权求和 → 总分 状态good / needs-work / poor ↓ DashboardData JSON → 仪表盘 UI 渲染权重分配见 engine.ts 第69-74行维度权重检查重点命名与语义20%名字是否描述意图而非外观color.action.primary优于color.blue.500令牌架构20%集合组织、模式Mode覆盖、别名使用、令牌分层深度、类型分布组件元数据20%描述存在性与质量、属性完整度、变体结构、分类组织可访问性15%WCAG AA 对比度4.5:1、disabled/focus/hover 等状态变体、语义色命名一致性15%命名分隔符、大小写规范、尺寸值与模式命名是否统一覆盖度10%令牌类型COLOR/FLOAT/STRING/BOOLEAN与核心组件Button/Input/Card/Modal齐全度打分规则定义在 scoring/types.ts 第120-129行≥90 分为 good≥50 分为 needs-work否则为 poor——与 Lighthouse 的红黄绿分档完全同构。每个检查项Finding都有独立分数、严重级别pass / warning / fail / info、悬停解释和最多 5 个具体示例方便定位到具体变量或组件。引擎还会自动生成Top 5 待办generateSummary 会从所有维度中挑出最值得处理的 5 条问题fail 优先于 warning同级内按分数从低到高排序——先救最差的这保证了报告开头永远是现在最该做什么。六个维度评分器分别在查什么每个维度对应一个独立模块均可单独阅读命名与语义scoring/naming-semantics.ts内置视觉色词表red、blue、amber…与语义值词表primary、danger、disabled…。它只在语义层检查视觉命名——基础调色板层primitive tier用color/blue/500是正当的不会被扣分。令牌架构scoring/token-architecture.ts检查变量是否按关注点分组进集合、是否存在VARIABLE_ALIAS别名链分层的标志、以及令牌描述覆盖率。组件元数据scoring/component-metadata.ts以组件集合 独立组件为计分单位而非变体总数避免分数被膨胀描述少于 20 字符不算高质量文档。可访问性scoring/accessibility.ts实现了 WCAG 相对亮度与对比度公式逐项计算语义色对比度并核对 6 种交互状态disabled、error、focus、hover、active/pressed、selected的变体覆盖。一致性scoring/consistency.ts识别 PascalCase / kebab-case / camelCase 等命名风格检测同一系统内混用分隔符、大小写风格漂移的情况。覆盖度scoring/coverage.ts检查四类令牌是否齐全以及 Button、Input、Card、Modal 等核心组件类别是否缺失。分数之后每条 finding 都带可修复性标注审计不该止于打分。scoring/remediation.ts 维护了一张修复能力地图为每条检查项声明四种修复属性designMCP 的写入工具可全自动修复design-assisted可自动执行但需先做设计决策AI 会给出选项code需通过导出/同步工具在消费方代码库中修复manual需要人工设计工作MCP 只能搭脚手架和报告。因此每次审计的结尾都会附带这些问题里哪些我能帮你修的清单——分数、诊断、处方一体化。MCP Apps 仪表盘AI 说结论UI 看细节仪表盘的注册与工具编排见 server.ts它遵循上下文经济的设计AI 调用figma_audit_design_system→ 服务器抓取数据并评分只把一段简短摘要返回给 LLM总分 各维度分数 数据源提示避免撑爆上下文同时通过_meta.ui.resourceUri挂载仪表盘资源ui://figma-console/design-system-dashboardui/mcp-app.html 在客户端内嵌 WebView 中打开UI 连接后调用应用专属工具ds_dashboard_refresh拉取完整 JSON渲染为 6 个环形仪表gauge rings 可展开的维度明细。而面向所有 MCP 客户端不依赖 MCP Apps 能力的 Claude Code、CI 等则注册了纯数据工具figma_audit_design_system_report见 server.ts 第246行默认返回有界的summary报告传category参数可分块下钻单个维度的完整 findings而不是一次性塞入巨型 payload结果缓存 5 分钟摘要 下钻多次调用共享同一次爬取文件编辑后传forceRefresh强制重扫。 严谨性细节若组件数据来自已发布库快照bridge 不可用时的降级路径报告会明确提示分数反映的是上次发布而非未发布的编辑——两种来源的分数不可直接比较这一点会显式写入报告。源码阅读地图想深入这套审计评分引擎建议按以下路径阅读资料路径看点评分引擎入口scoring/engine.ts权重、加权总分、Top 5 摘要生成类型契约与阈值scoring/types.tsFinding / CategoryScore / DashboardData 数据结构修复能力地图scoring/remediation.ts每条 finding 的可修复性声明服务器工具注册server.ts双通道工具App 版 / 纯数据版与缓存策略仪表盘前端ui/mcp-app.ts环形仪表渲染与维度展开交互单元测试tests/scoring/scoring-engine.test.ts、tests/scoring/end-to-end.test.ts评分引擎与端到端用例工具清单docs/tools.md审计相关工具的完整参数说明MCP Apps 机制docs/mcp-apps.md内嵌 UI 的协议原理小结Figma Console MCP 的设计系统健康审计把 Lighthouse 式六维度加权评分 → 红黄绿分档 → 可执行待办的成熟模式搬进了设计领域六维度评分命名/令牌/元数据/可访问性/一致性/覆盖度量化设计系统健康度Top 5 待办自动按严重度排序报告即行动清单修复能力地图让每条问题都回答这个我能修吗、怎么修MCP Apps 仪表盘 纯数据双通道既能在客户端里看可视化分数也能在 CI 中做持续审计。让 AI 每周自动体检一次设计系统分数就是最客观的进度条——这正是Your design system as an API理念在质量管理上的落地。【免费下载链接】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），仅供参考