AI导哈

Figma代码转换工具

一个将Figma设计节点转换为生产就绪代码的代理技能，确保视觉保真度1:1。

  • by HowardTangOvO
  • 本地部署
  • 8 星标
  • 更新于
在 GitHub 查看 HowardTangOvO/Figma-Context-MCP-Skill

使用说明

Figma上下文MCP技能

一种代理技能，使用1:1的视觉保真度将Figma节点转换为生产就绪代码 Framelink Figma上下文MCP (figma-developer-mcp).

它做什么

  • 通过Framelink MCP服务器连接到Figma(get_figma_data, download_figma_images)
  • 从Figma节点数据中解析布局、排版、颜色、组件层次结构和资源
  • 将设计标记和组件转换为项目的现有约定
  • 通过内置的验证清单强制实现像素精确的保真度

先决条件

  1. Figma个人访问令牌(FIGMA_API_KEY)
  2. 在AI客户端中配置的Framelink MCP服务器：
{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

安装

通过npx技能（推荐）

支持Cursor、Codex、Claude Code、Cline和 37+代理商.

# Install to current project (all detected agents)
npx skills add https://github.com/HowardTangOvO/Figma-Context-MCP-Skill

# Install globally (available in all projects)
npx skills add https://github.com/HowardTangOvO/Figma-Context-MCP-Skill -g

# Install to specific agents only
npx skills add https://github.com/HowardTangOvO/Figma-Context-MCP-Skill -a cursor -a codex

# Non-interactive
npx skills add https://github.com/HowardTangOvO/Figma-Context-MCP-Skill -y

每个代理的安装路径（项目/全局）：

代理 项目 全球
光标 .agents/skills/ ~/.cursor/skills/
食品法典委员会 .agents/skills/ ~/.codex/skills/
克劳德代码 .claude/skills/ ~/.claude/skills/
克莱恩 .cline/skills/ ~/.cline/skills/
风帆冲浪 .windsurf/skills/ ~/.codeium/windsurf/skills/

手册

# Project-scoped
git clone https://github.com/HowardTangOvO/Figma-Context-MCP-Skill
cd Figma-Context-MCP-Skill

# Project-scoped
mkdir -p .agents/skills/Figma-Context-MCP-Skill
cp SKILL.md agents/ .agents/skills/Figma-Context-MCP-Skill/

# Global (Cursor)
mkdir -p ~/.cursor/skills/Figma-Context-MCP-Skill
cp SKILL.md agents/ ~/.cursor/skills/Figma-Context-MCP-Skill/

# Global (Codex)
mkdir -p ~/.codex/skills/Figma-Context-MCP-Skill
cp SKILL.md agents/ ~/.codex/skills/Figma-Context-MCP-Skill/

用法

提供Figma URL或节点ID以触发技能：

Implement this page: https://www.figma.com/design/<fileKey>/<name>?node-id=<nodeId>

该技能将：

  1. 探头MCP连接
  2. 通过以下方式获取节点上下文 get_figma_data
  3. 通过下载图像/矢量资源 download_figma_images
  4. 使用项目的组件系统和令牌实现UI
  5. 根据Figma规范验证保真度

文件结构

Figma-Context-MCP-Skill/   ← repo root (flattened)
├── SKILL.md               # Skill instructions for the agent
├── README.md
└── agents/
    └── openai.yaml        # OpenAI Codex agent interface definition

相关 MCP