Figma 的 Dev Mode MCP Server 允许 AI 与编码助手直接获取设计结构化数据（组件层级、变量/设计令牌、自动布局规则、样式等），避免依赖截图解析。多篇实操与评测显示，Claude Code 可作为 MCP 客户端，在终端或 IDE 中拉取选中框架/组件的上下文，并据此生成贴合设计体系的前端代码；同时可通过链接方式对指定设计进行转换与迭代。
Figma 近期将 MCP 能力扩展到远程访问与与 Make 的原型代码连接，使 AI 不仅“看见”视觉，还能读取生成的底层代码，从而提升还原度。官方指南与报道指出，VS Code、Cursor、Windsurf、Claude Code 等已形成生态；Code Connect UI（Beta）进一步把代码库与 Figma 组件映射，缩短从设计到实现的链路。实际落地仍需开发者校验与微调，复杂页面在精度上存在可控偏差。
常见问题
Q：Claude Code 如何“看懂”设计？
A：通过 MCP 从 Figma 读取结构化数据与变量，而非仅凭图像；可按“选区”或“链接”方式取数。
Q：需要哪些前置条件？
A：Figma 桌面端开启 Dev Mode MCP Server；本地安装 Claude Code 或其他支持 MCP 的客户端。
Q：能直接得到生产级代码吗？
A：能生成高还原度初稿，但复杂场景仍需人工校验与重构，属“开发者在环”的流程。
Q：是否支持远程/跨工具调用？
A：是。Figma 已增设远程访问与与 Make 的连接，IDE 与代理可在本地外部获取设计上下文。
Q：与 Code Connect UI 的关系？
A：Code Connect UI 将代码库组件与 Figma 组件映射，配合 MCP 提升一致性与复用度。
