用 CLI 接 Figma MCP(Claude Code 终端版)
1. 先搞懂:客户端的 “Figma skill” 是什么
在 Figma MCP 里,skill(Agent Skill) = Figma 官方写好的”操作手册”包,教 AI agent 怎么正确地用写工具——按 Figma 推荐流程建 frame、组件、自动布局,并把你的设计系统当 source of truth。不装 skill,agent 也能调写工具,但容易画得不规范/不稳定。
关键:装 skill 不是单独下另一个东西。Figma 的插件(plugin)把两样一起带来:① MCP server 的连接配置(让客户端连上 Figma)② Agent Skills(让 agent 会正确写)。所以”客户端装 figma skill” = 装 Figma 插件,一步到位。skill 的通用概念见
../../ai-agent-guide/skills.md。
2. 适用客户端
本文以 Claude Code(终端 CLI) 为例。前提:已在终端装好 Claude Code。
3. 连接 Remote MCP(官方推荐)
# 1. 装 Figma 插件(同时带来 MCP server 配置 + Agent Skills)
claude plugin install figma@claude-plugins-official# 2. 若 Claude Code 正在运行,重启它
# 3. 在 Claude Code 里输入 /plugin 回车 → 切到 Installed 标签
# 4. 选中 figma server 回车 → 打开授权页 → 浏览器点 Allow access 授权你的 Figma 账号
# 5. 再输 /plugin,Installed 下 figma 显示 connected 即成功
Remote 版直连 Figma 托管的
https://mcp.figma.com/mcp,不用桌面 App、功能最全。
4. 连接 Desktop 版(企业/内网备选)
先在 Figma 桌面端 Dev Mode 里开启 MCP server,复制本地地址,再:
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp然后重启 Claude Code,用 /mcp 确认出现 figma server。
5. 验证连上了
/mcp → 应列出 figma(状态 running)
/plugin → Installed 里 figma 显示 connected
6. 开始用(让它画图)
直接自然语言描述,例如:
“在我的设计文件 X 里画一个三页引导流程:欢迎页 → 权限页 → 完成页,用自动布局。”
agent 经 MCP 写回画布,你在 Figma 里实时看到(呼应 figma-mcp.md)。
7. 常见误区
❌ “装 MCP 和装 skill 是两件事,要分别弄” → 装 Figma 插件一步把两者都带上(CLI 就是 claude plugin install figma@...)。
❌ “用旧的 @figma/mcp-server npm 包” → 该包已废弃,改用官方 Remote server(plugin 或 mcp.json)。
❌ “连上就能随便改任何文件” → 只限你 Figma 账号有权限的文件,且需 Allow access 授权范围。
❌ “不装 skill 也能稳定写画布” → 能调写工具,但容易不规范;装 skill 让 agent 按 Figma 流程来更可靠。
8. 延伸阅读
figma-mcp.md— Figma MCP 是什么、读/写能力、原理figma-mcp-gui.md— 同一套在 GUI IDE(VS Code / Cursor)里怎么弄../../ai-agent-guide/mcp.md— MCP 协议、发现机制、配法../../ai-agent-guide/skills.md— skill 的通用概念