GitHub Copilot 接入 Figma MCP 实现设计稿转前端代码实战

市面上关于 Cursor 配合 Figma MCP 的教程不少，但如果你像我一样公司采购的是 GitHub Copilot，其实完全可以在 VS Code 里直接利用它接入 Figma MCP 进行设计稿还原。亲测有效，分享具体步骤。

配置 MCP 环境

在 VS Code 中打开你的项目（例如微信小程序），呼出 GitHub Copilot 对话框，模式选择 Agent，模型建议 Claude 3.7 Sonnet。提问：

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

之后跟着提示操作即可完成配置，如果有什么需要装的 VS Code 插件它会自动帮你装，甚至自动生成了配置说明文档。

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

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

获取 Figma 密钥

打开 Figma 的网页点击左上角自己的头像 -> Settings -> Security -> Generate new token。设置路径可能会有变化，自己到处点点找到 Generate new token 就对了。

找到点击之后会出现下面这个弹窗，随便起个名字比如 mcp，然后把下面的权限列表一个个打开选择读或写，要不然默认是全部 No access 的。

注意默认是 30 天过期，30 天后需要建一个新的才能继续用。

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

设计与代码生成

我以这个官方电商 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 设计非常合理，没有多余的嵌套，注释清晰。

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

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

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