告别手写代码：D2C 让开发效率提升 75%，代码可用性达 99%什么是 D2C？ D2C（Design to Code

作者：小时
日期：2025 年 12 月
关键词：D2C、Figma MCP、Wot-Design-Uni MCP、uni-app、UnoCSS、设计稿转代码

第 1 章：概述与快速开始

1.1 什么是 D2C？

D2C（Design to Code） 是指将设计稿自动转换为前端代码的技术。在 uni-app 项目中，D2C 能够：

🚀 提升开发效率：从设计稿到代码，时间缩短 75%
✅ 提高代码质量：代码可用性从 60% 提升到 99%
🎯 精准还原设计：自动处理 px → rpx 转换、组件选择、样式映射
📚 降低学习成本：AI 自动参考组件库文档和最佳实践

1.2 核心流程概览

flowchart LR
    A[Figma 设计稿] --> B[Figma MCP<br/>分析设计稿结构]
    B --> C[Wot-Design-Uni MCP<br/>获取组件文档]
    C --> D[项目 Rules<br/>figma2App.md + system.md]
    D --> E[AI 生成代码<br/>Cursor AI]
    E --> F[uni-app 页面代码<br/>index.vue + hooks.ts]
    
    style A fill:#e1f5ff
    style B fill:#fff3e0
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e8f5e9
    style F fill:#c8e6c9

1.3 解决的核心痛点

痛点	传统方式	D2C 方式
设计稿还原不准确	需要反复调整，耗时耗力	自动精确转换，一次到位 ✅
组件库 API 使用错误	查阅文档，容易出错	AI 自动查询最新文档 ✅
开发效率低	1 小时/页面	15 分钟/页面 ✅
代码质量不稳定	依赖开发者经验	遵循项目规范，质量稳定 ✅

1.4 前置条件检查清单

在开始之前，请确保：

Figma MCP 服务器已配置：用于获取设计稿数据
Wot-Design-Uni MCP 服务器已配置：用于查询组件文档
项目 Rules 文件已准备：figma2App.md、system.md
Cursor AI 已安装并配置 MCP 连接
项目技术栈已确认：Vue 3 + TypeScript + UnoCSS + wot-design-uni

第 2 章：前置准备 - 项目 Rules 与 MCP 工具配置

2.1 项目 Rules 体系介绍

2.1.1 figma2App.md - Figma 转代码规则

这是 D2C 转换的核心规则文件，包含：

⚡ UnoCSS 优先使用规则（第一优先级）

<!-- ✅ 优先：使用 UnoCSS 原子类 -->
<view class="w-750rpx p-40rpx text-32rpx rounded-24rpx bg-white">
  卡片内容
</view>

<!-- ❌ 避免：自定义 CSS（除非 UnoCSS 无法实现） -->
<view class="card">卡片内容</view>

关键规则：

px → rpx 转换：设计稿 375px → 代码 750rpx（×2）
元素映射：div → view、p → text、img → image
资源处理：图片下载 PNG 格式，保存到 src/static/images/
组件选择：优先使用 wot-design-uni 组件

2.1.2 system.md - 项目开发规范

定义项目的技术栈和编码规范：

技术栈：Vue 3 + TypeScript + UnoCSS + Pinia
编码规范：TypeScript 规范、命名规范、文件结构
组件使用规范：wot-design-uni 组件库使用指南
样式规范：UnoCSS 原子类优先、rpx 单位规范

2.2 Figma MCP 工具介绍

功能：获取 Figma 设计稿的完整数据

核心能力：

分析设计稿结构（识别状态栏、页面头部、内容区域）
提取设计元素（文本、图片、颜色、尺寸）
下载设计资源（图片、图标）

配置方法：在 Cursor 的 MCP 配置中添加 Figma MCP 服务器

配置方法：

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=[your token]",
        "--stdio"
      ]
    }
  }
}

有关如何配置 Framelink MCP for Figma 服务器的更多信息，请参阅 Framelink 文档。

2.3 Wot-Design-Uni MCP 工具介绍

功能：提供组件库的完整文档和示例

核心工具：

list-components：列出所有可用组件（82 个）
get-component-docs：获取组件详细文档（API、属性、事件）
list-component-examples：获取组件代码示例

