mcpskills.net
技能MCP智能体提示词
mcpskills.net — A curated directory of AI agent Skills and MCP servers
TermsPrivacy
← 返回 MCP
设计

Figma Context

将 Figma 设计桥接到 AI 代理——读取布局、组件和设计令牌,实现设计到代码的工作流。

作者:GLips仓库 →来源 →
安装npx -y figma-developer-mcp --figma-api-key=<YOUR_KEY>

Figma Context MCP 是星标最高的 Figma 集成(15K+),专为 AI 代理设计。它从 Figma 文件中提取设计数据——布局、组件、样式和令牌——使代理能够生成准确的、符合设计的代码。

功能

  • 读取 Figma 文件结构和图层
  • 提取设计令牌(颜色、间距、排版)
  • 获取组件属性和变体
  • 检索布局和定位数据
  • 支持自动布局和约束信息

用法

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_KEY>"]
    }
  }
}

获取令牌

  1. 访问 Figma → Settings → Personal Access Tokens
  2. 生成新令牌
  3. 在 --figma-api-key 标志中使用