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 中检查文件设置

🔗 链接乌斯

• Framelink MCP存储库

______________________________________________________________________

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