目标
本次实践旨在制作数字化大屏的前端组件，核心要求是前端代码与 UI 设计图的还原度达到 1:1。
要实现这一目标，需要确保本地已安装 Figma 桌面客户端，且账号拥有开发模式权限。同时需配置好 Claude Code 环境。
开启 Figma 的 MCP 服务器
Figma 的 MCP 服务仅在桌面端支持配置。打开 Figma 客户端，进入 Preferences（偏好设置），勾选 Enable Dev Mode MCP Server 以启动服务。
启动后，访问 localhost:3845/sse 若显示正常页面，即表示 MCP 服务已就绪。
此时 Figma MCP 暴露了以下 5 个工具接口：
| Tool | Function |
|---|---|
| get_code | 获取设计稿中的代码 |
| get_image | 获取设计稿中的图片 |
| get_variable_defs | 获取某个变量 |
| get_code_connect_map | 获取代码连接映射 |
| create_design_system_rules | 创建设计系统规则 |
Claude Code 连接 Figma MCP
在终端中运行以下命令，将 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 重新建立会话。
对于项目特定的配置，建议在项目根目录下新建 .mcp.json 文件，写入 Figma MCP Server 和 Context7 的配置信息：
{
"mcpServers": {
"Figma": {
"url":
