MCP Design System Bridge

MCP设计系统桥

用于IDE和Figma之间双向同步的模型上下文协议（MCP），用于设计系统管理。

特性

1.React组件生成

• 使用TypeScript生成React组件
• 使用类方差权限支持变体
• 交互状态（悬停、聚焦、禁用、加载）
• 转发裁判进行构图
• 使用Tailwind CSS+CSS模块进行样式设置
• 完整的JSDoc文档
• 自动故事书故事
• React测试库测试
• 桶出口

2.Figma组件生成

• 创建组件框架
• 应用设计令牌
• 自动生成变体
• 创建响应式自动布局
• 集成文档

3.Figma→ IDE提取

• 设计标记（颜色、排版、阴影、间距、边框）
• 图标（优化的SVG，多种格式）
• 图像（PNG、JPG、经过优化的WebP）
• 组件（结构、道具、变体）

4.IDE→ Figma同步

• React组件分析
• 道具和变体提取
• 顺风/CSS风格分析
• 交互式状态检测
• 设计令牌映射

5.双向同步

• 自动变化检测
• 确认提示
• 视觉差异
• 同步历史记录
• 回滚能力

安装

npm install mcp-design-system-bridge

配置

创建一个 .mcp-config.json 项目根目录中的文件：

{
  "figma": {
    "accessToken": "your-figma-access-token",
    "fileId": "your-figma-file-id"
  },
  "paths": {
    "components": "src/components",
    "tokens": "src/tokens",
    "icons": "src/icons",
    "assets": "src/assets"
  },
  "generation": {
    "useTailwind": true,
    "useCSSModules": true,
    "useStorybook": true,
    "useTests": true
  }
}

用法

生成React组件

import { MCP } from 'mcp-design-system-bridge';

const mcp = new MCP({
  figmaAccessToken: 'your-token',
  figmaFileId: 'your-file-id'
});

const component = await mcp.generateReactComponent({
  name: 'Button',
  description: 'A button component',
  props: [
    {
      name: 'variant',
      type: "'primary' | 'secondary' | 'tertiary'",
      required: true
    },
    {
      name: 'size',
      type: "'sm' | 'md' | 'lg'",
      required: true
    }
  ],
  variants: [
    {
      name: 'primary',
      props: {
        backgroundColor: 'var(--color-primary-500)',
        color: 'var(--color-white)'
      }
    }
  ]
});

Figma摘录

const assets = await mcp.extractFromFigma('node-id');
console.log(assets.tokens);
console.log(assets.components);
console.log(assets.icons);
console.log(assets.images);

同步到Figma

const result = await mcp.syncToFigma({
  components: [/* React components */],
  tokens: {/* Design tokens */}
});

来自Figma的同步

const result = await mcp.syncFromFigma({
  added: [/* New components */],
  modified: [/* Modified components */],
  deleted: [/* Deleted components */],
  conflicts: [/* Conflicts */]
});

项目结构

design-system/
├── tokens/
│   ├── colors.json
│   ├── typography.json
│   ├── spacing.json
│   └── shadows.json
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.types.ts
│   │   ├── Button.stories.tsx
│   │   ├── Button.test.tsx
│   │   └── index.ts
│   ├── Input/
│   │   ├── Input.tsx
│   │   ├── Input.types.ts
│   │   ├── Input.hooks.ts
│   │   ├── Input.stories.tsx
│   │   ├── Input.test.tsx
│   │   └── index.ts
│   └── Card/
├── hooks/
│   ├── useDesignSystem.ts
│   └── useTheme.ts
├── icons/
├── assets/
├── docs/
└── .mcp-config.json

发展

先决条件

• Node.js 18+
• npm 8+
• 带有访问令牌的Figma帐户
• React 18+项目

设置

1. 克隆存储库
2. 安装依赖项：

   npm install

1. 创建 .mcp-config.json 使用您的Figma证书
2. 开始开发：

   npm run dev

测试

npm test

建筑

npm run build

贡献

1. 分叉存储库
2. 创建功能分支
3. 提交您的更改
4. 推到分支
5. 创建拉取请求

许可证

麻省理工学院

支持

如需支持，请在GitHub存储库中打开问题。