IT资讯 京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

rufus · 2022-01-27 17:00:13 · 热度: 63

Deco 是什么?

Deco 智能代码项目是我们团队在「前端智能化」方向上的探索,我们尝试从设计稿生成代码(Design To Code)这个切入点入手,对现有的设计到研发这一环节进行能力补全,进而提升产研效率。通过 Deco智能代码平台,可以实现将设计稿一键生成多端代码

在过去的一年里,Deco 已在京东的两次大促中成功落地,在个性化活动会场的搭建中,研发效率提升达到了 48%

京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

今天,Deco 对外发布了!

过去一段时间里,Deco 都是面对京东的内部场景,外部无法体验到 Deco,很多外部用户向我们表达了对 Deco 的诉求,我们也一直在小本本上记录每一位用户反馈的需求。

经过产品打磨,今天,我们终于对外发布了第一个 beta 版本!!!

亲爱的用户,请访问以下链接体验智能代码(deco-preview.jd.com/

京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

使用指南

安装插件

使用此插件适用范围 Mac ,目前仅支持 Sketch 工具,请确保安装 Deco 插件前,已经安装了 Sketch 工具

  1. 在官网首页,点击下载插件

    京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

  2. 双击安装插件

    京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

  3. 打开 Sketch 工具,在顶部 工具 栏 ⇒ 插件中出现“Deco”,表示安装成功,若没有,则完全退出 Sketch 后重新执行上述步骤,重新打开 Sketch 查看。

    京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

导出数据

  1. 打开插件。在展开菜单中,点击”导出数据“。

    京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

  2. 在 Sketch 选择设计稿画板,或某个图层后,需要点击一下插件面板,等待插件面板显示缩略图和画板名称后,点击“导出数据”。(若未登录,则会先进入到登录窗口,登录完毕后重新导出即可。)

    京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

  3. 等待上传,出现以下提示则表示上传成功

    点击按钮”到工作台粘贴数据“可以直接跳转到工作台中查看智能代码,点击”返回按钮“可以继续上传其他设计稿模块。

    京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

工作台查看

  1. 进入到个人的工作台。使用快捷键 ”control+v“ 粘贴原始数据到工作台。

    京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

  2. 等待加载完成后,即可查看结构及样式生成的页面

    京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

  3. 下载代码

点击右上角“下载代码”按钮,打开对话框。可以选择提供的代码框架,点击下载则可以获得对应框架的代码包。

京东 Deco 智能代码体验版正式上线,快来体验设计稿一键生成代码

更多文章

设计稿一键生成代码,研发智能化探索与实践

助力双 11 个性化会场高效交付:Deco 智能代码技术揭秘

超基础的机器学习入门-原理篇

猜你喜欢:
暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册