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

打开 Figma 网页版，点击左上角头像进入 Settings -> Security，找到 Generate new token。

权限设置路径可能会有变动，请自行探索找到生成 Token 的位置。点击后会弹出权限选择框，建议手动勾选读或写权限，默认通常是 No access。

注意： Token 默认有效期为 30 天，过期后需要重新生成新的才能继续使用。

生成 Token 后，这是唯一一次复制机会，务必保存好。将其填入上述 settings.json 中的 --figma-api-key= 参数后面。

从设计稿到代码

我以官方电商 UI 模板中的商品卡片为例。在 Figma 设计图上选中目标图层，右键选择 Copy link to selection。

将链接粘贴到 Copilot 对话框进行测试。确保模式为 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 的单位换算要求：

请根据这个设计图在我的微信小程序里生成商品卡片组件的代码，注意微信小程序中 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>
  <!-- 产品操作按钮 -->
  <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 class="container">
  <view class="title">商品卡片组件展示</view>
  <view class="card-container">
    <product-card product="{{productData}}"></product-card>
  </view>
</view>