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

Ne0inhk

25 Mar 2026 — 7 min read

这里写自定义目录标题

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>

Verilog 零基础入门：语法、仿真与 FPGA 实战

一、入门前提 Verilog 是 FPGA 开发的核心硬件描述语言，学习需具备两大基础：一是数字电子技术常识（理解逻辑门、时序 / 组合逻辑等概念），二是 C 语言基础（有助于快速适应语法结构）。学习核心是掌握 “代码→硬件” 的映射逻辑，而非单纯记忆语法。二、仿真环境选择根据开发场景选择适配环境，需重点注意路径约束： * FPGA 开发环境：Xilinx Vivado（主流推荐）、Xilinx ISE（已停更）、Intel Quartus II * ASIC 开发环境：Synopsys VCS * 关键约束：电脑用户名、软件安装路径、工程路径必须全英文（无中文 / 特殊符号），否则会导致软件启动失败、编译报错或仿真异常。三、Verilog 设计流程

Vivado完整license文件获取与配置指南

本文还有配套的精品资源，点击获取简介：Vivado是由Xilinx开发的FPGA和SoC设计综合工具，支持Verilog、VHDL等硬件描述语言，提供高级综合、仿真、IP集成等功能。本资源包“Vivado_的license文件.zip”包含用于解锁Vivado完整功能的许可证文件。介绍了许可证服务器配置、.lic文件管理、浮动与固定许可证区别、激活流程、更新与诊断等核心内容。适用于FPGA开发者、嵌入式系统工程师及学习者，帮助其合法配置Vivado环境，提升开发效率和项目执行能力。 1. Vivado工具与FPGA开发环境概述 Xilinx Vivado设计套件是面向FPGA和SoC开发的集成化软件平台，广泛应用于通信、工业控制、人工智能、嵌入式视觉等多个高科技领域。其核心功能包括项目创建、综合、实现、仿真、调试及系统级集成，支持从设计输入到硬件验证的全流程开发。 Vivado不仅提供了图形化界面（GUI）便于初学者快速上手，还支持Tcl脚本自动化操作，满足高级用户的大规模工程管理需求。其模块化架构设计使得开发者可以灵活选择所需功能组件，如HLS（高层次综合）、IP In

宇树机器人SDK2开发指南：从环境搭建到Demo测试

本文以宇树 G1 人形机器人为主线，系统介绍 unitree_sdk2（C++）与 unitree_sdk2_python（Python）的完整开发流程，涵盖通信架构原理、环境搭建、依赖安装、Demo 编译运行、网络配置以及常见问题处理，适合具身智能领域的初中级开发者快速上手。目录 1. SDK2 概述与架构原理 2. 开发环境要求 3. 获取官方 SDK 包 4. 安装依赖与编译 5. 机器人与开发机网络配置 6. 调试并运行 Demo 7. Python SDK Demo 测试 8. 常见问题与解决方案 9. 总结 1. SDK2 概述与架构原理 1.

Discord中创建机器人的流程

主要步骤概览 1. 在 Discord Developer Portal 创建应用（Application） 2. 在应用中创建 Bot（Bot User） 3. 开启必要的权限与 Privileged Intents（特别是 Message Content Intent） 4. 生成邀请链接并把 Bot 邀请进你的服务器 5. 获取 Bot Token 并妥善保存（放到环境变量） 6. （可选）在服务器/频道设置权限，确认 Bot 可以读取消息历史与附件 7. 用 Python 运行最小测试脚本，确认能接收到消息并处理附件详细步骤 1. 创建应用（Application） * 打开：https://discord.