前端静态页面自动生成（Figma MCP + VS code + Github copilot）

背景：随着AI的兴起，AI提效的背景下，迫切需要打通设计搞到前端界面的壁垒，本文将会带领大家从零开始用AI自动生成前端界面，会有详细的介绍。

1. 获取Figma用户Key

打开figma账户左上角点击头像，点击settings：

切换到Security页签，下滑找到 Generate new token：

随便填一个名称，有效期选90天，勾选所有的选项：

保存后复制对应的token（如果关闭了需要重新申请，只会显示一次）

2. VS code设置mcp

在项目目录下，创建一个.vscode文件夹，在里面创建mcp.json文件，文件内容如下：

json 复制代码

{
  "servers": {
    "figma": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=粘贴刚刚复制的token",
        "--stdio"
      ]
    }
  }
}

重启vs code，点击copilot的设置查看mcp是否存在

到这里基本figma的MCP服务已经配置好了，在copilot用到figma的时候就会自动启动并调用这个MCP来辅助编码，你也可以手动启动来验证一下服务是否就绪

3. copilot对话生成前端文件

先在Figma上找到你想要还原的组件，右键复制连接以下是参考的提示词

text 复制代码

这是Figma的组件地址：粘贴地址
清生成符合此页面的vue组件，在这个test.vue上，要100%还原布局，间距，字体大小等内容需要确认的是顶部菜单和侧边菜单以及面包屑不需要还原已经实现，只需要还原页面的具体内容即可

可以看到在生成期间会主动的去调用Figma的MCP服务，生成的内容也会和UI搞比较贴近，当然这个过程不是一蹴而就，大多数时候需要你再对话几轮才能满足你的要求，因为这里生成的只是静态页面，还需要加上交互以及一些样式调整等等