本轮目标
本轮目标是制作数字化大屏的一个前端组件，要求和 UI 设计图还原度达到 1:1。
本轮目标需要我们提前准备好 figma 客户端，且登录帐号具有开发模式的权限。Claude Code 就不必多说，已安装的同学可直接进行下一步。
具体实践
一、开启 Figma 的 MCP 服务器
打开 Figma 桌面客户端（只支持在桌面端中设置 Figma MCP Server），如图所示选中 Preferences -> Enable Dev Mode MCP Server 启动 MCP Server。
如果访问 localhost:3845/sse 有如下页面，说明 Figma 的 MCP 服务开启成功。
Figma MCP 支持 5 个 Tool：
| Tool | Function |
|---|---|
| get_code | 获取设计稿中的代码 |
| get_image | 获取设计稿中的图片 |
| get_variable_defs | 获取某个变量 |
| get_code_connect_map | 获取代码连接映射 |
| create_design_system_rules | 创建设计系统规则 |
二、Claude Code 连接 Figma MCP
首先保证电脑上已经安装 claude code，没有安装的参考相关文档完成安装。
已经安装成功的进行下面的步骤：
项目文件夹目录下 CMD 运行：
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
