SuperAPI AI 工具集

figma-flutter-mcp-design-to-code

设计与创作

查看项目

更新于 10-16 00:20

技能介绍

用途:作为 Model Context Protocol(MCP)服务器,在 Figma 设计与 Flutter 开发之间搭桥,提取设计令牌、组件、屏幕和资源,向 AI 代理提供结构化上下文,帮助其编写更符合 Flutter 规范的代码。资料明确说明它并非代码生成器,实际代码由 AI 代理依据上下文生成。

主要能力:从 Figma 帧中提取颜色、字体、间距等设计令牌;分析 Figma 组件的结构、布局与样式;识别屏幕尺寸、Scaffold 结构、导航模式与内容分区;导出 PNG、JPEG、JPG、SVG 资源并自动更新 pubspec.yaml;为 Material Design 组件、布局与模式提供 Flutter 原生输出指引。

使用方式:需要 Figma 访问令牌、Node.js 18+、npm 以及 Cursor AI 或兼容的 MCP 客户端。在 Cursor 中通过“Open MCP Settings”添加配置,MacOS/Linux 用 npx -y figma-flutter-mcp --figma-api-key=YOUR_FIGMA_API_KEY --stdio,Windows 则用 cmd /c 前缀。本地开发可 git clone https://github.com/mhmzdev/figma-flutter-mcp.git,执行 npm install,创建 .env 写入 FIGMA_API_KEY,再 npm run dev 启动 HTTP 服务。Figma 链接须同时含 FILE_ID 和 NODE_ID。

适用场景:先建立颜色与排版主题,再生成可复用组件、完整屏幕、资源导出、响应式布局与导航流程,适合希望将 Figma 设计系统以规范方式落地到 Flutter 的项目。

限制:需要有效的 Figma 令牌与兼容 MCP 客户端;可能触发速率限制(HTTP 429),需等待 5-10 分钟并减少并发;SVG 导出前应在 Figma 中分组并放入独立帧;颜色不一致时需确认 RGB 色彩空间与不透明度/混合模式;字体需在 Flutter 项目中可用。资料未提供收费、价格与平台支持范围等信息。