AI导哈

设计系统同步工具

MCP设计系统桥接工具，用于在IDE和Figma之间实现设计系统的双向同步，支持React组件生成、Figma组件生成、设计令牌提取和双向同步功能。

  • by brunonepomuceno
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 brunonepomuceno/mcp-design-system-bridge-cursor

使用说明

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
  3. 创建 .mcp-config.json 使用您的Figma证书
  4. 开始开发：
    npm run dev

测试

npm test

建筑

npm run build

贡献

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

许可证

麻省理工学院

支持

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

相关 MCP