D2C：从设计稿到页面代码，AI 如何打通设计到开发

一、D2C 是什么？

D2C 可以简单理解为：

Design to Code

也就是：

Design
  ↓
AI
  ↓
Code

但真正成熟的 D2C 不应该只是：

截图 → HTML。

真正有价值的是：

Figma
 ↓
读取设计系统
 ↓
识别组件
 ↓
映射已有组件
 ↓
生成代码
 ↓
运行项目
 ↓
浏览器验证
 ↓
视觉 Diff
 ↓
修改

二、为什么截图转代码还不够？

假设设计稿里面有一个 Button。

AI 如果不知道你的项目，很可能直接生成：

<button class="...">
  提交
</button>

但是你的项目其实已经有：

<AppButton />

于是 AI 重新造了一个。

这就是：

AI 能写代码，但不了解你的代码库。

三、理想的 D2C

Figma
 ↓
Design Token
 ↓
Design System
 ↓
Component Mapping
 ↓
AI Agent
 ↓
Vue
 ↓
Browser
 ↓
Visual QA

这时候 AI 不再是：

“帮我把图片变成代码。”

而是：

**“根据设计系统，在现有项目中实现这个页面。”