Figma 是设计师的神器，但对于前端来说，把精美的设计稿变成真实的代码，总是一件耗时耗力的事。
有没有一个方法，可以把 Figma 设计稿直接“翻译”成前端代码呢？
答案是肯定的，通过Figma MCP和Claude code，我们可以瞬间实现设计稿到代码的转变。
今天我带大家从0到1实现这个过程！
Figma是干嘛的？
Figma是一款设计工具，专为设计师打造。它拥有一套完整的组件库，可以快速设计产品的原型图。
但是，我们要明确一点：
Figma 里的设计稿，虽然看起来和最终的网页一模一样，但它还不是能直接运行的代码。通常，我们需要前端工程师根据设计稿，一行行地把代码写出来。这个过程我们称之为“还原设计图”。
那么今天咱们就通过简单的步骤，用mcp server来还原你的设计图。
安装Figma MCP 到Claude code
步骤一：配置Figma 本地服务器
Figma mcp需要安装Figma客户端：https://www.figma.com/downloads/
然后打开任意项目，接着如图所示，打开 Enable Dev Mode MCP Server即可：
启用后，Figma的MCP服务会运行在http://127.0.0.1:3845/sse。接下来，在我们安装好MCP插件后，就可以让CC和Figma开始交互了。
步骤二：在Claude code中配置Figma MCP
由于我们已经在本地3845端口启用sse服务。所以我们直接使用以下命令添加本地服务器MCP服务：
claude mcp add --transport sse framelink-figma http://127.0.0.1:3845/sse
打开Claude code，输入/mcp 并回车，看到 figma-connection 出现在列表中，就说明大功告成了！
让CC一键生成前端代码
这里我拿一个dashboard效果图举例：
我想将这一份堪称前端致死量的UI效果图转换为前端代码应该怎么做呢？
很简单，只需要将组件选中，右键复制链接，这里我们直接拿所有的组件生成链接：
然后，我们让ai直接根据这份链接，一比一生成前端html就可以了，我的prompt如下：
💡 参考这个链接「这里填你复制的组件链接」帮我一比一复刻，采用html+css+tailwind
效果如下：
看，虽然还有一些细节需要微调，但整个页面的框架、组件和布局的还原度超过了 90%！
对于剩下 10% 的细节，我们可以重复这个过程：在 Figma 中选中更具体的单个组件，复制链接，让 AI 单独进行精细还原，最终拼凑出完美的前端代码。
整个过程不到 5 分钟，我们就完成了一个过去可能需要数小时甚至一天的工作量。