关于 Deco
Deco: 京东推出的设计稿一键生成多端前端代码平台
Deco（羚珑 Deco）是由京东零售技术团队自主研发的“AI 驱动型 Design-to-Code（设计稿一键生成代码）平台”。它旨在为前端工程师、UI 设计师及多端应用开发者提供从 Sketch / Figma 设计稿到生产级 React、Taro、Vue、微信小程序代码的自动化生成能力。Deco 结合深度视觉识别算法与结构化布局推演，将原本耗时数天的视觉稿打码过程压缩至几秒钟。
🎯 解决的核心痛点
在多端前端开发与大促视觉还原中，研发团队普遍面临以下痛点：
- 设计稿手动打码切图繁琐：还原 UI 设计稿中的 flex/grid 布局、绝对定位及边距样式需要耗费大量重复劳动。
- 多端代码重复编写：同一个视觉组件需要分别针对 H5、微信小程序、React Native 和 Taro 重新手写一遍。
- 常规 D2C 生成代码可读性差：传统设计转代码工具导出的样式层级臃肿，充斥着写死的绝对定位 (
absolute) 和魔数像素。 - 组件库识别与绑定脱节：生成的代码无法自动匹配团队现有的组件库（如 NutUI、Ant Design）规范。
💡 核心功能深度剖析
1. 智能 DOM 树布局推演算法 (Smart Flexbox Layout Engine)
自动分析设计稿中的图层嵌套关系，将绝对定位打平重构为语义化的标准 Flexbox 响应式布局。
2. 多端框架代码一键导出 (Multi-Framework D2C)
支持将设计图一键转化为 Taro（React/Vue）、微信小程序、H5 原生 CSS 以及 Tailwind CSS 响应式代码。
3. 京东 NutUI 与自定义组件库匹配 (Component Library Binding)
智能识别设计稿中的按钮、卡片、轮播图与弹窗，并自动替换为团队内部组件库（如 NutUI）的标准标签与 Props。
4. Figma & Sketch 设计插件无缝集成 (Figma & Sketch Plugin)
在 Figma 或 Sketch 中选择任意图层或 Page 容器，点击 Deco 插件面板即可在几秒内一键复制代码到 IDE 中。
🖥️ 界面实况与交互架构
Deco 工作台实况
下图展示了 Deco 在 Web 工作台中解析 Figma 设计稿、智能调整布局层级与生成多端代码的实况：
设计稿转代码与多端编译工作流
graph TD
A[Figma / Sketch 中选择设计稿图层容器] --> B[Deco AI 视觉算法识别图层语义与布局树]
B --> C[构建标准 Flexbox 响应式 DOM 结构]
C --> D[匹配 NutUI / AntD 团队规范组件库]
D --> E[一键导出 Taro / React / 小程序 / Vue 原生代码]
🛠️ 常用功能与指南
| 功能板块 | 界面位置 | 场景说明 |
|---|---|---|
| Figma 插件 | Figma 右侧插件栏 | 选中图层一键上传到 Deco 平台解析 |
| D2C 画布 | Deco 工作台 | 查看解析后的 Flex 布局树并调整组件映射 |
| Code Export | 右上角导出按钮 | 选择 Taro / React / 微信小程序框架一键导出代码 |
⚙️ 进阶使用技巧 (Pro Tips)
[!TIP] 利用“设计规范命名”实现 100% 组件精准映射 在 Figma 图层命名时使用
Button/Primary或Card/Product，Deco 算法会自动提取该语义并无缝替换为 NutUI 的<Button type="primary">组件！
❓ 常见问题解答 (FAQ)
Q: Deco 生成的代码是否可以直接用于生产环境？
A: 完全可以。生成的代码遵循标准语义化 HTML/CSS 与组件拆分规范，无需大规模手动二次重构。
Q: 是否支持免费使用？
A: 支持。京东 Deco 向广大开发者免费提供个人设计稿转代码服务。
