首页 › 龙虾技能列表 › figma-desktop — 技能工具

figma-desktop — 技能工具

v1.0.1

Figma 桌面 MCP Skill - 通过 Figma 桌面应用本地 MCP 服务访问完整功能，包括 Figma Make 设计生成、代码生成、设计系统管理等，无需 OAuth 认证

0· 230·0 当前·0 累计
by @samuel-qin·MIT-0
下载技能包
License
MIT-0
最后更新
2026/4/12
安全扫描
VirusTotal
无害
查看报告
OpenClaw
可疑
medium confidence
The skill's instructions are internally consistent with its claim to use a local Figma MCP server, but it asks you to install an unvetted third-party npm tool (mcporter) and to enable a local service that grants broad access to your open Figma files — this provenance and install step warrant caution.
评估建议
This skill appears to do what it claims — it connects to the Figma desktop MCP server and issues local calls — but exercise caution before installing/using it. Key points to consider: - mcporter is the only third-party software you are instructed to install; verify its origin. Check the npm package page, repository URL, maintainer, recent downloads, and source code before running `npm install -g mcporter`. - Enabling the MCP server and allowing a client to talk to http://127.0.0.1:3845 gives th...
详细分析 ▾
✓ 用途与能力
The name/description claim to access Figma's local MCP server and expose Figma Make / code generation features. The SKILL.md explicitly instructs using the local URL (http://127.0.0.1:3845/mcp) and mcporter to call those endpoints, and asks you to run the Figma desktop app in Dev Mode. These requirements are coherent with the stated purpose.
ℹ 指令范围
Instructions stay within the claimed scope: enabling Figma's MCP server, installing mcporter, and making calls to local endpoints. The SKILL.md does not instruct reading arbitrary system files or environment variables. However, enabling MCP and giving a client (mcporter) access to localhost:3845 effectively exposes your currently open documents, selections, and design content to that tool — this is an important privacy/authority implication that the user should understand.
⚠ 安装机制
The registry has no formal install spec, but the runtime instructions direct the user to run `npm install -g mcporter`. Installing a global npm package from an unspecified source is a moderate-to-high risk: the skill provides no provenance, checksum, or link to the mcporter project repository. While installing Figma via Homebrew or the official download is standard, the unvetted npm package is the primary install risk here.
ℹ 凭证需求
The skill declares no required environment variables or credentials and the instructions do not request additional secrets. That is proportionate. Nevertheless, enabling the local MCP server grants substantial local access to your Figma data and may rely on the running Figma application's authentication/session state — effectively providing access to potentially sensitive design data without OAuth. The skill does not request unrelated credentials, which is good.
✓ 持久化与权限
The skill is instruction-only, has no install spec in the registry, does not request 'always: true', and does not attempt to modify other skills or system config. The default ability for the agent to invoke the skill autonomously remains enabled (platform default); combined with local MCP access this increases blast radius, but autonomy alone is not a disqualifying issue.
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.12026/3/17

- 增加“安装 mcporter”步骤，明确要求先全局安装 mcporter CLI 工具 - 前置要求部分优化，拆分并突出操作顺序及依赖 - 其余内容与命令用法无变化，功能保持一致 - 文档结构更友好，便于新用户首次配置

● 无害

安装命令 点击复制

官方npx clawhub@latest install figma-desktop
镜像加速npx clawhub@latest install figma-desktop --registry https://cn.clawhub-mirror.com

技能文档

