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

Deco 是什么?—

Deco 智能代码项目是我们团队在「前端智能化」方向上的探索,其聚焦设计稿一键生成多端代码这一切入点,实现将 Sketch/Photoshop 等设计稿进行解析并直接生成多端代码(Taro/React/Vue)的能力。Deco 可以使前端工程师不需要花大量精力关注设计稿,大大节约了开发成本,为输出更多的多端页面提供了有力的支持,也为业务降本增效带来了巨大动力。

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

3df0c192a1e36b7de0d2f67e27d3039f.png

今天,Deco 外部体验版正式发布了!—

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

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

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

55d451e381f455a22aca621a5b52732e.png

保姆级使用指南—

安装插件

目前 Deco 外部版本仅支持 Sketch 工具,请确保安装 Deco 插件前,已经安装了 Sketch 工具。

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

    ab016edcf915464122a458805ce36d6c.png
  2. 双击安装插件

    271180ad26ac36579171847607cc24b0.png
  3. 打开 Sketch 工具,检查插件安装情况

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

    bc768af007a6a8e922b8539f0737dc41.png

导出数据

  1. 打开插件

    在展开菜单中,点击「导出数据」。

    7a3863356f2bda96a8a98f1782c5a20a.png
  2. 选择设计稿画板或图层

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

    5e521a0470430b3ec4302318b953fbf0.png
  3. 等待数据成功导出

    数据成功导出后,点击按钮「到工作台粘贴数据」就可以直接跳转到工作台中查看智能还原的布局和代码,点击「返回按钮」可以继续上传其他设计稿模块。

    c8afeb87376e461986beb5f05be78091.png

工作台查看

  1. 进入到个人的工作台,使用快捷键 「Control+V」粘贴原始数据到工作台

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

    b3f38c3d830c679d5c66ace7c46f5931.png
  3. 下载代码

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

37bacd112534cb13c7f5cbf4411482f0.png

未来计划

由于时间比较紧张,很多功能还来不及对外发布,不过大家不用担心,更多更强大的功能正在路上!我们将逐步开放 Deco 内部版本的功能,让 Deco 可以成为业界开发者的好帮手。

组件识别及自动替换

在实现生成静态代码之后,我们基于 AI 算法,实现了对页面中的已有组件进行识别、定位,并高效映射为组件库中的组件,最终解放开发人员的双手。

1ec15a1a5579419d1498980e89dce7a4.png

覆盖更多的研发场景

我们还针对研发全流程定制了一个低代码平台,功能覆盖属性编辑、事件定义、数据绑定、异步数据请求等等功能,覆盖研发的核心流程,可以实现页面的一站式开发,降低开发门槛,提升开发效率。

203904d280413a490da62a079d3fe3fc.png

更多—

过往我们编写了很多相关的技术文章,收到了很多反响,大家可以通过这些文章了解到智能代码背后的技术实现。

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

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

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

相关链接

[1]

deco-preview.jd.com/: https://deco-preview.jd.com/

[2]

设计稿一键生成代码,研发智能化探索与实践: https://jelly.jd.com/article/61a6eb9f2a070818620bac2e

6f7a155ffe8c73df3a21e230e356c087.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动,帮助3000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

cd6e841cd43f5d34938e08f34327c648.png

识别方二维码加我微信、拉你进源码共读

今日话题

略。分享、收藏、点赞、在看我的文章就是对我最大的支持~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

平面设计和网页设计的规则_从平面设计到用户界面:这是您应该知道的最重要的规则

平面设计和网页设计的规则Maybe you’re here because you think UI Design is the future of Graphic Design. Maybe what motivates you is the money. Or maybe you just woke up one day and someone at work told you “So, you are a designer, right? Well, we need an…

即将到来的 ECMAScript 2022 新特性

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。ECMAScript 规范每…

设计类的五个原则_内容设计的5个原则

设计类的五个原则重点 (Top highlight)There are many heuristics and principles for creating good content. Some are created from a UX perspective, others from a content marketing point of view. They range from very long to very concise ones. I reviewed a larg…

Umi 4 RC 发布

