Image Prep MCP

Figma智能图像MCP服务器

一种模型上下文协议（MCP）服务器，通过自动平铺、压缩和智能裁剪将Figma设计处理成克劳德可读的图像。

注意：服务器的规范源代码位于 figma-smart-image-mcp/。根目录仅包含文档和部署帮助程序。

实时部署

公共URL: https://figma-smart-image-mcp-production.up.railway.app/

实时部署支持 多租户身份验证 -多个用户可以同时使用自己的Figma令牌。

特性

• 智能导出：从Figma自动导出SVG/PNG
• 自动平铺：大型设计自动拆分为可管理的图块
• 压缩：针对Claude的上下文大小限制进行了优化
• 智能作物：启发式检测UI模式以获得更好的作物
• 多住户：每个用户都使用自己的Figma令牌进行身份验证
• Redis支持：跨会话的可靠令牌存储

快速入门（使用实时部署）

选项A：快速命令（建议大多数用户使用）

在终端中运行以下命令：

claude mcp add --transport http figma-smart-image https://figma-smart-image-mcp-production.up.railway.app/mcp

就是这样！现在跳到 步骤2 在......下面

选项B：手动配置（.clauderc文件）

创建或更新 .clauderc 在您的项目目录中：

{
  "mcpServers": {
    "figma-smart-image": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-sse",
        "https://figma-smart-image-mcp-production.up.railway.app/mcp"
      ]
    }
  }
}

第二步：使用Figma进行身份验证（推荐）

首次使用MCP服务器时，请单击 验证 在克劳德。服务器将 自动启动Figma OAuth，完成后返回给Claude。 如果克劳德稍后出现 身份验证：未通过身份验证，只需单击 验证 再次重新授权。

步骤3：（可选）手动输入令牌

如果您更喜欢个人访问令牌：

1. 从获取令牌 Figma设置
2. 打开 https://figma-smart-image-mcp-production.up.railway.app/
3. 输入您的令牌并单击“连接到Figma”

第四步：开始使用Claude

现在，您可以在Claude中使用Figma Smart Image工具：

// Ask Claude to process a Figma design
"Please extract the hero section from this Figma link:
https://www.figma.com/design/..."

运作原理

┌─────────────────┐
│  Claude Client  │
└────────┬────────┘
         │ 1. Request MCP connection
         ▼
┌─────────────────────────────┐
│  Railway Deployment         │
│  (Multi-Tenant Server)      │
└────────┬────────────────────┘
         │ 2. Returns device_code + user_code
         ▼
┌─────────────────────────────┐
│  User visits auth page      │
│  - Enters user_code         │
│  - Enters Figma token       │
└────────┬────────────────────┘
         │ 3. Token stored in Redis
         ▼
┌─────────────────────────────┐
│  Client polls for token     │
│  - Gets access_token        │
│  - Uses Bearer auth         │
└────────┬────────────────────┘
         │ 4. Ready to use tools!
         ▼
┌─────────────────────────────┐
│  Figma Smart Image Tools    │
│  - process_figma_link       │
│  - get_figma_components     │
│  - get_figma_node_details   │
│  - get_figma_variables      │
│  - list_figma_frames        │
└─────────────────────────────┘

可用工具

process_figma_link

处理Figma URL并将图像+图块导出到磁盘。

输入：

{
  "url": "https://www.figma.com/design/...",
  "out_dir": "/path/to/output",
  "prefer_format": "webp"
}

get_figma_components

列出Figma文件中的所有组件和组件集。

输入：

{
  "url": "https://www.figma.com/design/..."
}

get_figma_node_details

返回特定节点的布局和样式详细信息。

输入：

{
  "url": "https://www.figma.com/design/...?...&node-id=1-123"
}

get_figma_variables

返回设计变量（需要Figma Pro计划或更高版本）。

输入：

{
  "url": "https://www.figma.com/design/..."
}

list_figma_frames

使用浅取列出顶级框架/组件。

输入：

{
  "url": "https://www.figma.com/design/...",
  "max_frames": 200
}

debug_figma_access

显示令牌属于哪个Figma用户以及文件是否可访问。

输入：

{
  "url": "https://www.figma.com/design/..."
}

身份验证流程（技术细节）

OAuth授权码+PKCE（克劳德桌面版）

Claude Desktop使用authorization_code+PKC流程。如果还没有可用的令牌， 服务器将直接重定向到Figma OAuth并自动恢复。

OAuth设备代码流（传统CLI）

服务器使用OAuth 2.0设备授权授予：

1. 设备授权请求

POST /device/authorize
Content-Type: application/json

{
  "client_id": "mcp_client"
}

Response:
{
  "device_code": "device_xxx",
  "user_code": "ABC123",
  "verification_uri": "https://...",
  "expires_in": 600
}

1. 用户认证

POST /auth
Content-Type: application/x-www-form-urlencoded

user_code=ABC123&token=figd_xxx

1. 令牌轮询

POST /oauth/token
Content-Type: application/x-www-form-urlencoded

grant_type=urn:ietf:params:oauth:grant-type:device_code&device_code=device_xxx

Response:
{
  "access_token": "device_xxx",
  "token_type": "Bearer",
  "expires_in": 3600
}

1. 经过身份验证的请求

POST /message?sessionId=xxx
Authorization: Bearer device_xxx
Content-Type: application/json

{
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": { ... }
}

超时

• MCP_TOOL_TIMEOUT_MS / FIGMA_TOOL_TIMEOUT_MS （默认值： 60000)控制总工具执行时间。
• FIGMA_REQUEST_TIMEOUT_MS 控制单个Figma API+图像下载请求。

推荐：对于大型Figma文件，将两者都设置为 120000 （120秒）以避免超时。

故障排除

无效令牌/403来自Figma

如果工具返回 Invalid token 或 403:

1. 清除缓存的OAuth令牌：

   curl -s "https://figma-smart-image-mcp-production.up.railway.app/health?debug=clear_oauth"

1. 重新运行 验证 在克劳德。
2. 通过以下方式进行验证：

   debug_figma_access
   {"url":"https://www.figma.com/design/..."}

节点id格式问题

Figma URL通常对节点ID进行不同的编码或格式化。服务器会对这些进行标准化，但你 也可以使用以下形式之一：

• node-id=1:1234
• node-id=1-1234
• node-id=1%3A1234 （URL编码）

如果你看到 No image URL returned for node ...，尝试标准化 node-id 或使用：

list_figma_frames
{"url":"https://www.figma.com/design/..."}

本地开发

要在本地运行：

# Install dependencies
npm install

# Set your Figma token (optional - multi-tenant mode works without it)
export FIGMA_TOKEN="your_figma_token_here"

# Build
npm run build

# Run server
npm start

对于Redis的本地开发：

# Using Docker
docker run -d -p 6379:6379 redis

# Set Redis URL
export REDIS_URL="redis://localhost:6379"

配置

环境变量：

建筑

• 运输：带有服务器发送事件（SSE）的HTTP
• 存储：Redis用于设备代码和会话令牌
• 认证：OAuth 2.0设备授权授予
• 部署：铁路（Docker容器）

安全

• 每个用户的Figma令牌在Redis中是隔离的
• 代币在1小时后过期
• 设备代码在10分钟后过期
• 所有MCP请求都需要承载令牌

许可证

麻省理工学院

支持

有关问题和疑问，请使用GitHub问题页面。