Figma设计试点MCP
v4.0 --提供AI驱动的有状态MCP服务器 设计评审 和 评论工作流程 Figma文件的功能。适用于Claude Desktop、Cursor、CodeBuddy、openClaw和任何兼容MCP的AI代理。
它的作用
| 能力 | 描述 |
|---|---|
| 设计评审 | 自动化7维质量审核：颜色、间距、排版、组件、令牌覆盖率、结构、可访问性 |
| 评论工作流程 | 基于线程的Figma评论管理，具有状态跟踪和幂等写入功能 |
| 基本数据 | 文件结构、组件、样式、变量、版本历史、图像导出 |
快速开始
1.获取Figma代币
首选 Figma设置→ 个人访问令牌 并创建一个令牌 文件内容（已读） 和 评论（读/写） 范围。
2.连接到您的AI客户端
选项A:npx（推荐，零安装）
{
"mcpServers": {
"figma-pilot": {
"command": "npx",
"args": ["-y", "figma-design-pilot-mcp"],
"env": {
"FIGMA_PERSONAL_ACCESS_TOKEN": "figd_xxxxx"
}
}
}
}选项B:SSE模式（适用于web客户端/openClaw）
npx -y figma-design-pilot-mcp --transport=sse然后配置您的客户端以连接到 http://127.0.0.1:3000/mcp
选项C：从源代码运行
git clone https://github.com/Mr-wang007s/figma-design-pilot-mcp.git
cd figma-design-pilot-mcp
npm install{
"mcpServers": {
"figma-pilot": {
"command": "node",
"args": ["
/figma-design-pilot-mcp/dist/src/index.js"],
"env": {
"FIGMA_PERSONAL_ACCESS_TOKEN": "figd_xxxxx"
}
}
}
}MCP工具（20）
设计评审（8个工具）
| 工具 | 说明 |
|---|---|
figma_design_review | 全面审查 --运行所有7个维度，返回评分报告（0-100，A-F级） |
figma_review_colors | 检查硬编码填充、笔划、渐变、阴影、不透明度 |
figma_review_spacing | 检查填充、间隙、角半径、离网值、自动布局 |
figma_review_typography | 验证文本样式、字体大小、行高、字体系列 |
figma_review_components | 审核分离的实例、缺少的主要组件、覆盖、命名 |
figma_review_token_coverage | 计算设计令牌变量绑定覆盖率（%） |
figma_review_structure | 检查默认名称、空帧、深度嵌套、隐藏层 |
figma_review_a11y | WCAG对比度、文本大小、触摸目标检查 |
基础数据（6个工具）
| 工具 | 说明 |
|---|---|
figma_get_file_structure | 获取页面和图层树（名称、类型、大小） |
figma_get_variables | 获取所有设计令牌/变量（企业） |
figma_get_components | 获取组件和组件集 |
figma_get_styles | 获取已发布的样式（颜色、文本、效果、网格） |
figma_get_file_versions | 获取版本历史记录 |
figma_export_images | 将节点导出为PNG、SVG、PDF或JPG |
评论工作流程（6个工具）
| 工具 | 说明 |
|---|---|
figma_sync_comments | 获取和区分评论，返回需要注意的线程 |
figma_post_reply | 通过幂等发件箱回复线程 |
figma_set_status | 通过表情符号更改线程状态(👀 悬而未决的，✅ 完成，🚫 王） |
figma_get_thread | 从本地数据库获取线程的完整上下文 |
figma_list_pending | 列出所有打开/挂起的线程（即时，无网络） |
figma_delete_own_reply | 删除机器人生成的回复 |
使用示例
进行设计评审
问你的AI代理：
“审查设计文件https://www.figma.com/design/abc123/MyApp告诉我要解决什么问题”
代理人将致电 figma_design_review 并返回结构化报告：
Score: 72/100 (C)
Issues: 15 errors, 8 warnings
Colors:
❌ 12 hardcoded fill colors not bound to variables
⚠️ 3 hardcoded stroke colors
Token Coverage: 34%
fills: 20%, strokes: 0%, spacing: 80%, typography: 60%
Structure:
⚠️ 5 layers with default names ("Frame 1", "Rectangle 2")
⚠️ 2 empty frames管理评论
“同步我的Figma文件中的评论并回复任何打开的线程”
代理人打电话来 figma_sync_comments → figma_list_pending → figma_post_reply.
配置
| 变量 | 默认值 | 描述 |
|---|---|---|
FIGMA_PERSONAL_ACCESS_TOKEN | Figma PAT-- 推荐 用于快速设置 | |
FIGMA_CLIENT_ID | Figma OAuth应用程序客户端ID | |
FIGMA_CLIENT_SECRET | Figma OAuth应用程序客户端密码 | |
DB_PATH | ./data.db | SQLite数据库文件路径 |
SSE_PORT | 3000 | HTTP服务器端口（SSE模式） |
BOT_REPLY_PREFIX | [FDP] | 机器人生成回复的前缀 |
AUTH_CALLBACK_PORT | 3456 | OAuth本地主机回调端口 |
WEBHOOK_SECRET | Figma webhook验证的HMAC密钥 |
建筑
AI Client (Claude / Cursor / CodeBuddy / openClaw)
│
│ JSON-RPC (stdio or Streamable HTTP)
▼
┌─────────────────────────────────────────────┐
│ MCP Router (20 tools) │
├─────────────┬──────────────┬────────────────┤
│ Design │ Base Data │ Comment │
│ Review (8) │ Tools (6) │ Workflow (6) │
└──────┬──────┴──────┬───────┴───────┬────────┘
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────┐ ┌──────────────┐
│ Review │ │ Figma │ │ Sync Engine │
│ Engine │ │ REST │ │ + Operations │
│ (7 linters) │ │ API │ │ (Outbox) │
└──────┬──────┘ └─────────┘ └──────┬───────┘
│ │
▼ ▼
┌──────────────────────────────────────────┐
│ SQLite (better-sqlite3 + Kysely) │
│ 8 tables: comments, operations, │
│ sync_state, config, file_snapshots, │
│ review_reports, review_issues, │
│ review_rules │
└──────────────────────────────────────────┘发展
npm run build # Compile TypeScript → dist/
npm run typecheck # Type check only (no emit)
npm run dev # Run with tsx (stdio)
npm test # Run tests (vitest)
npm run test:watch # Watch mode
npm run test:coverage # Coverage report技术栈
- 运行时：Node.js>=18
- 语言：TypeScript 5.x（严格模式，仅ESM）
- MCP-SDK：@modelcontextprotocol/sdk
- 数据库：better平方3+Kysely
- 超文本传输协议：axios，快递
- 速率限制：瓶颈
- 验证：zod
- 测试：邀请
许可证
麻省理工学院