Figma Design Agent

Figma设计代理

一个智能MCP（模型上下文协议）服务器，将Figma设计与代码生成连接起来。将Figma组件与代码模板匹配，并自动解析设计标记。

概述

该代理系统使AI助手（如Claude）能够：

• 匹配Figma组件 已知的设计系统模式
• 解析设计令牌 平台特定值（顺风、MUI等）
• 生成代码 使用web、React、Vue、Android和Flutter的预定义模板

建筑

figma-design-agent/
├── golden-records/          # Human-readable component specifications
│   ├── avatar_golden_record.json
│   ├── avatar_golden_record.md
│   └── tokens.json
├── kb/                      # Agent-optimized knowledge base
│   ├── components.agent.json
│   └── tokens.agent.json
├── src/
│   └── mcp-server.ts       # MCP server implementation
└── build_kb.js             # KB build script

快速开始

1.安装依赖项

npm install

2.建立知识库

npm run build:kb

这将黄金记录转换为代理优化的KB文件。

3.构建MCP服务器

npm run build:server

4.测试设置

node test-server.js

5.启动MCP服务器

# Production
npm run start:mcp

# Development (with auto-reload)
npm run dev:mcp

MCP工具

matchComponent

将Figma节点名称与已知组件匹配，并提取变体/道具信息。

输入：

{
  "figmaNode": {
    "name": "M3/Navigation/Avatar/Monogram",
    "type": "COMPONENT"
  }
}

输出：

{
  "matched": true,
  "component": {
    "name": "Avatar",
    "category": "User Representation",
    "description": "Avatars represent users or entities..."
  },
  "variant": {
    "name": "Monogram",
    "type": "text",
    "description": "Displays user initials"
  },
  "templates": {
    "react": {
      "template": "",
      "component": "Avatar",
      "package": "@mui/material"
    }
  },
  "referencedTokens": ["M3/sys/light/primary-container"],
  "specifications": { ... },
  "accessibility": { ... }
}

resolveToken

将设计令牌名称解析为其代码值。

输入：

{
  "tokenName": "M3/sys/light/primary-container"
}

输出：

{
  "resolved": true,
  "tokenName": "M3/sys/light/primary-container",
  "value": "bg-purple-100"
}

金唱片

黄金记录是组件规格的真实来源。其中包括：

• 元数据：版本，上次更新，Figma文件ID
• 规格：尺寸、形状、约束
• 变体：组件的不同状态
• 设计标记：颜色、排版、间距参考
• 无障碍：ARIA角色、标签、要求
• 平台模板：web、React、Vue、Android、Flutter的代码模板
• 使用指南：最佳做法和实例

创造新的黄金纪录

1. 从Figma中提取组件数据
2. 按照模式创建JSON文件： golden-records/component_golden_record_schema.json
3. 创建一个markdown文件以提高可读性
4. 重建知识库： npm run build:kb

知识库构建过程

这 build_kb.js 脚本：

1. 读取所有金唱片JSON文件
2. 提取代理可操作字段
3. 优化以实现快速查找
4. 生成 kb/components.agent.json 和 kb/tokens.agent.json

这种分离允许：

• 人类编辑保持可读的黄金记录
• 代理访问优化、集中的数据
• 无需代理重新训练即可快速迭代

与Claude Code集成

添加到您的Claude Code MCP设置中：

{
  "mcpServers": {
    "figma-design-agent": {
      "command": "node",
      "args": ["/Users/mootantan/projects/figma-design-agent/dist/mcp-server.js"]
    }
  }
}

当前组件

• 阿凡达：带有图像、字母组合和状态变体的用户表示

支持平台

• 网络：本机HTML
• 反应：材质UI（@mui/Material）
• Vue：Vuetify
• 安卓：Jetpack作曲（材料3）
• 飘动：材料设计

设计标记

目前支持20+Material 3设计代币，包括：

• 颜色标记（主要、次要、表面等）
• 映射到Tailwind类的语义标记

开发工作流程

添加新组件

1. 创建JSON和MD的黄金记录 golden-records/
2. 跑 npm run build:kb 更新知识库
3. 测试用 node test-server.js
4. 如有需要，重建MCP服务器： npm run build:server

更新设计令牌

1. 编辑 golden-records/tokens.json
2. 跑 npm run build:kb
3. 重新启动MCP服务器

测试

运行测试套件：

node test-server.js

这验证了：

• 知识库加载
• 组件名称匹配
• 令牌解析
• 服务器就绪

体系结构决策

为什么选择金唱片？

• 人类优先：易于编辑和查看
• 可追溯的：链接回Figma来源
• 版本可控：Git友好的JSON/MD格式

为什么要分离KB文件？

• 演出：代理只加载他们需要的内容
• 可扩展性：可以增长到数百个组件
• 可维护性：明确区分关切

为什么选择MCP？

• 标准化：适用于任何兼容MCP的客户端
• 可组合：可以与其他MCP工具结合使用
• 高效：用于快速查找的内存KB

未来的增强功能

• \[\]语义组件匹配（基于RAG）
• \[\]Figma API集成用于自动导出
• \[\]组件组成规则
• \[\]暗模式令牌变体
• \[\]响应式大小标记
• \[\]动画/过渡模板
• \[\]多语言令牌支持

贡献

要添加对新设计系统的支持，请执行以下操作：

1. 为组件创造黄金记录
2. 定义设计令牌映射
3. 添加平台模板
4. 如果需要，更新架构
5. 重建和测试

许可证

麻省理工学院

鸣谢

内置：

• @模型上下文协议/sdk
• 材料设计3规格
• TypeScript

______________________________________________________________________

状态：生产就绪✅ 版本: 1.0.0 最后更新: 2025-11-12