Figma上下文MCP技能
一种代理技能，使用1:1的视觉保真度将Figma节点转换为生产就绪代码 Framelink Figma上下文MCP (figma-developer-mcp).
它做什么
- 通过Framelink MCP服务器连接到Figma(
get_figma_data,download_figma_images) - 从Figma节点数据中解析布局、排版、颜色、组件层次结构和资源
- 将设计标记和组件转换为项目的现有约定
- 通过内置的验证清单强制实现像素精确的保真度
先决条件
- Figma个人访问令牌(
FIGMA_API_KEY) - 在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//?node-id=该技能将：
- 探头MCP连接
- 通过以下方式获取节点上下文
get_figma_data - 通过下载图像/矢量资源
download_figma_images - 使用项目的组件系统和令牌实现UI
- 根据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