1. 首页首页
  2. 科技前沿科技前沿

2026年玩转ClaudeCode：使用Figma-MCP编写前端代码1：1还原UI设计图

科技前沿 • • 阅读 0

玩转ClaudeCode：使用Figma-MCP编写前端代码1：1还原UI设计图p 目录 本轮目标 具体实践 一 开启 Figma 的 MCP 服务器 二 Claude Code 连接 Figma MCP 三 Claude Code 代码实现 Figma 设计稿 本轮目标是制作数字化大屏的一个前端组件 要求和 UI 设计图还原度达到 1 1 本轮目标需要我们提前准备好 figma 客户端 且登录帐号具有开发模式的权限 没有可以去某夕 Claude Code p

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



目录

本轮目标

具体实践

一、开启 Figma 的 MCP 服务器

二、Claude Code 连接 Figma MCP

三、Claude Code 代码实现 Figma 设计稿

本轮目标是制作数字化大屏的一个前端组件，要求和UI设计图还原度达到1:1。

本轮目标需要我们提前准备好figma客户端，且登录帐号具有开发模式的权限（没有可以去某夕）。Claude Code 就不必多说，没有安装的同学参考我的上一篇文章《玩转ClaudeCode：ClaudeCode安装教程（Windows+Linux+MacOS）》完成安装，通过注册，可以额外领取100美金的免费使用额度。

安装教程参考：

打开 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，没有安装的参考：

已经安装成功的进行下面的步骤：

项目文件夹目录下 CMD 运行：

 
     
 
     
启动 Claude Code：
 
     
 
     
查看 MCP 是否安装成功：
 
     
 
     
如果显示未连接，可以回车之后选择 Reconnect 一下，连接成功如图：
 
     
 
     
如果需要项目特定配置，可以在项目目录下新建 .mcp.json 文件，将 Figma MCP Server 和 context7 MCP Server 的配置写入：
 
     
 
     
 
      
 
      
 
      
先测试 Claude Code 能否读取到 Figma 的设计稿。
 
      
选中 Figma 设计稿中的某一块（或复制 Figma 中的图层链接）。
 
      
 
      
在 Claude Code 里提问，是否可以抓取到对应模块的 CSS：
 
      
 
       
告诉我figma里选中的模块的css
 
      
 
      
 
      
可以看到，CSS 信息被顺利抓取。
 
      
下面，我们来进行代码的整体编写，将 Figma 设计稿转换成代码实现。
 
      
 
       
根据figma 设计稿当前选中的图层，遍历里面所有的组件，对图片逐一下载，对每个子组件逐一读取，将figma设计稿转换为html代码实现，创建index.html
 
      
 
      
 
      
我创建了一个静态 html 页面来实现这个效果，如果是vue/react/angular的页面，告诉 claude code 即可。
 
      
由于元素过多，claude code 的第一版一般都和 ui 大相径庭。后续需要我们逐个组件把 css 喂给 claude code。
 
      
 
      
最终效果：
 
      
 
      
各个组件都和原型 1:1 复刻，后面再微调组件间距离即可。因为大屏太过复杂，调了很久，但是也节省了非常大的时间。
 
      
下面，我们再去复刻一个简单的移动端的 UI 案例。
 
      
还是先选中我们要实现的图层。
 
      
 
      
告诉 claude code，我们要遍历这个图层中的所有组件，创建一个 html 文件，实现这个组件。
 
      
 
       
帮我创建一个test.html，实现我选中的图层及内容，要求遍历每一个组件，获取他们的样式和svg等
 
      
 
      
 
      
初版很快就被实现了出来：
 
      
 
      
下面，我们需要依次选中figma中的每个子组件，再把它们的 css 喂给 claude code。
 
      
 
      
最终效果：
 
      
 
      
再实现一个简单的，目标如下：
 
      
 
      
初版如图：
 
      
 
      
喂给 claude code 更多 css 和 svg 信息：
 
      
 
      
 
      
最终结果如图：
 
      
 
      
经过这几个例子，我们可以看到 claude code 结合 figma 的 mcp 之后，功能变得多么的强大，期待使用 claude code 做出更多出色的作品！！
 
      
 
       
 
       
 
       
Claude Code 开发者交流社区
 
       
福利多多，立即加入 👇 👇 👇 
 
       
 
       
期待与你的思维碰撞，共同奔赴AI开发的浪潮！
 
       
 
       
 
      
     
    
   
  
  

                    


                    


                    

                        

                            

                                小讯
                            

                            

                                

                                    
                                        
                                    
                                

                            

                        

                    

                


                

                    
                    
                    

                        
                        

                             上一篇
                            2026-04-07 23:47
                        

                    

                    
                    


                    
                    
                    

                        
                        

                            下一篇 
                            2026-04-07 23:45
                        

                    

                    
                    
                


                

                    
相关推荐

                    
                

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/218224.html