摘要：
... 做前端的应该都经历过这种场景：设计师丢过来一个Sketch文件，页面漂亮得不行。你对着设计稿吭哧吭哧写HTML、调CSS，好不容易把布局还原了，设计师说“这个间距调一下，那个颜色改一下”——你又得从头改一遍。一个大促页面，光是把设计稿变成能跑的代码，就能耗掉一整天。
今天聊的京东灵犀DECO（ling-deco.jd.com），就是专门解决“设计稿变代码太慢”这个问题的。它是京东官方推出的AI智能设计稿转代码工具——你把Sketch或PS设计稿丢进去，它直接给你生成Taro、React、Vue、HTML等多端代码。
这玩意儿已经在京东内部跑了好几年了。618、双11这些S级大促的个性化会场，90%左右的楼层模块都是用Deco生成的，研发效率提升了48%。2023年底，Deco正式对外发布了beta版本。
下面不整虚的，用一个“拿到设计稿到生成可跑代码”的真实场景，把Deco从头到尾跑一遍。
一、先搞明白：Deco跟普通设计稿转代码工具有啥不一样？
市面上设计稿转代码的工具不少，但Deco跟它们有两个本质区别：
第一，它生成的不是“一次性代码”，是“可维护代码”。 很多D2C工具生成的代码，DOM嵌套乱七八糟，class命名是div_1_2_3这种鬼东西，根本没法维护。Deco通过工程化处理，构建合理的DOM布局嵌套和弹性布局结构，实现页面自适应。生成的代码符合企业规范，可以直接提交到代码仓库。
第二，它能识别组件。 设计稿里那些按钮、轮播图、Tab切换——Deco用AI算法精准定位组件位置、识别组件类型、自动替换成组件库代码。你不用手动去把设计稿里的“看起来像按钮的东西”替换成项目里的Button组件，AI帮你干了。
它背后怎么工作的？ 核心分两步：第一步，通过Sketch插件从设计稿里提取一份叫D2C Schema的结构化数据；第二步，结合规则系统、计算机视觉、智能布局、深度学习等技术，把这份数据转换成布局合理、语义化的代码。最后再通过DSL解析器，生成你想要的框架代码。
二、实战：把一张活动页设计稿，变成可跑的React代码
假设你现在接到一个双11活动页的需求，设计师给了你一个Sketch文件。按传统方式：打开Sketch看设计稿→切图→写HTML→写CSS→调样式→联调→改bug。一套下来，少说两天。
用Deco，半小时能拿到一版能跑的代码。
第一步：装插件——目前只支持Sketch
Deco目前是一个Sketch插件，不是独立App。你得先确认电脑上装了Sketch，然后在Deco官网首页点击下载插件。双击安装后，打开Sketch，顶部工具栏的“插件”菜单里出现“Deco”就表示装好了。
有个坑提前说：目前只支持Mac系统，因为Sketch本来就只有Mac版。Windows用户暂时用不了。不过官方后续有计划支持更多工具。
第二步：导出数据——把设计稿“喂”给AI
在Sketch里打开设计稿，选中你要生成代码的画板或某个图层。然后点击顶部菜单的“插件”→“Deco”→“导出数据”。
这时候会弹出一个面板，等它显示缩略图和画板名称后，点击“导出数据”。如果没登录会先跳到登录页，登录完重新导一遍就行。
上传成功后，会看到“到工作台粘贴数据”的按钮。点一下，直接跳到Deco的工作台。
第三步：工作台查看——AI生成的代码长啥样
进入工作台后，按Ctrl+V（Mac是Command+V） 粘贴刚才导出的数据。等待加载完成，你会看到两样东西：
左侧：设计稿的预览图
右侧：AI生成的结构化的HTML/CSS代码
这时候你可以检查一下布局对不对、样式准不准。Deco生成的代码还原度能保持在90%以上。如果发现有偏差，可以返回Sketch调整设计稿重新导，也可以在生成后手动微调。
第四步：下载代码——选你想要的框架
确认没问题后，点击右上角的“下载代码”。弹窗里会让你选代码框架：
Taro：京东自研的多端统一开发框架，适合做小程序/H5
React：适合Web应用
Vue：适合Web应用
HTML：纯静态页面
选好框架，点击下载，就能拿到一个完整的代码包。里面包含布局合理的DOM结构、语义化的className、响应式样式。直接拖进你的项目里就能跑。
整个流程走下来，从打开Sketch到下载代码包，半小时以内。对比传统方式两天的工作量，效率提升是数量级的。
三、进阶玩法：组件识别与自动替换
上面说的是基础流程。Deco还有一个更高级的能力——组件识别与自动替换。
什么意思呢？假设你的项目里用了某个UI组件库（比如Ant Design、NutUI）。设计稿里有一个“看起来像按钮”的元素，Deco的AI算法会自动识别出这是个按钮组件，然后在生成的代码里直接引入你项目里的Button组件，而不是生成一个普通的<div>。
你不用手动去改import、不用手动替换标签。AI帮你干了。
怎么配置？ 需要先把组件库设置到Deco中，然后选中设计稿的某个区域，点选对应的组件，就能完成映射。配置一次，后面每次生成都会自动识别和替换。
四、说点实在的：优点和槽点
优点很明确：
第一，效率提升看得见。京东内部实测数据是48%的研发效率提升。有业务线技术负责人说“使用Deco后，前端开发效率提升了300%，项目交付周期缩短50%”。
第二，生成代码质量高。不是那种“一次性”的烂代码，而是符合工程规范、可维护的代码。DOM布局合理，class命名语义化。
第三，多端支持。一套设计稿，生成Taro、React、Vue、HTML多种框架的代码。做多端适配的时候特别省事。
第四，京东大促验证过。双11、618这种亿级流量的场景都扛住了，稳定性有保障。
槽点也得说：
第一，目前只支持Sketch。Figma用户暂时用不了。官方说后续会支持更多工具，但目前确实是个限制。
第二，只支持Mac。因为Sketch只有Mac版。Windows用户想用的话，得先搞一台Mac。
第三，生成的是“静态骨架”。Deco目前主要解决的是UI还原的问题——也就是HTML+CSS这部分。交互逻辑、数据绑定、事件处理这些“动态”的部分，还是需要开发者自己补充。它解决的是“从0到80%”的问题，剩下20%的精修还得自己来。
第四，设计稿质量影响生成效果。如果设计稿图层杂乱、命名随意、没有遵循设计规范，AI生成的效果会打折扣。设计稿越规范，生成的代码质量越高。
五、到底适合谁用？
捋一下：
前端开发：日常工作就是“把设计稿变成代码”的，Deco能帮你省掉大量重复劳动
全栈/后端开发：不擅长写CSS和调布局的，让AI帮你搞定UI部分
创业团队/小团队：没有专门的前端资源，设计师自己就能用Deco生成可用的页面
产品经理/运营：快速出原型、做活动页，不用等开发排期
任何需要“把设计稿变成能跑的页面”的人
不太适合谁？如果你做的页面交互极其复杂、有大量动态逻辑和数据处理，Deco目前只能帮你搞定UI部分，业务逻辑还得自己写。另外，如果你用的是Figma而不是Sketch，目前也用不了。
有空去ling-deco.jd.com看看，装个插件试试。下次再被设计稿折磨的时候，别自己从零写HTML了——让AI先把骨架搭好，你只负责填逻辑，效率能翻好几倍。