Ling-Deco（https://ling-deco.jd.com/）是京东推出的智能代码生成工具平台，名为 Deco（Design To Code 的缩写），专注于将设计稿（如 Sketch 或 Photoshop 文件）一键转换为多端前端代码。它属于京东羚珑（Linglong）智能设计平台的一部分，该平台旨在通过 AI 和自动化技术提升设计与开发的效率，服务于泛零售领域的设计与研发需求。Deco 通过解析设计稿原始信息，结合计算机视觉、深度学习等技术，生成高质量、可维护的代码，已在京东大促（如 618 和双 11）中实际应用，提升研发效率高达 48%。截至 2025 年 9 月 15 日，该工具已对外发布 beta 版本，适用于前端智能化探索，帮助用户从设计快速转向代码实现。 网站界面简洁，焦点在于插件下载、数据导出和工作台操作，支持多框架输出。
1. 主要目的
Deco 的核心目标是实现“设计稿到代码”的自动化转换，解决传统前端开发中手动编码设计稿的痛点。通过 AI 算法提取设计稿的结构化数据（D2C Schema），生成多端代码（如 Web 和移动端），从而降低开发成本、提升效率。它适用于个性化页面搭建场景，如电商活动页、营销 banner 等，帮助设计师和开发者快速迭代产品。平台强调工程化处理，确保生成的代码具有高可用性和自适应性，已在京东内部验证，并对外开放以推动行业智能化发展。
2. 主要功能
Deco 提供了从设计稿解析到代码生成的端到端功能，以下是主要功能列表（使用列表形式，便于阅读）：
- 设计稿解析与数据导出：
- 支持从 Sketch 或 Photoshop 设计稿中提取结构化数据，包括布局、组件和样式。
- 通过插件一键导出数据，支持选择特定画板或图层进行解析。
- AI 代码生成：
- 自动生成多端代码，支持 Taro（小程序框架）、React、Vue 和 HTML 等框架。
- 使用计算机视觉和深度学习算法识别组件，并映射到组件库，实现自动替换和优化。
- 工作台预览与编辑：
- 在个人工作台中查看生成的页面布局、结构和样式，支持实时预览。
- 集成低代码平台，允许编辑属性、定义事件、绑定数据和处理异步请求。
- 代码下载与集成：
- 一键下载代码包，支持选择框架并导出完整工程文件。
- 生成的代码具有合理的 DOM 嵌套和弹性布局，确保页面自适应和高性能。
- 组件识别与优化：
- AI 算法自动识别页面组件，并与预设组件库匹配，提高代码的可维护性。
- 支持工程化处理，如 bug 修复和性能优化。
这些功能覆盖了从设计到开发的完整链路，强调智能化和自动化。
3. 特点
- AI 驱动的技术栈：结合规则系统、计算机视觉、智能布局和深度学习，确保代码生成准确率高（组件识别准确性强）。
- 高效与可维护：生成的代码干净、语义化，支持高负载场景，如京东大促活动页；自适应布局适应不同设备。
- 插件集成：提供 Sketch 插件（未来可能扩展 Photoshop），简化导出流程；工作台支持快捷键操作（如 Ctrl+V 粘贴数据）。
- 低代码扩展：集成低代码平台，覆盖开发全生命周期，降低编程门槛。
- 局限性：主要针对前端代码生成，不涉及后端逻辑；复杂设计可能需手动优化。
- 可靠认可：已在京东内部大促中使用，效率提升 48%；beta 版对外开放，鼓励用户反馈改进。
4. 用户群体
Deco 主要针对以下群体：
- 前端开发者：需要快速从设计稿生成代码的程序员，尤其在电商或营销页面开发中。
- UI/UX 设计师：希望将设计稿直接转化为可执行代码的设计师，桥接设计与开发。
- 产品团队与初创企业：预算有限、追求高效迭代的团队，如电商平台活动页构建者。
- 企业内部研发：如京东等大型零售企业的技术团队，用于大促个性化模块搭建。
总体上，它适合前端智能化探索者，尤其在泛零售领域受欢迎。
5. 如何使用
使用 Deco 非常直观，步骤如下（基于 Sketch 插件示例）：
- 安装插件：访问 https://ling-deco.jd.com/ 下载 Deco 插件，双击安装到 Sketch 中；在 Sketch 插件菜单验证安装成功。
- 导出设计数据：在 Sketch 中打开插件面板，选择设计稿画板或图层，点击“导出数据”，等待解析完成（若需登录，输入京东账户）。
- 工作台操作：复制导出的数据，访问个人工作台（可能为 https://deco-preview.jd.com/），使用 Ctrl+V 粘贴，等待加载查看布局和代码预览。
- 下载代码：在工作台点击“下载代码”，选择框架（如 React），下载完整代码包。
- 优化与集成：使用低代码平台编辑事件或数据绑定，然后集成到项目中。
无需复杂配置，直接浏览器操作；Photoshop 支持类似，但细节以网站更新为准。
总结
Ling-Deco.jd.com 是京东 Deco 工具的官方网站，一个 AI 驱动的设计稿到代码转换平台，帮助用户高效生成多端前端代码，支持 Sketch/Photoshop 输入和 React/Vue 等输出。其主要功能包括解析导出、AI 生成、工作台预览和代码下载，适用于设计师和开发者加速电商页面开发。通过智能化技术，它显著提升效率，已在实际场景中证明价值。如果您是前端从业者，这是一个值得试用的免费 beta 工具，能桥接设计与编码的鸿沟。
