Deco 是一款将设计稿智能解析并自动生成多端代码的开发辅助平台，帮助团队打通「设计-开发」链路，减少重复劳动，缩短项目交付周期。

产品详细介绍

Deco 聚焦于“设计稿一键生成多端代码”这一核心能力，通过智能解析设计稿结构、样式与组件信息，自动输出可落地的前端代码，适用于 Web、小程序、App 等多端场景。

核心特点

  1. 多端代码生成

    • 支持从同一份设计稿生成多端代码（如 Web 端、小程序端等）。
    • 通过配置不同端的代码规范与组件库，实现一稿多用。

  2. 智能解析设计稿

    • 自动识别页面布局、组件层级、文本与图片等元素。
    • 根据设计规范生成对应的样式代码，减少手写 CSS/样式的工作量。

  3. 组件化输出

    • 将设计稿中的重复区域抽象为组件，输出可复用的组件代码。
    • 支持与现有组件库对接，便于在项目中直接引用。

  4. 规范统一与质量保障

    • 可预设团队统一的代码规范（命名规则、目录结构、样式规范等）。
    • 自动生成的代码结构清晰、可读性强，便于后续维护与二次开发。

  5. 协作效率提升

    • 设计师输出设计稿后即可快速生成代码初版，前端在此基础上做逻辑与数据对接。
    • 减少反复对稿、口头沟通和手工还原设计的时间成本。

典型使用场景

  • 新项目从 0 到 1 搭建页面骨架。
  • 设计频繁迭代时，快速同步最新视觉到代码层。
  • 中后台管理系统、大促活动页、营销落地页等页面数量多、更新快的场景。
  • 设计团队与前端团队协作紧密、追求高效交付的企业与团队。

简单使用教程

一、准备阶段

  1. 整理设计稿

    • 使用主流设计工具（如 Figma、Sketch、XD、PS 等）完成页面设计。
    • 确保图层命名清晰、组件结构合理，减少后续解析误差。

  2. 确认代码规范

    • 与前端团队确认目标端（Web、小程序等）、技术栈（如 React、Vue 等）。
    • 约定基础样式规范、组件库使用方式和目录结构。

二、上传与解析

  1. 访问 Deco 平台

    • 打开浏览器，访问链接：https://ling-deco.jd.com。
    • 登录或按平台指引完成账号使用。

  2. 导入设计稿

    • 在平台中选择“导入设计稿”或类似入口。
    • 按指引上传设计文件，或通过插件/链接方式与设计工具打通（如平台支持）。

  3. 自动解析

    • 提交后，Deco 会自动解析页面结构、组件与样式。
    • 在解析结果预览中检查布局、组件拆分是否符合预期。

三、配置生成规则

  1. 选择目标端与技术栈

    • 选择需要生成的端类型（如 Web、小程序等）。
    • 选择对应技术栈（如 React、Vue 等）及项目模板。

  2. 设置样式与组件策略

    • 配置样式方案（如 CSS、Less、Sass、CSS-in-JS 等）。
    • 选择是否启用组件自动抽取、是否对接已有组件库。

  3. 应用团队规范

    • 选择或导入团队预设的代码规范配置。
    • 确认命名规则、文件结构、lint 规则等。

四、一键生成与下载代码

  1. 生成代码

    • 在配置完成后点击“一键生成代码”或类似按钮。
    • 等待平台完成代码生成，并在预览中查看页面效果。

  2. 下载或同步到项目

    • 将生成的代码打包下载到本地。
    • 或按平台支持方式，直接同步到代码仓库/项目模板中。

  3. 本地运行与联调

    • 在本地项目中安装依赖并启动开发环境。
    • 前端工程师在生成代码基础上补充业务逻辑、接口调用与状态管理。

五、迭代与更新

  1. 设计变更同步

    • 设计更新后重新导入设计稿。
    • 使用 Deco 快速生成更新后的代码版本，对比差异并合并到现有项目。

  2. 持续优化规范

    • 根据团队反馈不断优化代码生成规则和组件策略。
    • 逐步沉淀适合团队的最佳实践配置。

FAQ 常见问题

Q1：Deco 支持哪些设计工具？
A：Deco 主要面向主流设计工具的输出文件（如 Figma、Sketch、XD、PS 等）。具体支持范围和接入方式以平台实际说明为准，可在官网或帮助中心查看最新支持列表。

Q2：生成的代码是否可以直接上线？
A：Deco 生成的是高质量页面结构与样式代码，通常还需要前端工程师补充业务逻辑、接口对接和状态管理。对于简单静态页面，可在少量调整后直接上线；对于复杂业务系统，建议作为基础骨架使用。

Q3：多端代码是如何实现的？
A：Deco 会根据不同端的技术栈和组件规范，针对同一份设计稿生成对应端的代码版本。通过配置不同端的输出规则，实现一稿多端复用，减少重复开发。

Q4：团队已有组件库还能用 Deco 吗？
A：可以。Deco 支持将设计稿中的区域映射到既有组件库，通过配置组件映射规则，让生成代码直接引用团队已有组件，从而保持风格统一并减少重复造轮子。

Q5：生成的代码是否易于维护？
A：Deco 在设计之初就考虑了可读性与可维护性问题。通过统一的命名规范、清晰的目录结构和组件化输出，生成的代码便于团队成员理解和二次开发。团队也可以根据自身规范对生成规则进行定制和优化。