【GitHub Copilot】Figma MCP还原设计稿生成前端代码

这里写自定义目录标题

• Step1：让AI给你配置MCP
• Step2：替换成自己的Figma密钥
• Step3：如何使用

Cursor+Figma MCP的教程已经很多了，由于我所在的公司采购的是GitHub Copilot，我研究了一下直接在vscode里利用GitHub Copilot接入Figma MCP进行设计稿还原代码，大获成功，这里分享我的步骤，希望能帮到你。

Step1：让AI给你配置MCP

在vscode中打开你的项目（我的例子是一个微信小程序），呼出github copilot对话框，模式选择Agent，模型建议Claude 3.7 Sonnet，提问：

https://github.com/GLips/Figma-Context-MCP 如何配置能让你在vscode里使用这个mcp

之后跟着提示狂点下一步即可完成配置，如果有什么需要装的vscode插件它会自动帮你装，甚至自动生成了配置说明文档。

由于不能保证AI每次生成的答案都一致，这里附上我的运行结果作为参考，可以看到它在项目文件夹最外层建了一个.vscode文件夹，在settings.json文件里加上了配置。如果你的项目本来就有这个settings.json文件它应该会加在文件最后面。

{"mcpServers":{"Framelink Figma MCP":{"command":"cmd","args":["/c","npx","-y","figma-developer-mcp","--figma-api-key=这里稍后替换成你自己的密钥","--stdio"]}}}

Step2：替换成自己的Figma密钥

打开Figma的网页点击左上角自己的头像 -> settings -> Security -> Generate new token
设置路径可能会有变化，自己到处点点找到Generate new token就对了
找到点击之后会出现下面这个弹窗，随便起个名字比如mcp，然后把下面的权限列表一个个打开选择读或写，要不然默认是全部No access的。
注意默认是30天过期，30天后需要建一个新的才能继续用。

都选完之后点右下角的generate token之后会生成一个密钥，这是你唯一一次复制它的机会，没复制好就关掉窗口了就只能重新建了。把这个密钥复制到settings.json文件中–figma-api-key=后面。

Step3：如何使用

我以这个官方电商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 现在你能读到这个设计图了吗

出现这样的弹窗说明Agent在尝试链接MCP server了，点继续（也可以点击右边的箭头在当前会话中允许操作就不用每次都手动点了），过一会儿可以看到它的描述，说明设计图被读到了，我们的配置生效了。

现在可以让它写代码了

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

继续等AI操作，等它操作完之后到开发者工具里运行，可以看到还原度已经非常高了。

对比设计图，指出哪里还原度不够，让它进一步优化，客客气气的。

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

商品图片上的三个icon按钮应该是水平居中的，learn more按钮应该是水平居左的。另外你能不能直接下载设计图里的icon为svg来使用，这样更还原。

如上描述改了两个版本之后，我们得到了下图版本，我把设计图放在左边，可以看到还原度非常惊人了。

最后，来人工review一下生成组件代码，可以看到模板层dom设计非常合理，没有多余的嵌套，注释清晰，比我的同事靠谱多了

<viewclass="product-card"><!-- 图片区域 --><viewclass="fixed-height"><viewclass="product-cover"style="background-image:url('{{product.coverImage}}');"></view><!-- 产品操作按钮 --><viewclass="product-actions"><viewclass="action-button like"><viewclass="icon"><imageclass="icon-image"src="/images/icons/like-icon.svg"></image></view></view><viewclass="action-button basket"><viewclass="icon"><imageclass="icon-image"src="/images/icons/basket-icon.svg"></image></view></view><viewclass="action-button share"><viewclass="icon"><imageclass="icon-image"src="/images/icons/share-icon.svg"></image></view></view></view><!-- 标签 --><viewclass="tag"wx:if="{{product.tag}}"><text>{{product.tag}}</text></view></view><!-- 产品信息区域 --><viewclass="product-info"><!-- 类别和评分 --><viewclass="row category-rating"><viewclass="category-container"><textclass="category">{{product.category}}</text></view><viewclass="rating-container"><imageclass="star-icon"src="/images/icons/star-icon.svg"></image><textclass="rating">{{product.rating}}</text></view></view><!-- 产品标题 --><textclass="product-title">{{product.title}}</text><!-- 产品描述 --><textclass="product-description">{{product.description}}</text><!-- 销售信息 --><viewclass="sales"><viewclass="icon"><imageclass="sales-icon"src="/images/icons/sales-icon.svg"></image></view><textclass="sales-text">{{product.sales}} Sales</text></view><!-- 价格信息 --><viewclass="prices"><textclass="original-price"wx:if="{{product.originalPrice}}">¥{{product.originalPrice}}</text><textclass="current-price">¥{{product.price}}</text></view><!-- 颜色选项 --><viewclass="product-colors"><viewclass="color-dot"wx:for="{{product.colors}}"wx:key="index"style="background-color:{{item}};"></view></view><!-- 产品特性 --><viewclass="product-features"><viewclass="feature"><viewclass="icon"><imageclass="feature-icon"src="/images/icons/calendar-icon.svg"></image></view><textclass="feature-text">{{product.duration}}</text></view><viewclass="feature"><viewclass="icon"><imageclass="feature-icon"src="/images/icons/lessons-icon.svg"></image></view><textclass="feature-text">{{product.lessons}} Lessons</text></view><viewclass="feature"><viewclass="icon"><imageclass="feature-icon"src="/images/icons/progress-icon.svg"></image></view><textclass="feature-text">Progress</text></view></view><!-- 了解更多按钮 --><buttonclass="learn-more-button"hover-class="button-hover"><text>Learn More</text><imageclass="arrow-icon"src="/images/icons/arrow-right-icon.svg"></image></button></view></view>

调用组件的示例页面给的例子也一目了然

<viewclass="container"><viewclass="title">商品卡片组件展示</view><viewclass="card-container"><product-cardproduct="{{productData}}"></product-card></view></view>