在Claude Code中安装Figma MCP
Figma MCP（免费版）能做什么？
Figma MCP（付费版）提升在哪里？
获取Figma MCP的最佳输出：一些有用的设计规则
选择Frame，转为html页面
Figma MCP自动推送创建页面流程
1. 第一次推送（自动创建新 Figma 文件）
2. 后续推送（添加到已有文件）
总结

Figma桌面应用下载地址：https://www.figma.com/downloads/

Figma MCP目录：https://www.figma.com/mcp-catalog/

Figma MCP允许我们读取Figma的设计稿内容，从而调用Agent实现网页，但非订阅版本无法直接修改页面中的元素，如果要让Agent修改鼠标选中的内容、对某个组件进行微调，则需要开通dev seats或更高席位。

在Claude Code中安装Figma MCP

打开一个文件夹，打开终端，通过以下命令将官方MCP添加到目录下

1	claude mcp add --transport http figma https://mcp.figma.com/mcp

或者在文件夹根目录添加文件.mcp.json

{
    "mcpServers": {
        "figma": {
            "type": "http",
            "url": "https://mcp.figma.com/mcp"
        }
    }
}

前者也是将这部分配置写到JSON文件，不过该文件位于~/.claude.json，MCP配置对应字段projects.<文件夹>.mcpServers

这样在该目录下每次启动Claude Code都会自动连接上Figma MCP，如果不想用，则进入Claude Code之后输入/mcp把enable去掉。

初次使用时，运行claude命令，输入/mcp，Figma MCP应该会提示“未认证”，此时选择执行认证，会自动弹出浏览器页面，登录Figma账号之后进行认证，即可完成认证。此操作只会进行一次。

Figma MCP（免费版）能做什么？

https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/

重点关注前两个就行了

从实时网站界面生成设计稿。原理是通过在web注入https://mcp.figma.com/mcp/html-to-design/capture.js脚本来自动截取页面内容并发送到Figma设计稿中（详见后面章节）。一般用于本地开发的页面，因为自己写的页面注入脚本是正常合理的。也可以用于任意网络页面，但需要用非正常手段，也就是js注入，可以用@playwright/mcp完成模拟和注入的功能，但实测下来效果并不太好，还原度不高；也可以换一种思路，用Superdesign提取页面设计元素，然后让Claude Code生成网页，再做成设计稿
从设计稿选定页面（Frame）生成web代码。通过复制Frame的URL（带NodeID）给Claude Code调用Figma MCP提取设计上下文，然后根据上下文生成web代码（详见后面章节）。
提取、总结、归纳设计上下文。（算是一个特性）
获取Make资源。（Make是Figma Make，在Figma中提设计需求生成代码，可以看成是Figma + Claude Code）
保持设计组件系统于代码链接的一致性。（算是一个特性）

Figma MCP（付费版）提升在哪里？

https://developers.figma.com/docs/figma-mcp-server/local-server-installation/

其实不是为了Figma MCP付费，而是为了Figma Desktop的Dev Mode付费，MCP能力只是Dev Mode下的一个提升点，人家这个模式的付费重点也不在于MCP能力的提升，更多是软件交互和新的设计范式方面的。

购买Full席位（20刀/月，192刀/年）或Dev席位（15刀/月，144刀/年）都可以开启Dev Mode - Plans & Pricing | Figma。

可以使用基于UI选择的MCP服务调用，更直观，更细致
没了（确信）

获取Figma MCP的最佳输出：一些有用的设计规则

Figma提供了一些经验规则来确保输出结果，可以用来参考构建自己的SKILLS：

https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/

选择Frame，转为html页面

建议使用tailwindcss，能让代码行数大幅减少

打开Figma设计稿，右键Frame，选择“Copy link to selection”

得到如下链接：https://www.figma.com/design/<设计稿ID>/<设计稿名称>?node-id=<frame ID>&t=<时间戳>

然后把这个链接发给CC，告诉它：“请帮我把这个frame提取为网页，使用tailwindcss，避免使用CSS”，就可以在本地生成tailwindcss风格的html页面了（一般是单页面）

更进一步地，可以让CC自动提取设计元素创建组件库、创建应用程序、自动发布设计到Figma……

Figma MCP自动推送创建页面流程

这部分流程由Claude Code自动完成，只需要告诉他：“请帮我把html文件创建为figma设计稿”。

过程中似乎会自动安装并开启某种http静态文件服务器，有时候是python、有时候是nodejs，而且是在后台永久开启，退出claude也不会退出，可以告诉Claude Code：“不要自动启动 Python/Node.js HTTP 服务器。使用 VS Code Live Server，端口固定为 5500。Figma 捕获时直接使用 http://localhost:5500/<文件名>”。

第一次推送（自动创建新 Figma 文件）

Step 1 — 在 HTML 里注入 capture 脚本：

1	<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>

Step 2 — 调用generate_figma_design工具，outputMode: 'newFile'：

返回一个captureId（如 92c9f2be-…）

Step 3 — 用浏览器打开本地页面，URL 后拼上 hash 参数：

http://localhost:3737/demo.html
    #figmacapture=<captureId>
    &figmaendpoint=https://mcp.figma.com/mcp/capture/<captureId>/submit
    &figmadelay=1000

页面加载后，capture.js检测到 hash 参数，自动截取页面结构并上传。

Step 4 — 轮询 generate_figma_design（传入 captureId），等状态变 completed：

返回新创建的fileKey（如 AYY7hIJacruRP5aIqlBHc4）

后续推送（添加到已有文件）

同样的流程，只是 Step 2 时改用outputMode: 'existingFile' + fileKey，这样新内容会作为新 frame 加进同一个文件，而不是创建新文件。

总结

Figma提供了一组很棒的MCP工具，且免费席位也几乎不影响Figma MCP的使用，配合上Claude Code超强的代码能力，能够快速做出规范又美观的系统原型，能够实现对设计稿99.9%的还原，进一步提升了原型开发效率。

03的开发日志

玩玩Figma MCP