功能介绍
评论列表
Deco是京东团队在"前端智能化"方向的重要探索，专注于通过人工智能技术打通设计与开发之间的壁垒。该工具的核心能力是将Sketch、Photoshop等设计稿或图片文件自动解析并生成高质量的多端代码，支持Taro、React、Vue、HTML等多种主流前端框架。Deco通过结合规则系统、计算机视觉、智能布局算法和深度学习技术，不仅能够实现视觉稿的高精度还原，还能输出具有语义化类名和组件化结构的可维护代码。目前该工具已在京东内部大规模应用，尤其在电商大促场景中显著提升研发效率。

3. 官网入口地址

4. 下载地址

  • Deco目前主要通过Sketch插件形式使用，用户可在官网首页下载插件

5. 功能介绍

Deco的技术架构包含四个核心层次：组件识别层、图层处理层、布局算法层和语义化层。组件识别层利用深度学习目标检测算法，通过超过2万样本的数据集训练，能够识别设计稿中的业务组件、基础组件和页面区块。图层处理层通过Sketch插件解析设计稿原始信息，进行符号解耦、图层合并、蒙层处理等操作，输出结构化的D2C Schema数据。
布局算法层是Deco的核心技术创新，它将绝对定位的图层元素转换为具有良好层级结构的布局。通过空间布局算法、投影布局算法、特征检测算法等，系统能够自动推导出合理的Flexbox布局或绝对定位方案。语义化层则采用正向推理引擎，结合NLP文本分析和图像识别技术，为元素节点生成具有语义化的类名，如自动识别商品图片并赋予"goods_pic"类名。
Deco还提供AI开放平台，允许业务团队自定义训练组件识别模型，以及可视化编辑器支持组件标记、数据绑定、事件绑定等高级功能，使生成的代码具备交互逻辑。

6. 应用场景

Deco主要适用于以下场景：电商大促页面开发，京东双11个性化会场研发中应用Deco覆盖90%的楼层模块，效率提升48%；UI设计师与前端开发协作，减少设计稿还原的重复工作；创业团队快速原型开发和产品迭代；多端统一开发需求，支持一次生成跨平台代码。

7. 定价和示例

定价策略：目前息中未明确提及Deco的具体定价模式，外部用户可访问体验版进行试用。
应用示例：对于电商商品页设计稿，Deco能够自动识别商品图片、价格文本等元素，通过布局算法生成栅格化结构，并为各元素添加语义化类名，最终输出组件化的React或Vue代码。

Deco常见问题

本文标签
Void

Void是一款基于VS Code的开源AI代码编辑器，深度集成AI编程助手功能，支持多种大模型并确保用户数据隐私。
marscode AI编程助手

MarsCode是字节跳动推出的免费AI编程助手，提供智能代码补全和云端开发环境。
ChatBot

ChatBot是一款面向企业的全渠道AI聊天机器人平台，通过可视化拖拽式构建器和预置行业模板，帮助企业快速部署24小时在线客服，实现客户服务自动化、线索获取和业务转化提升。
Fitten Code

Fitten Code是一款由北京非十科技有限公司开发的AI编程助手，基于自研代码大模型和国产深度学习框架计图（Jittor）打造。