从设计稿到代码：Figma MCP 与 Claude Code 实战
将 UI 设计图转化为高质量的前端代码一直是开发中的痛点。借助 Figma 的 Dev Mode MCP 服务配合 Claude Code，我们可以大幅缩短静态页面的搭建时间，甚至实现接近 1:1 的视觉还原。
准备工作
确保你已安装好 Claude Code。如果尚未配置，建议先完成基础环境搭建。此外，需要拥有 Figma 桌面客户端，且账号具备开发模式（Dev Mode）权限。
开启 Figma MCP 服务
MCP 连接依赖于本地服务。打开 Figma 桌面客户端，进入 Preferences，勾选 Enable Dev Mode MCP Server 以启动服务。
验证服务是否正常运行，访问 localhost:3845/sse。若看到相关页面，说明服务已就绪。
Figma MCP 主要提供以下工具支持：
| Tool | Function |
|---|---|
| get_code | 获取设计稿中的代码 |
| get_image | 获取设计稿中的图片 |
| get_variable_defs | 获取某个变量 |
| get_code_connect_map | 获取代码连接映射 |
| create_design_system_rules | 创建设计系统规则 |
连接 Claude Code
在项目根目录的终端中运行以下命令，将 Figma MCP 服务器注册到 Claude Code：
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
启动 Claude Code 实例：
claude --dangerously-skip-permissions
输入 /mcp 查看连接状态。如果显示未连接，尝试回车后选择 Reconnect。成功连接后，Claude 即可调用 Figma 的工具能力。
若需项目级持久化配置，可在项目目录下创建 .mcp.json 文件：
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
},
"context7"