安装 MCP 服务器

# 从 npm 全局安装
npm install -g @charlotte-zone/wot-design-uni-mcp

配置方法：

{
  "mcpServers": {
    "wot-design-uni-mcp": {
      "command": "npx",
      "args": ["@charlotte-zone/wot-design-uni-mcp"]
    }
  }
}

2.4 MCP 工具配置步骤

安装 Figma MCP 服务器
安装 Wot-Design-Uni MCP 服务器：npm install -g @charlotte-zone/wot-design-uni-mcp
在 Cursor 中配置 MCP 连接：编辑 Cursor 配置文件
验证工具是否可用：在 Cursor 中询问"你有哪些工具可以使用？"

第 3 章：D2C 调用链路详解

3.1 整体流程架构

sequenceDiagram
    participant User as 开发者
    participant AI as Cursor AI
    participant FigmaMCP as Figma MCP
    participant WotMCP as Wot-Design-Uni MCP
    participant Rules as 项目 Rules
    
    User->>AI: 提供 Figma 设计稿链接
    AI->>FigmaMCP: 调用 get_figma_data
    FigmaMCP-->>AI: 返回设计稿结构数据
    
    AI->>Rules: 读取 figma2App.md
    AI->>Rules: 读取 system.md
    
    AI->>WotMCP: 调用 list-components
    WotMCP-->>AI: 返回组件列表
    
    AI->>WotMCP: 调用 get-component-docs
    WotMCP-->>AI: 返回组件文档
    
    AI->>AI: 应用规则转换
    AI->>AI: 生成代码
    
    AI-->>User: 返回 uni-app 代码

3.2 设计稿分析阶段

3.2.1 调用 Figma MCP 获取设计稿数据

获取 Figma 文件信息：

从 Figma URL 中提取 fileKey：figma.com/file/{fileKey}/...
从 URL 参数中获取 nodeId：node-id={nodeId}

调用方法：

// AI 会自动调用
get_figma_data({
  fileKey: "abc123",
  nodeId: "1234:5678"
})

返回数据结构：

节点树（层级结构）
样式信息（颜色、尺寸、字体）
文本内容
图片资源引用

3.2.2 设计稿结构识别

AI 会自动识别：

状态栏：系统状态栏区域（跳过生成）
页面头部：导航栏、标题栏（提取配置信息）
内容区域：主要业务内容（生成代码目标）

3.3 AI 处理流程（5 个步骤）

步骤 1：调用 Figma MCP 分析设计稿结构

├── 识别状态栏（跳过生成）
├── 识别页面头部（提取配置）
└── 分析内容区域（生成代码）

步骤 2：应用项目规则

├── 读取 figma2App.md
│   ├── UnoCSS 优先使用规则
│   ├── px → rpx 转换规则（×2）
│   ├── 元素映射规则
│   └── 资源处理规则
│
└── 读取 system.md
    ├── 技术栈规范
    ├── 编码规范
    ├── 组件使用规范
    └── 样式规范

步骤 3：元素处理与转换

├── 尺寸转换
│   ├── 设计稿 375px → 代码 750rpx
│   └── 设计稿 20px → 代码 40rpx
│
├── 图片资源处理
│   ├── 下载到 `src/static/images/`
│   └── PNG 格式（2x 倍图）
│
└── 颜色处理
    ├── 纯色：优先使用 UnoCSS 原子类（`bg-white`、`text-primary`）
    └── 自定义颜色：使用 `bg-[#66af48]` 格式

步骤 4：元素映射与组件选择

├── 元素映射
│   ├── `div` → `view`
│   ├── `p`/`span` → `text`
│   ├── `img` → `image`
│   └── `button` → `wd-button`（优先使用 wot-design-uni 组件）
│
└── 组件库查询
    ├── 调用 `list-components` 查看可用组件
    ├── 调用 `get-component-docs` 获取组件 API
    └── 调用 `list-component-examples` 参考最佳实践

步骤 5：生成代码

