claude code 通过 MCP 连接 figma 设计稿实现页面复刻

figma文档：https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server

figma mcp 服务可以获取到figma设计稿元素的位置、尺寸、颜色、字体等结构化信息， 可最大化实现页面的复刻，再加上 claude code 的支持，能极大的减少前端开发的工作量。

我在开发过程中一直使用的是 Claude code，下面是 Claude code 通过 MCP 连接 figma 设计稿实现页面复刻的流程：

1. 将 figma mcp 服务添加到 claude code 中并连接

启动 claude code，在claude code 终端中执行以下命令，将 Figma MCP 添加到 Claude 代码中： claude mcp add --transport http figma https://mcp.figma.com/mcp

在终端输入：/mcp，可以查看到 figma mcp 服务已经添加成功了，点击enter去登陆，他会跳转到一个figma页面，授权通过就行了

连接成功的效果

2. 将目标页面告诉 claude code

开启一个新的 claude 终端，上一个连接 figma mcp 的终端不能关掉，关掉 claude 还是读不到 figma 页面信息的

在 figma 设计稿页面选中目标元素，右键选中复制，如图

在终端直接粘贴，然后让 claude code 实现这个页面，可以看到 claude code 是能够读取这个链接的

完