还原设计稿生成前端代码

WebGirl
14 阅读5分钟

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

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

step1.方式1：让AI给你配置MCP

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

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

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

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

mcp.json

{
	"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
		}
	]
}

step1.方式2：当然也可以手动安装插件完成配置

  • 在VS Code Copilot中设置对应的MCP配置

首先确保MCP发现的功能是开着的，在VS Code中打开设置(Ctrl+,或者Cmd+,), 输入chat.mcp确认Discovery是Enabled.

image.png

  • 在extentions中输入@mcp figma可以找到官方对于figma的访问支持

image.png

注意其中的Install是安装到VSCode 的整体目录下， Install in Workspace是安装到当前项目下，可以根据您的情况选择，建议选择Install in Workspace

选择Install in Workspace之后可以在当前项目.vscode/mcp.json下看到具体的Figma配置（也可以忽略上述的步骤，自己直接新建mcp.json文件然后输入详细的配置）

// 默认生成的，当前不可用
"com.figma.mcp/mcp": {
    "type": "http",
    "url": "https://mcp.figma.com/mcp",
    "gallery": "https://api.mcp.github.com",
    "version": "1.0.3"
}

注意这个是默认生成的配置，截止笔者发稿时，这个配置不可用，会报错。将协议和url改为sse依然不可用。需要改为如下的stdio的配置

//改为stdio格式，当前可用
"figma": {
    "command": "npx",
    "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
    ],
    env": {
        "FIGMA_API_KEY": "您的Figma API Token"
    },
    "type": "stdio"
},

配置之后就可以在工具中具体看到Figma了

step2:替换自己的figma密钥

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

image.png

都选完之后点右下角的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

image.png

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

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

image.png

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

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

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

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

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

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