├── 生成页面组件（index.vue）
│   ├── route 配置（页面标题、样式）
│   ├── script 部分
│   │   ├── 类型导入
│   │   ├── 组件和工具导入
│   │   ├── 响应式数据
│   │   └── 生命周期
│   └── template 部分
│       └── 优先使用 UnoCSS 原子类
│
└── 代码示例结构
    ├── <route lang="json5">（页面配置）
    ├── <script lang="ts" setup>（逻辑代码）
    └── <template>（模板代码）

第 4 章：实战案例

4.1 案例 1：简单列表页面

设计稿描述：

页面标题："我的订单"
列表项：订单卡片（包含商品图片、名称、价格）
底部按钮："查看全部"

生成步骤：

调用 Figma MCP：获取设计稿结构
应用规则：读取 figma2App.md，进行 px → rpx 转换
组件选择：使用 wd-cell-group 和 wd-cell 组件
生成代码：

<template>
  <view class="page">
    <!-- 页面标题 -->
    <view class="px-32rpx py-24rpx">
      <text class="text-36rpx font-bold">我的订单</text>
    </view>

    <!-- 订单列表 -->
    <wd-cell-group>
      <wd-cell
        v-for="order in orderList"
        :key="order.id"
        :title="order.name"
        :value="order.price"
        is-link
        @click="handleOrderClick(order)"
      />
    </wd-cell-group>

    <!-- 底部按钮 -->
    <view class="p-32rpx">
      <wd-button type="primary" @click="handleViewAll">
        查看全部
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface IOrder {
  id: string
  name: string
  price: string
}

const orderList = ref<IOrder[]>([
  { id: '1', name: '商品A', price: '¥99.00' },
  { id: '2', name: '商品B', price: '¥199.00' },
])

function handleOrderClick(order: IOrder) {
  uni.navigateTo({
    url: `/pages/order/detail?id=${order.id}`,
  })
}

function handleViewAll() {
  uni.navigateTo({
    url: '/pages/order/list',
  })
}
</script>

关键点：

✅ 使用 UnoCSS 原子类（px-32rpx、py-24rpx）
✅ 优先使用 wd-cell-group 组件
✅ 类型定义完整（IOrder 接口）

4.2 案例 2：复杂表单页面

设计稿描述：

表单包含：姓名、邮箱、手机号输入框
验证规则：必填、格式校验
提交按钮：带加载状态

生成步骤：

调用 Wot-Design-Uni MCP：
- get-component-docs 获取 Form 组件文档
- list-component-examples 查看表单示例
生成代码：

<template>
  <wd-form :model="formData" ref="formRef">
    <wd-form-item label="姓名" prop="name" :rules="nameRules">
      <wd-input
        v-model="formData.name"
        placeholder="请输入姓名"
        clearable
      />
    </wd-form-item>

    <wd-form-item label="邮箱" prop="email" :rules="emailRules">
      <wd-input
        v-model="formData.email"
        placeholder="请输入邮箱"
        clearable
      />
    </wd-form-item>

    <wd-form-item label="手机号" prop="phone" :rules="phoneRules">
      <wd-input
        v-model="formData.phone"
        placeholder="请输入手机号"
        clearable
      />
    </wd-form-item>

    <wd-form-item>
      <wd-button
        type="primary"
        :loading="loading"
        @click="handleSubmit"
      >
        提交
      </wd-button>
    </wd-form-item>
  </wd-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const formRef = ref(null)
const loading = ref(false)

const formData = reactive({
  name: '',
  email: '',
  phone: '',
})

const nameRules = [
  { required: true, message: '请输入姓名' },
]

const emailRules = [
  { required: true, message: '请输入邮箱' },
  { type: 'email', message: '请输入正确的邮箱格式' },
]

