AI导哈

Figma转Flutter转换器

FigmaFlow-MCP是一款AI驱动的工具，将Figma设计直接转换为生产就绪的Flutter组件和测试，集成在VS Code工作区中。

  • by ShankarTarento
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 ShankarTarento/FigmaFlow-MCP

使用说明

FigmaFlow MCP

AI驱动的Figma到Flutter转换器

直接在VS代码中从Figma设计生成Flutter小部件和测试

特性 • 安装 • 快速开始 • 文档

概述

FigmaFlow MCP是一个人工智能驱动的工具，弥合了设计和开发之间的差距。它将Figma设计转换为生产就绪的Flutter小部件和测试，所有这些都在您的VS Code工作区内。

主要特点

  • 🎨 Figma集成 -直接从Figma API获取设计
  • 🤖 人工智能发电 -使用GPT-4生成干净的Flutter代码
  • 🧪 测试生成 -自动创建小部件测试
  • 🔌 MCP协议 -基于模型上下文协议的可靠性
  • 🐧 Linux优先 -对Linux开发人员的原生支持
  • 🔑 安全配置 -API密钥的本地.env文件

建筑

┌─────────────────┐
│  VS Code        │
│  Extension      │
└────────┬────────┘
         │ MCP Protocol
┌────────▼────────┐
│  MCP Server     │◄──── Figma API
│  (Python)       │
└────────┬────────┘
         │
     ┌───▼───┐
     │  AI   │
     │ Model │
     └───────┘

项目结构

FigmaFlow-MCP/
├── mcp-server/          # Python MCP server
│   ├── src/
│   │   ├── mcp/         # Server core
│   │   ├── figma/       # Figma integration
│   │   ├── generators/  # Code generators
│   │   ├── ai/          # AI client
│   │   └── utils/       # Utilities
│   └── tests/
├── vscode-extension/    # TypeScript extension
│   └── src/
│       ├── commands/    # VS Code commands
│       ├── mcp/         # MCP client
│       ├── ui/          # User interface
│       └── utils/
└── plan/                # Project documentation

安装

对于用户

  1. 从VS代码市场安装（即将推出）
  2. 运行安装向导以配置API密钥
  3. 开始生成！

面向开发者

  1. 克隆存储库：
git clone https://github.com/yourusername/FigmaFlow-MCP.git
cd FigmaFlow-MCP
  1. 设置MCP服务器：
cd mcp-server
poetry install
cp .env.example .env
# Edit .env with your API keys
  1. 设置VS代码扩展名：
cd ../vscode-extension
npm install
npm run compile
  1. 在VS Code中打开，按F5启动扩展开发主机

快速开始

1.配置API密钥

在VS Code中运行安装向导：

Cmd+Shift+P → "FigmaFlow: Setup API Keys"

2.生成小部件

Cmd+Shift+P → "FigmaFlow: Generate Flutter Widget from Figma"

输入您的Figma URL和小部件名称，代码就会生成！

文档

发展路线图

  • [x] 第0阶段：规划与建筑
  • [/]第一阶段：基础和设置
  • []第2阶段：MCP服务器核心
  • []第3阶段：代码生成
  • []第4阶段：VS代码扩展
  • []第5阶段：集成和测试
  • []第6阶段：文件编制和发布

需求

  • VS Code：1.85或更高
  • python：3.10或更高
  • Node.js：18岁或以上
  • Flutter SDK：用于测试生成的代码
  • Figma账户：具有API访问权限
  • OpenAI帐户：具有API访问权限

配置

该项目使用 .env 配置文件：

# .env
FIGMA_ACCESS_TOKEN=figd_xxxxx
AI_API_KEY=sk-xxxxx
MCP_SERVER_PORT=3000
LOG_LEVEL=INFO

贡献

欢迎投稿！请参阅 贡献.md 作为指导方针。

许可证

MIT许可证-请参阅 许可证 详情

支持

致谢

Made with ❤️ for the Flutter community

相关 MCP