southleft/figma-console-mcp

解决的问题

Figma Console MCP 为 AI 助手（如 Claude）与 Figma 之间提供双向桥梁，将设计系统视为 API。它通过允许 AI 读取设计令牌、创建 UI 组件，并对设计-代码一致性及可访问性进行确定性检查，消除了设计与代码之间的手动差距。

如何工作

该项目实现了 Model Context Protocol (MCP)，使 AI 代理能够通过多种连接模式与 Figma 交互：

• 本地模式 (NPX/Git): 通过桌面桥接插件连接，提供完整的写入权限和实时监控（控制台日志、选择追踪）。
• 云模式： 通过 WebSocket 中继，将来自 Web AI 客户端（如 Claude.ai 或 v0）的命令转发给 Figma 桌面插件。
• 远程 SSE： 无需本地安装即可探索设计数据的只读连接。

它结合使用 Figma REST API 和 Figma 插件 API 来管理变量、组件和布局。

适用人群

• 希望使用 AI 自动创建组件、画板和布局的 设计师
• 需要将设计令牌提取到代码中，或把代码库样式同步回 Figma 的 开发者
• 专注于维护设计系统健康、可访问性（WCAG）以及 Figma 与生产代码之间一致性的 设计工程师

主要亮点

• 双向同步： 将 Figma 变量导出为多种 JSON 格式，或把代码端的修改推送到 Figma。
• 设计创建： 通过 AI 提示直接在 Figma 中创建 UI 组件、画板和布局。
• 健康审计： 提供类似 Lighthouse 的评分审计，涵盖命名、令牌、可访问性和一致性。
• 设计-代码一致性： 对 Figma 组件与其代码实现进行确定性比对。
• 可访问性扫描： 执行 14 项 WCAG 设计检查，支持合规性标签和组件评分卡。
• 版本感知： 通过二分查找回溯属性变更，并生成 Markdown 格式的变更日志。