这里写自定义目录标题
 
  
    
    
 
     
 
      
Step1：让AI给你配置MCP
 
      
Step2：替换成自己的Figma密钥
 
      
Step3：如何使用
 
     
 
    
Cursor+Figma MCP的教程已经很多了，由于我所在的公司采购的是GitHub Copilot，我研究了一下直接在vscode里利用GitHub Copilot接入Figma MCP进行设计稿还原代码，大获成功，这里分享我的步骤，希望能帮到你。
在vscode中打开你的项目（我的例子是一个微信小程序），呼出github copilot对话框，模式选择Agent，模型建议Claude 3.7 Sonnet，提问：
 
  
    
    

      https://github.com/GLips/Figma-Context-MCP 如何配置能让你在vscode里使用这个mcp 
    
之后跟着提示狂点下一步即可完成配置，如果有什么需要装的vscode插件它会自动帮你装，甚至自动生成了配置说明文档。
 
  
    
    
 
      
    
GPT plus 代充 只需 145{"mcpServers":{"Framelink Figma MCP":{"command":"cmd","args":["/c","npx","-y","figma-developer-mcp","--figma-api-key=这里稍后替换成你自己的密钥","--stdio"]}}}
 
  
    
    
 
      
    
我以这个官方电商UI模板里的商品卡片为例，在Figma设计图上选中你要的部分图层，右键后点击Copy link to selection
 
  
    
    
 
      
    
之后就可以把链接贴到对话框了，先来测试一下配置是否成功了，确保模式是Agent，提问：
 
  
    
    

      https://www.figma.com/design/GJZhGih0VsGbpevJGkJQ9Z/E-commerce-UI—Figma-Ecommerce-UI-Kit–Demo-Version—Community-?node-id=2804-7985&m=dev 现在你能读到这个设计图了吗 
    
 
  
    
    
 
      
    
 
  
    
    
 
      
    
 
  
    
    

      请根据这个设计图在我的微信小程序里生成商品卡片组件的代码，注意微信小程序中2rpx=1px，要完全还原设计图的UI，再建一个测试页面展示这个组件的调用效果，可以参考微信小程序官方文档https://developers.weixin..com/miniprogram/dev/api/ 
    
 
  
    
    
 
      
    
 
  
    
    
 
      
    
对比设计图，指出哪里还原度不够，让它进一步优化，客客气气的。
 
  
    
    

      看上去有一些UI细节不够还原，比如卡片的内边距，还有按钮的布局，请你再仔细检查一下。 
    
 
  
    
    

      商品图片上的三个icon按钮应该是水平居中的，learn more按钮应该是水平居左的。另外你能不能直接下载设计图里的icon为svg来使用，这样更还原。 
    
 
  
    
    
 
      
    
最后，来人工review一下生成组件代码，可以看到模板层dom设计非常合理，没有多余的嵌套，注释清晰，比我的同事靠谱多了
 
    
      
       
        
        
         
          
          
           
            
             
              
               
                
                 
                  
                   
                    
                    
                    
                      {{product.tag}} 
                     
                     
                     
                      
                      
                       
                       
                         {{product.category}} 
                         
                          
                          
                            {{product.rating}} 
                            
                           
                             {{product.title}} 
                             
                            
                              {{product.description}} 
                              
                              
                               
                                
                                
                                  {{product.sales}} Sales 
                                  
                                  
                                  
                                    ¥{{product.originalPrice}} 
                                   
                                     ¥{{product.price}} 
                                     
                                     
                                      
                                       
                                       
                                        
                                         
                                          
                                          
                                            {{product.duration}} 
                                            
                                             
                                              
                                              
                                                {{product.lessons}} Lessons 
                                                
                                                 
                                                  
                                                  
                                                    Progress 
                                                    
                                                    
                                                    
                                                      Learn More 
                                                     
                                                     
                                                    
                                                   
                                                  
                                                 
                                                
                                               
                                              
                                             
                                            
                                           
                                          
                                         
                                        
                                       
                                      
                                     
                                    
                                   
                                  
                                 
                                
                               
                              
                             
                            
                           
                          
                         
                        
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
      
调用组件的示例页面给的例子也一目了然
GPT plus 代充 只需 145 
    
      
       
       
         商品卡片组件展示