Figma MCP Skills

figma mcp技能

Claude Code+Figma MCP服务器的代理技能\ 涵盖整个设计过程：设计系统、设计到代码、用户体验规范、可访问性。

先决条件

• Claude代码已安装（npm install -g @anthropic-ai/claude-code)
• Figma桌面应用程序（现代版）
• 付费Figma计划中的座位开发或满
• Claude Pro或Max

快速设置

1.在Figma中启用MCP桌面

1. 打开Figma桌面
2. 打开设计文件
3. 激活 开发者模式 (Shift + D)
4. 在检查→部分面板中 MCP服务器 →点击 启用桌面MCP服务器
5. 服务器正在运行 http://127.0.0.1:3845/mcp

2.将Claude代码连接到MCP Figma

# Ajouter le serveur desktop (recommandé — sélection directe dans Figma)
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

# Vérifier la connexion
claude mcp list

3.在您的项目中克隆此repo

git clone https://github.com/TON_USERNAME/figma-mcp-skills.git
cd figma-mcp-skills

4.将规则复制到项目中

# Copier CLAUDE.md à la racine de ton projet
cp .claude/CLAUDE.md /chemin/vers/ton-projet/.claude/CLAUDE.md

结构

figma-mcp-skills/
├── .mcp.json                           # Config MCP prête à l'emploi
├── .claude/
│   └── CLAUDE.md                       # Rules globales pour Claude Code
├── skills/
│   ├── 01-design-system/
│   │   └── SKILL.md                    # Bridge tokens, composants, tier hierarchy
│   ├── 02-design-to-code/
│   │   └── SKILL.md                    # Figma → React / Jetpack Compose
│   ├── 03-ux-research-specs/
│   │   └── SKILL.md                    # Annotations, flows, specs fonctionnelles
│   └── 04-accessibility/
│       └── SKILL.md                    # WCAG 2.1 AA, audits, ARIA patterns
└── rules/
    ├── figma-mcp-rules.md              # Rules MCP universelles
    └── bridge-design-system-rules.md  # Rules spécifiques Bridge / Swissquote

与Claude代码一起使用

# Lancer Claude Code dans ton projet
cd /chemin/vers/ton-projet
claude

# Vérifier que Figma MCP est connecté
/mcp

# Exemples de prompts
"Implémente ce composant depuis ma sélection Figma en React avec les tokens Bridge"
"Extrait les variables de couleur de cette frame et mappe-les sur les tokens Bridge"
"Génère le code Jetpack Compose pour ma sélection Figma en suivant MD3"
"Audite cette frame pour la conformité WCAG 2.1 AA"

MCP工具可用

计划和限制Figma