AI D2C(设计转代码)探索及使用体验

Screenshot-to-code 是在之前的文章中介绍过的一款 D2C 产品，如之前的文章所说，虽然它存在一定的局限性，但并不妨碍它在一些特定场景下能发挥出意想不到的作用。详细可以查看👉《虽然 V0 很强大，但是 ScreenshotToCode 依旧有市场》。

原理

没有细究过这个 Agent 的实现原理（再说细究了也不能发出来😄），只能猜测和 ScreenshotToCode 以及 Figma MCP 大差不差。

• 在 ScreenshotToCode 中需要多模态模型，这是因为需要 AI 去分析理解这些图片，然后再生成代码。整个流程是：图片输入 → LLM理解 → 直接输出代码。
• Figma MCP + CC（或者其他 AI 编辑器）可以将 Figma 设计图直接转为可用的 HTML/React/Vue/CSS 代码。先通过 MCP 将 Figma 设计稿转为结构化数据，再将数据交给 AI 进行代码转换。详见《D2C 的另一种选择—Figma MCP + Claude Code》。
• 还有一些早就存在的转换技术，这种并不需要借助 AI，比如 58 同城在 20 年 9 月开源的 Picasso。它的工作原理就是先解析 Sketch 设计文件，提取图层、样式、布局等信息，然后将其转换为内部DSL，并对其进行样式转换，包括单位转换（px→rem/rpx）、平台特定属性处理等，最后根据转换后的DSL生成对应平台的前端代码。Github 地址：https://github.com/wuba/Picasso

总结

从模式上来看，D2C 的方式有四种：

• 早期类似 Picasso 这种，通过底层算法将设计稿先转为 DSL，再将 DSL 转为前端代码（但它只服务于安卓）。即先将设计稿转为特定数据结构，再将其转为代码。
• 低代码平台其实也是 D2C 的一种，设计师或者产品可以通过托拉拽的方式进行一些页面设计，并导出对应代码。
• 再就是利用多模态模型理解和分析图片组成，再通过代码进行“复原”，例如 ScreenshotToCode。
• 最后一种可以说是第一种方式的改进版，设计稿被转化为特定数据结构之后，通过 AI 来读取和分析这些图层数据，然后输出成用户指定的代码。比如通过 Figma MCP + Claude Code 实现设计稿还原。

D2C 带来的收益是巨大的：

• 打破了传统开发中的协作壁垒和角色边界：
• 传统开发中，从设计稿到代码，需要人工校对，整个过程可能会出现一些细微偏差。D2C 通过 AI 加持，实现了像素级别的还原，减少了沟通成本和开发成本。
• 甚至说产品经理可以在原型设计阶段，就通过 D2C 技术生成一份基础代码，前端只需要进行一些“善后”工作。
• 成倍增长的开发效率：还原设计稿的时间被大大缩短，前端开发人员可以将更多的精力投入到业务逻辑和细节调整上
• 打破技术栈的僵化边界：可以指定它用 Vue、React、Angular、小程序等框架进行开发。

同时也带来一些挑战：

• 高效的同时，可能会伴随着人员的减少。毕竟平时两三个人一周的活，有了 D2C 以后一个人两三天就搞定了；
• 前端的边界被模糊，前端人需要在专业能力和业务能力上投入更大的精力，需要向上承接业务逻辑整合，向下深入性能优化，角色更偏向“前端架构师”；

当然这并不是说会取代前端工程师，而是将其从重复劳动中解放，更聚焦于：

• 复杂系统设计与架构
• 性能优化与用户体验深化
• 工程化与基础设施搭建
• 跨端整合与新技术探索
• 等等

AI 的迭代日新月异，不管是前端还是后端开发，都要紧跟步伐，这样才不会被技术更新所淘汰。