50 张设计稿，过去要搭两周，现在用 D2C 要多久？

设计师发过来一份 Figma 文件，50 张页面，上百个组件。

你深吸一口气，打开设计稿，开始了那套再熟悉不过的流程——看间距，手动填参数。看颜色，手动吸色值。看圆角，手动调数字。然后是切图、传图、调字号、对齐方式……重复再重复。

好不容易页面搭完了，设计走查一看："这个间距差了点""这个图标不对""这里在窄屏下会塌"——于是又打开编辑器，开始第二轮修修补补。

如果是专业前端，这个过程只是繁琐。但如果是非前端出身的开发者，光理解布局逻辑就得卡半天。

页面还原，是整个开发链路中确定性最高、重复度最高、但偏偏最耗时的环节。

而确定性最高的重复劳动，恰恰是最应该交给 AI 来干的事。D2C 可以解决这个问题。

D2C，全称 Design to Code，直译就是"从设计稿到代码"。

把设计稿丢进来，AI 自动识别里面的元素、布局、组件，直接生成一个可编辑的页面——不用手动搭，不用一个像素一个像素地还原。

它的工作原理并不是简单的"截图贴图"。D2C 面向设计文件等视觉输入，先将画面抽象为统一的结构化表示，再通过多阶段识别模型完成组件识别、布局还原与代码生成。换句话说，AI 不是在"抄"设计稿，而是在"读懂"它。

网易智企旗下的 CodeWave 智能开发 Agent ，将智能 D2C 作为原生能力直接集成，支持三大主流设计工具的文件输入：MasterGo、Figma、Sketch。开发者在平台内上传设计稿，生成页面，然后直接在编辑器里继续接逻辑、绑数据，一气呵成。 

右键或点击页面目录，选择“导入设计稿”，即可导入生成

"能转"不稀奇，关键是"转出来的东西能不能直接用"。智能 D2C 的两大核心能力，解决的就是这个问题。

能力一：布局智能还原——从绝对定位到弹性布局的自动跃迁

传统的设计稿转代码工具，最常见的问题是什么？

生成的页面全是绝对定位。设计稿上看着好好的，窗口一拉伸，布局全乱了——元素叠在一起，间距忽大忽小，完全不可用。

CodeWave 不走这条老路。智能 D2C 自动推断组件的嵌套关系和层级结构，并将设计稿中的绝对定位布局，自动转化为符合 Web 标准的 Flex 弹性布局。生成的页面天然具备响应式能力，不同屏幕尺寸下自动适配，不需要再手动调。

对非前端出身的开发者来说，这可能是最大的减负：不用纠结"该用什么布局方式"，AI 帮你选了，而且选得对。

自动推断组件的嵌套关系和层级结构

能力二：组件智能识别——一键识别组件并可自由替换

D2C 生成的页面里，按钮就是按钮，表格就是表格，下拉框就是下拉框——不是一堆"长得像组件的矩形色块"，而是真正的、可交互、可配置的平台组件。

系统自动会分析设计稿中的 UI 元素，判断其对应的组件类型，并推荐相似的 CodeWave 组件供开发者自行选择替换。

这意味着生成的页面拿过来就能继续开发：改属性、绑事件、接数据源，不需要先花半天把"假组件"替换成"真组件"。

不仅自动转换组件，还能智能推荐相似组件供选择

"组件识别"说起来简单，做起来很难。一个页面上可能同时存在基础表单、复杂图表、动态表格、自定义业务组件……长得像的不一定是同一个东西，长得不像的可能本质是同一类。

CodeWave 为此设计了四阶段递进式识别策略，层层过滤、逐级增强：

• 第一阶段：传统 CV 算法。进行边界检测和元素关系分析，清除干扰。

• 第二阶段：深度学习模型。针对图标、图表、动态表单等复杂组件，用深度学习做识别和匹配。

四重保障叠加，从"看形状"到"懂语义"逐级递进，确保识别结果既快又准。技术原理讲得再好，最终要看效果。以下是 CodeWave 智能 D2C 在Benchmark评估体系的实测数据：布局结构匹配率：92%；组件识别准确率：98%+。这些数据基于 CodeWave 内部标准化测试集的评估结果，覆盖了表单页、列表页、详情页、Dashboard 等多种典型 ToB 页面类型。

这意味着在大多数场景下，开发者将智能D2C 生成的页面拿过来稍作调整就能用，而不是"看着像但全要重做"。

说了这么多技术原理，不如直接看实操——整个过程其实只有简单 3 步：

Step 1：导入设计稿

登录 CodeWave 智能开发平台，进入页面 IDE，在页面结构树中找到想要插入页面的位置，点击右侧按钮选择"导入设计稿"。

直接上传 Figma、MasterGo 或 Sketch 导出的 zip 文件，导入时记得开启"智能识别"开关，AI 会自动识别设计稿中的组件，并匹配对应的 CodeWave 组件。针对 Photoshop（PS）工作流，CodeWave D2C 也提供专属转换路径，实现设计稿快速落地。

Step 2：确认组件映射

上传完成后，AI 会在几秒钟内完成识别，并展示它找到的所有组件。

每个识别到的元素，平台都会默认推荐一个最匹配的组件。如果觉得 AI 识别得不对，可以手动调整，选择”智能推荐”的其他候选，或者从平台全量组件库里自己挑。

Step 3：一键生成，开始开发

确认无误后，点击”替换”按钮，设计稿中的色块和线条，瞬间变成了真正可交互的平台组件；原来的绝对定位，自动转换成了弹性布局。一个完整的、可编辑的页面，就这样出现在你的编辑器里。

接下来，可以直接在这个页面上绑数据、接逻辑——之前要花大半天的页面搭建工作，现在几分钟就搞定了。

CodeWave 智能 D2C 有极其擅长的领域，在以下几类高频场景中，能帮你省掉大量重复劳动：

• 新项目大量页面搭建：项目启动初期，设计师一次性交付几十个页面。传统做法是开发一个个手动搭建，用 D2C 智能生成，把"建页面"的时间从天级压缩到小时级。

• 活动/营销页面临时赶工：运营突然要一个活动页面，设计师下班前才给设计稿，第二天就要上线。用 D2C 快速生成，快速出页面，剩下的时间绑数据、接逻辑。

• 非前端人员搭建页面：业务开发者、后端工程师、甚至产品经理需要在做页面时，D2C 可以跳过最难的布局和样式环节，直接从"可编辑的半成品"开始，大幅降低上手门槛。

页面还原这件事，过去靠的是耐心和经验。现在，CodeWave 智能 D2C 把这件事变成了"上传 → 生成 → 微调 → 继续开发"的标准化流程。

回到开头，50 张设计稿，过去要搭两周，现在用 CodeWave 智能 D2C 要多久？一张设计稿从上传到生成可用页面，平均只需要 10-20 秒，加上开发者确认布局、微调细节的时间，最终大约 2 分钟。50 张设计稿，按每张 2 分钟，不到两小时就能完成。从两周到两小时，从手搓，到智能化生产流水线，这是真正的研发生产力变革。

AI 不会替代开发者的判断力和创造力，但它会替你干掉那些不需要判断力和创造力的活儿。

找一张手边的设计稿，传进去，看看生成的结果是不是超出你的预期。

扫码即可免费体验 CodeWave 智能 D2C

👇👇👇