AI导哈

Figma转代码工具

一款将Figma设计直接转换为HTML/CSS代码的工具，支持AI代码代理和一次性界面实现。

  • by Lucas-AVNogueira
  • 本地部署
  • 更新于
在 GitHub 查看 Lucas-AVNogueira/TESTE-FIGMA-MCP

使用说明

Figma MCP 开发项目

这个项目使用 MCP图 将Figma设计直接集成到可访问的HTML / CSS代码中，允许实现支持AI代码代理的接口。

📋 关于项目

此存储库包含基于 Figma 设计开发 Web 界面的配置和说明，重点是：

  • ✅ 对设计的忠诚精确复制 Figma 结构和层次结构
  • ♿ 可访问性WCAG 2.1和最佳实践
  • 🤖 人工智能自动化通过代码代理（Cursor，Copilot等）自动转换
  • 🎯 一次性实施直接将设计转换为代码

🚀 技术

  • MCP图 - 用于访问Figma数据的MCP服务器
  • HTML5 语义 可访问和明确定义的结构
  • CSS3 - 响应式和现代化的风格
  • TypeScript MCP 服务器配置

🔧 配置

先决条件

  1. Node.js实例
  2. Figma API 访问令牌 （如何创建)
  3. VS Code 或其他兼容 MCP 的编辑器

安装

视窗

{
  "servers": {
    "MCP Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

MacOS/Linux

{
  "servers": {
    "MCP Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

📖 如何使用

  1. 复制o链接 Figma 中的设计（文件、框架或组）
  2. 科尔不聊天 代理代理（Agent）
  3. 请求实施 设计
  4. 代理将：
    • Extrair fileKey e nodeId 做URL
    • 通过 Figma API 搜索设计数据
    • 可轻松转换为HTML/CSS

⚠️ 已知限制

API的费率限制

据报道，在 第258期:

常见错误

错误429（请求太多）

  • 已达速率限制
  • 请稍候几分钟再试
  • 考虑升级到专业计划

错误403（禁止）

  • 未公开共享的档案
  • 无效或没有权限的 API 令牌
  • 在 Figma 中检查文件设置

🔗 链接乌斯

专注于可访问性和设计忠诚度 ♿✨

相关 MCP