还原设计稿生成前端代码

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

参考链接：blog.csdn.net/weixin_4159...

Cursor+Figma MCP的教程已经很多了，由于我用的vscode中的GitHub Copilot ，研究了一下直接在vscode里利用GitHub Copilot接入Figma MCP进行设计稿还原代码，大获成功，记录~

step1：让AI给你配置MCP

在vscode中打开项目，呼出github copilot 对话框，模式选择Agent,模型我用的是GPT-5.4,输入对话内容：

js 复制代码

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

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

Figma-Context-MCP是一个为AI编程工具（如 Cursor, Windsurf）和大型语言模型（LLM）搭建的"桥梁"或"通用适配器"。它能自动读取Figma设计文件里的布局、样式和层级信息，转换成AI容易理解的结构化数据，让AI在写代码时能真正"看懂"设计稿，从而大幅提升从设计到代码的转换效率和还原度

mcp.json

js 复制代码

{
	"servers": {
		"framelinkFigma": {
			"type": "stdio",
			"command": "npx",
			"args": [
				"-y",
				"figma-developer-mcp",
				"--stdio"			
			],
			"env": {
				"FIGMA_API_KEY": "${input:figma-token}"
			}
		},
		"com.figma.mcp/mcp": {
			"type": "http",
			"url": "https://mcp.figma.com/mcp",
			"gallery": "https://api.mcp.github.com",
			"version": "1.0.3"
		}
	},
	"inputs": [
		{
			"type": "promptString",
			"id": "figma-token",
			"description": "Figma Personal Access Token",
			"password": true
		}
	]
}

step2:替换自己的figma密钥

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

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

保存后，VS Code 一般会提示你启动或信任这个 MCP 服务。

如果没有自动启动，用命令面板执行（command + shift + p）：

MCP: List Servers
选中 framelinkFigma
Start 或 Restart
如果提示 Trust，确认信任

第一次启动这个MCP服务，会提示你输入token,将刚保存好的figma的token复制到相应位置即可。

配置成功后，你在 Copilot Chat 里直接发：

实现这个 Figma 链接对应的页面
后面附上 Figma 的 frame 或 node 链接如果 MCP 正常，我就能调用它读取设计数据，而不是只能看截图。

step3: 如何使用

在Figma设计图上选中你要的部分图层，右键后点击Copy link to selection

之后就可以把链接贴到对话框了，先来测试一下配置是否成功了，确保模式是Agent，提问：

js 复制代码

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了，点继续（也可以点击右边的箭头在当前会话中允许操作就不用每次都手动点了），过一会儿可以看到它的描述，说明设计图被读到了，我们的配置生效了。

读取成功后，可以让他写代码了：

js 复制代码

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

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

js 复制代码

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

js 复制代码

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