通过 Figma 桌面应用内置的本地 MCP 服务器 (http://127.0.0.1:3845/mcp) 访问完整的 Figma 功能，包括 Figma Make、代码生成等高级特性。

核心优势

  • ✅ 无需 OAuth - 通过 Figma 桌面应用自动认证
  • ✅ 完整功能 - 支持 Figma Make、代码生成、Code Connect
  • ✅ 本地运行 - 低延迟，数据不经过第三方服务器
  • ✅ 实时同步 - 与 Figma 桌面应用实时同步选择和状态

前置要求

1. 安装 mcporter

mcporter 是连接 MCP Server 的必需工具：

# 使用 npm 安装
npm install -g mcporter
# 验证安装
mcporter --version

2. 安装 Figma 桌面应用（最新版本）

  • 下载地址：https://www.figma.com/downloads/
  • 确保更新到最新版本

3. 启用 MCP 服务器

  • 打开任意 Figma 设计文件
  • 切换到 Dev Mode（开发模式）
  • 在右侧面板启用 MCP server
  • 复制服务器地址（默认 http://127.0.0.1:3845/mcp）

4. 保持 Figma 运行

  • MCP 服务器随 Figma 桌面应用启动
  • 关闭 Figma 后 MCP 服务不可用

配置步骤

步骤 1：安装 Figma 桌面应用

# macOS (使用 Homebrew)
brew install --cask figma
# 或从官网下载
# https://www.figma.com/downloads/

步骤 2：在 Figma 中启用 MCP

  • 打开 Figma 桌面应用
  • 打开或创建一个设计文件
  • 点击工具栏的切换开关，进入 Dev Mode（开发模式）
  • 在右侧面板找到 MCP server 选项
  • 点击启用 MCP server
  • 点击 Copy URL 复制服务器地址

步骤 3：配置 mcporter

# 添加 Figma 桌面 MCP（已预配置）
mcporter config add figma-desktop --url http://127.0.0.1:3845/mcp --transport http

步骤 4：验证连接

# 测试连接（需要在 Figma 中打开设计文件）
mcporter list figma-desktop

使用方法

基本命令

# 列出可用工具
mcporter list figma-desktop
# 调用工具
mcporter call figma-desktop. --param value

Figma Make 功能（设计生成）

# 生成设计建议
mcporter call figma-desktop.make_suggest_layout '{"description": "登录页面", "width": 375}'
# 从描述生成组件
mcporter call figma-desktop.make_generate_component '{"description": "带图标的主按钮"}'
# 优化选中设计
mcporter call figma-desktop.make_optimize '{"goal": "提高可访问性对比度"}'

代码生成

# 生成 React 组件（基于 Figma 中的选择）
mcporter call figma-desktop.generate_code '{"framework": "react", "typescript": true}'
# 生成 Vue 组件
mcporter call figma-desktop.generate_code '{"framework": "vue"}'
# 生成 CSS/Tailwind
mcporter call figma-desktop.generate_code '{"framework": "css", "tailwind": true}'
# 生成 React Native
mcporter call figma-desktop.generate_code '{"framework": "react-native"}'

获取设计上下文

# 获取当前选中的设计节点
mcporter call figma-desktop.get_selection
# 获取选中节点的样式信息
mcporter call figma-desktop.get_styles '{"nodeId": "NODE_ID"}'
# 获取设计变量
mcporter call figma-desktop.get_variables
# 获取组件信息
mcporter call figma-desktop.get_component '{"componentKey": "KEY"}'

Code Connect 集成

# 获取组件代码连接
mcporter call figma-desktop.code_connect_get '{"componentId": "ID"}'
# 同步代码到设计
mcporter call figma-desktop.code_connect_sync

文件操作

# 获取当前文件信息
mcporter call figma-desktop.get_current_file
# 获取文件结构
mcporter call figma-desktop.get_file_structure
# 获取页面列表
mcporter call figma-desktop.get_pages

使用场景示例

场景 1：从设计生成代码

  • 在 Figma 桌面应用中打开设计文件
  • 选中要生成代码的框架/组件
  • 在 OpenClaw 中执行：
mcporter call figma-desktop.generate_code '{"framework": "react", "typescript": true, "includeStyles": true}'

场景 2：AI 辅助设计（Figma Make）

  • 在 Figma 中创建新页面
  • 在 OpenClaw 中描述需求：
mcporter call figma-desktop.make_suggest_layout '{"description": "电商商品详情页，包含图片轮播、价格、购买按钮", "width": 1440}'

场景 3：设计系统同步

# 获取组件库
mcporter call figma-desktop.get_component_library
# 获取样式定义
mcporter call figma-desktop.get_style_definitions
# 同步到代码
mcporter call figma-desktop.sync_design_system

故障排除

"MCP server is only available if your active tab is a design or FigJam file"

原因：Figma 中没有打开设计文件

解决：

  • 在 Figma 桌面应用中打开任意设计文件
  • 确保处于 Dev Mode
  • 确保 MCP server 已启用

"Connection refused" 或 "Cannot connect"

原因：MCP 服务器未运行

解决：

  • 检查 Figma 桌面应用是否正在运行
  • 在 Figma 中重新启用 MCP server
  • 检查端口是否正确（默认 3845）

工具调用返回空结果

原因：Figma 中没有选中任何元素

解决：

  • 在 Figma 中选中要操作的框架或组件
  • 再次调用工具

代码生成功能不可用

原因：需要 Dev Mode 权限或特定文件访问权限

解决：

  • 确保文件有编辑权限
  • 检查是否处于 Dev Mode
  • 确保文件不是只读模式

注意事项

  • Figma 必须保持运行
- MCP 服务器是 Figma 桌面应用的一部分 - 关闭 Figma 后所有 MCP 调用都会失败

  • 需要打开设计文件
- 大多数工具需要在 Figma 中打开文件才能工作 - 部分工具需要选中特定元素

  • Dev Mode 要求
- 某些高级功能需要处于 Dev Mode - 确保有文件的编辑权限

  • 网络要求
- 虽然是本地服务器，但仍需要网络连接 Figma 服务 - 防火墙不能阻止 localhost:3845

  • 版本兼容性
- 确保 Figma 桌面应用是最新版本 - MCP 功能在旧版本中可能不可用

与第三方 MCP 对比

特性figma-desktop (推荐)figma-mcp (第三方)
Figma Make✅ 完整支持❌ 不支持
代码生成✅ 完整支持⚠️ 基础支持
认证方式自动（通过桌面应用）API Token
需要 Figma 桌面✅ 必须❌ 不需要
Code Connect✅ 支持❌ 不支持
实时选择同步✅ 支持❌ 不支持

相关链接

  • Figma 桌面应用下载：https://www.figma.com/downloads/
  • Figma MCP 文档：https://developers.figma.com/docs/figma-mcp-server/
  • Figma Make 介绍：https://www.figma.com/blog/introducing-figma-mcp-server/
  • Code Connect 文档：https://developers.figma.com/code-connect/
数据来源：ClawHub ↗ · 中文优化：龙虾技能库
OpenClaw 技能定制 / 插件定制 / 私有工作流定制

免费技能或插件可能存在安全风险，如需更匹配、更安全的方案，建议联系付费定制

了解定制服务