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,一经查实,立即删除!

相关文章

jQuery 五角星评分

五角星打分 我用的是搜狗输入法上带的特殊符号打出来的 空五角星&#xff1a;☆ 实五角星&#xff1a;★ 1.html 1 <ul class"comment"> 2 <li>☆</li> 3 <li>☆</li> 4 <li>☆</li> 5 …

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

平面设计和网页设计的规则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 新特性

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

代码备忘录

1.用指针&#xff0c;函数调用实现交换两个变量值 #include<stdio.h> int exchange(int *a,int *b){ int temp; temp*a; *a*b; *btemp;return 0;} int main(){ int i9,j2; int *p1,*p2; p1&i; p2&j; exchange(p1,p2); printf("p1%d,p2%d\n",*p1,*p2);…

mysql实战38 | 都说InnoDB好,那还要不要使用Memory引擎?

我在上一篇文章末尾留给你的问题是&#xff1a;两个 group by 语句都用了 order by null&#xff0c;为什么使用内存临时表得到的语句结果里&#xff0c;0 这个值在最后一行&#xff1b;而使用磁盘临时表得到的结果里&#xff0c;0 这个值在第一行&#xff1f;今天我们就来看看…

设计类的五个原则_内容设计的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 发布

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

让你沉迷的五种设计

让你沉迷的五种设计 好游戏总是能令人沉迷其中无法自拔&#xff0c;外媒cracked经过分析&#xff0c;发现有五种设计方法必不可少&#xff1b; 1.斯金纳箱原理&#xff1a;这是行为心理学派在实验室内研究动物学习能力的箱形实验装置&#xff0c;游戏开发也得益于此&#xff0c…

Java学习路线详解

有很多的[Java请添加链接描述](http://www.hfxms.com.cn/java/)程序员&#xff0c;在初期学习时&#xff0c;通常会对如何学习而感到迷茫。[合肥学码思请添加链接描述](http://www.hfxms.com.cn/)小编就为大家分析如何学好Java编程&#xff0c;相信能帮助那些正在处于迷茫状态的…

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…

换一种方式表达

http://player.youku.com/player.php/sid/XMjY2MTE5NDU2/v.swf 转载于:https://www.cnblogs.com/JCSU/archive/2012/03/17/2403324.html

新的一年,碎片化学习前端,我推荐这几个公众号~

大家好&#xff0c;我是若川。假期余额不足&#xff0c;无法充值。快乐的时光总是短暂的。马上又开始一年的学习和“奋斗”。前端技术日新月异&#xff0c;发展迅速&#xff0c;作为一个与时俱进的前端工程师&#xff0c;需要不断的学习。这里强烈推荐几个前端开发工程师必备的…

Java单元测试之JUnit4详解

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

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

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

ant 实现批量打包android应用

很多的应用中需要加上应用推广的统计&#xff0c;如果一个一个的去生成不同渠道包的应用&#xff0c;效率低不说&#xff0c;还有可能不小心弄错了分发渠道&#xff0c;使用ant可以批量生成应用。一、添加渠道包信息为了统计渠道信息&#xff0c;就不得不在程序的某个地方加入渠…

Element Plus 正式版发布啦!

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

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

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

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

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

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

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

博弈论入门 HDU 1850

Problem Description 一年在外 父母时刻牵挂春节回家 你能做几天好孩子吗寒假里尝试做做下面的事情吧陪妈妈逛一次菜场悄悄给爸爸买个小礼物主动地 强烈地 要求洗一次碗某一天早起 给爸妈用心地做回早餐如果愿意 你还可以和爸妈说咱们玩个小游戏吧 ACM课上学的呢&#xff5e;下…