使用 GitHub Copilot 和 Figma MCP 还原设计稿生成前端代码

https://www.figma.com/design/... 现在你能读到这个设计图了吗

出现弹窗说明 Agent 正在尝试链接 MCP server。允许操作后，可以看到描述信息，确认设计图已被读取。

接下来请求生成代码：

请根据这个设计图在我的微信小程序里生成商品卡片组件的代码，注意微信小程序中 2rpx=1px，要完全还原设计图的 UI，再建一个测试页面展示这个组件的调用效果。

等待 AI 操作完成后，在开发者工具中运行。对比设计图指出还原度不够的细节（如内边距、按钮布局等），让 AI 进一步优化。

最终得到的组件代码如下，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>