大家好,我是若川。感谢大家一年以来的支持和陪伴。这一年疫情反复,年底应该有由于疫情不能回家的小伙伴。在这里先祝福大家,新年快乐。本打算今天不发文,但看到这篇觉得不错,就发一下。大家好,Umi 4 经过几…

figma下载_在Figma中将约束与布局网格一起使用

figma下载While doing research for the book “Designing in Figma”, I discovered a powerful way to lay out objects using a combination of Layout Grid and Constraints. The interface of Figma does not indicate a connection between the two, so it can be discov…

Java单元测试之JUnit4详解

2019独角兽企业重金招聘Python工程师标准>>> Java单元测试之JUnit4详解 与JUnit3不同,JUnit4通过注解的方式来识别测试方法。目前支持的主要注解有: BeforeClass 全局只会执行一次,而且是第一个运行Before 在测试方法运行之前运行…

我在黑暗中看到你眼中的月光_你好黑暗,我的老朋友

我在黑暗中看到你眼中的月光(Originally published on https://web.dev/prefers-color-scheme/.)(最初发布于https://web.dev/prefers-color-scheme/ 。) 介绍 (Introduction) 📚 I have done a lot of background research on the history and theory of dark mod…

Element Plus 正式版发布啦!

大家好,我是若川。祝大家新年快乐,开工大吉。公众号回复「红包」可以领取源码共读红包封面。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时…

大型网站技术架构(一)大型网站架构演化

2019独角兽企业重金招聘Python工程师标准>>> 看完了有一本书,就应该有所收获,有所总结,最近把《大型网站技术架构》一书给看完了,给人的印象实在深刻,再加上之前也搞过书本上讲的反向代理和负载均衡以及ses…

永不示弱_永不过时的网页设计:今天和2000年的在线投资组合

永不示弱重点 (Top highlight)Philippe Starck, a renowned industrial designer, once said:著名的工业设计师Philippe Starck曾经说过: “A designer has a duty to create timeless design. To be timeless you have to think really far into the future, not …

如何使用 React 创建一个作品集网站

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。今天,你…

新的一年,如何高效学习前端前沿知识~

今天强烈推荐一些互联网行业内优质技术公众号,互联网人大部分都关注了,包括目前主流的公司技术团队号,技术社区号,个人技术号,这些号行业深耕已久,会给你带来事半功倍的效果。公众号那么多,文章…

RabbitMQ学习总结(7)——Spring整合RabbitMQ实例

2019独角兽企业重金招聘Python工程师标准>>> 1.RabbitMQ简介 RabbitMQ是流行的开源消息队列系统,用erlang语言开发。RabbitMQ是AMQP(高级消息队列协议)的标准实现。 官网:http://www.rabbitmq.com/ 2.Spring集成Rabbi…

谈谈对java中分层的理解_让我们谈谈网页设计中的卡片设计

谈谈对java中分层的理解“I want a card”, this is the first demand point that the customer said in the last issue when talking to me about demand. There is no doubt that the card type is excellent for both PC and mobile phones. From online shopping malls to…

1-jdk的安装与配置

1- Jvm、jdk、jre之间的关系 JVM:Java虚拟机,保证java程序跨平台。(Java Virtual Machine)JRE: Java运行环境,包含JVM和核心类库。如果只是想运行java程序,只要安装JRE即可。(Java R…

来自未来,2022 年的前端人都在做什么?

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。来自上帝视角的总览…

qt ui指针和本类对象_您需要了解的有关UI设计的形状和对象的所有信息

qt ui指针和本类对象重点 (Top highlight)第1部分 (Part 1) So you’re thinking about becoming a UX/UI designer, but are afraid to start? Don’t worry. It’s easier than you think. You only need a solid foundation and a lot of dedication. I can’t help you wi…

2021 大前端技术回顾及未来展望

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列2021 …

skysat重访周期_重访小恶梦

skysat重访周期You awaken with a start, the nightmare still fogging your mind with terror. Rain falls through cracks in the ceiling above you. The room is sparse, metallic, desolate. Searching the pockets of your yellow raincoat, you find only a cigarette l…

记一次 Vue2 迁移 Vue3 的实践总结

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列一、V…