AI导哈

Figma MCP集成工具

一个展示Figma MCP与Cursor集成的项目，用于实现设计系统的自动化提取和组件开发。

  • by JOAOPAULOJP
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 JOAOPAULOJP/poc-mcp

使用说明

POC MCP - 研究 Figma MCP + 光标

研究项目展示了Figma MCP（模型上下文协议）和Cursor之间的集成以实现设计。

🚀 技术

  • 反应
  • 维特
  • CSS变量（设计系统）
  • Figma MCP集成

📋 功能

  • 包含所有设计系统状态的 InputText 组件
  • 组件按钮
  • 登录页面
  • Cadastro页面
  • 完整的CSS变量设计系统

🛠️ 安装

npm install

🏃 执行

npm run dev

📁 结构

src/
├── components/
│   ├── InputText/    # Componente de input com estados
│   └── Button/       # Componente de botão
├── pages/
│   ├── LoginPage.jsx      # Página de login
│   └── RegisterPage.jsx   # Página de cadastro
├── styles/
│   └── design-system.css   # Variáveis do design system
└── App.jsx           # Componente principal

🎨 设计系统

该项目使用基于Figma设计系统的CSS变量，包括：

  • 核心（文本、背景、表面、轮廓）
  • 字体（ 大小、 重量、 家族）
  • 间距
  • 边缘和半径

📝 注释

这个项目是使用Figma的MCP创建的，以自动提取设计系统的设计和变量。

相关 MCP