ClaudeCode结合figma MCP server

项目视觉设计提供的是figma文件，而figma最近有发布官方mcp server，因此这里尝试结合ClaudeCode和figma mcp来进行设计稿的代码生成/修改。

要求

1. figma dev权限或更高full权限
2. claude code会员或API Key使用如果使用其它客户端可以不需要claude code会员

Claude Code配置

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

# 检查mcp列表，确定是否正确添加
claude mcp list

使用

1. 在Figma中选择一个图层节点
2. 右键点击该节点，选择“Copy Link”选项
   • Mac下可以使用热键 Cmd + L 进行拷贝。
3. 在Claude Code中粘贴该链接，自然语言告诉AI使用该figma设计稿子进行代码生成/修改即可。

使用感受

1. 效果已经很不错，但是谈不上100%还原，很多时候都有些瑕疵，需要手动去调整下。

相关文档

• https://www.builder.io/blog/claude-code-figma-mcp-server
• https://developers.figma.com/docs/figma-mcp-server/local-server-installation/