const phoneRules = [
  { required: true, message: '请输入手机号' },
  { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
]

function handleSubmit() {
  formRef.value?.validate((valid) => {
    if (valid) {
      loading.value = true
      // 执行提交逻辑
      setTimeout(() => {
        loading.value = false
        uni.showToast({ title: '提交成功', icon: 'success' })
      }, 1000)
    }
  })
}
</script>

关键点：

✅ 使用 wd-form 和 wd-form-item 组件
✅ 完整的验证规则配置
✅ 加载状态处理

4.3 案例 3：数据展示页面

设计稿描述：

数据表格：包含多列数据
分页功能：支持翻页
筛选功能：按条件筛选

关键点：

使用 wd-table 组件
分页逻辑处理
筛选条件管理

第 5 章：最佳实践与技巧

5.1 设计稿准备最佳实践

设计稿规范：

✅ 图层命名清晰（如：用户头像、标题文字）
✅ 组件化设计（复用组件）
✅ 标注完整（尺寸、颜色、字体）

资源准备：

✅ 图片导出规范（PNG 格式，2x 倍图）
✅ 图标使用规范（SVG 优先）

5.2 提示词优化技巧

明确需求：

✅ 好的提示词：
"根据这个 Figma 设计稿，使用 Wot-Design-Uni 组件库实现一个用户信息表单，
包含姓名、邮箱、手机号输入框，以及性别单选和提交按钮。优先使用 UnoCSS 原子类。"

❌ 不好的提示词：
"帮我做个表单"

分步请求：

复杂页面分步骤生成（先布局，再细节）
明确指定使用的组件库组件

5.3 代码生成后的优化

代码审查要点：

✅ 检查组件使用是否正确
✅ 检查样式还原度（对比设计稿）
✅ 检查类型定义是否完整

性能优化：

✅ 图片懒加载
✅ 组件按需引入

5.4 常见问题与解决方案

问题 1：生成的代码样式不准确

原因：

px → rpx 转换错误
UnoCSS 类名使用不当

解决：

检查 figma2App.md 中的转换规则
使用正确的 UnoCSS 类名（如 w-750rpx 而非 w-375px）

问题 2：组件 API 使用错误

原因：

未调用 MCP 工具获取最新文档

解决：

明确要求 AI 先查询组件文档：

"请先调用 get-component-docs 获取 Button 组件的文档，然后生成代码"

问题 3：图片资源路径错误

原因：

资源下载路径配置不正确

解决：

检查 figma2App.md 中的资源处理规则
确保图片保存到 src/static/images/ 目录

第 6 章：效果评估与优化

6.1 效果评估指标

指标	目标值	说明
代码可用性	99%	生成代码可直接使用的比例
样式还原度	95%+	与设计稿的视觉一致性
开发效率	提升 75%	相比传统开发的时间节省
代码质量	符合规范	符合项目规范的程度

6.2 持续优化建议

Rules 文件迭代：根据实际使用情况优化规则
MCP 工具扩展：添加更多组件库支持
提示词模板：建立常用场景的提示词模板
团队协作：建立团队知识库和最佳实践文档

第 7 章：总结与展望

7.1 核心价值总结

通过 D2C 实践，我们实现了：

✅ 提升开发效率 75%：从 1 小时/页面缩短到 15 分钟/页面
✅ 代码可用性从 60% 提升到 99%：生成的代码可直接使用
✅ 降低学习成本：AI 自动参考最佳实践，无需频繁查阅文档

7.2 技术亮点

MCP 协议：标准化工具接口，让 AI 主动获取上下文
结构化规则体系：figma2App.md + system.md 双规则体系
组件库知识增强：Wot-Design-Uni MCP 提供 82 个组件的完整文档

7.3 未来展望

支持更多设计工具（Sketch、Adobe XD）
支持更多组件库（Ant Design、Element Plus）
自动化测试和代码质量检查
可视化配置界面

附录

A. 快速参考

Figma MCP 常用命令：

get_figma_data：获取设计稿数据
download_figma_images：下载图片资源

Wot-Design-Uni MCP 工具：

list-components：列出所有组件
get-component-docs：获取组件文档
list-component-examples：获取组件示例

B. 常见问题 FAQ

Q: MCP 配置后无法使用？
A: 检查 Cursor 配置文件的格式，确保 MCP 服务器路径正确。

Q: 生成的代码样式不准确？
A: 检查 figma2App.md 中的 px → rpx 转换规则，确保使用正确的转换比例（×2）。

Q: 组件 API 使用错误？
A: 明确要求 AI 先调用 get-component-docs 获取最新文档。

C. 相关资源

让 D2C 成为你的开发加速器，让 AI 成为你的最佳搭档！

你在 D2C 实践中遇到过哪些问题？欢迎在评论区分享你的踩坑经验！