写点什么

手把手教你 D2C,走向前端智能化

2019 年 12 月 23 日

手把手教你D2C,走向前端智能化


这几年来 AI 来势汹汹,在部分领域应用也逐渐成熟。前端发展至今,我们也有许多成熟的前端解决方案代码,有大量的设计稿,我们是否能够结合智能化的能力将一个 Design 变成一个 Code (设计转代码,简称 D2C)来提效,让前端从一个资源型的角色中解放出来将精力投入到前端其他专业领域?淘宝 D2C 智能团队这两年围绕这个方向也做了许多的探索,最终将 D2C 的能力都承载到了 imgcook 这个产品上。


imgcook 是什么

imgcook 是专注以各种图像(Sketch/PSD/静态图片)为原材料烹饪的匠心大厨,通过智能化手段将各种图像一键生成可维护的 UI 视图代码,期望此 imgcook (图像大厨) 未来能够成为一位 P5 级别的重构工程师,能切实提高开发的开发效率,并助力开发、设计师、测试的高效协作,我们期望做到:


  • 100% 还原【设计师再也不用还原走查了】

  • 100% 兼容【测试再也不用适配样式了】

  • 一键上线【开发再也不用切图写样式了】


愿景:能够高度还原各种图像,释放 UI 开发生产力,让你关注更具挑战性的事情!



为什么要做 imgcook ?

对于 UI 还原而言,早在很多年前,类似的从设计稿中还原生成静态 UI 场景的解决方案也都涌现过,比如一些设计稿标注工具(如 Marketch),又或者说目前的一些可视化建站平台也都能够在搭建完后直接产出线上页面,那么 imgcook 的优势体现在哪?


我们回到 UI 还原主题上,当我们说图像生成代码的时候,我们关心的不仅仅是生成 UI 的还原度,也关心生成的代码是否合理、可维护,如果生成的代码属于不可读不可维护的快餐代码,开发使用上再对其进行二次开发就会显得极为艰难,而往往后者的难度相比前者更甚,如果需要在生产环境中使用,这个问题就无法避免。


对此,imgcook 的定位就在于解决 UI 还原以及生成可维护代码的问题。


▐ 设计稿无约束+高还原


对于 UI 还原,目前比较常见的场景是从设计工具(比如 Sketch、PS)入手。但比较不如意的是,设计师交付的设计稿里所带的结构化信息往往是杂乱无章的,如果需要精确得解析一个设计稿里某个模块的结构化数据,往往又需要跟设计师进行合作,规范设计稿中的设计以及制定一些约束来进行使用,这会增加一定程度上的使用成本。


imgcook 为了解决这个问题,目前在对设计稿的解析上做了一些智能化的处理,去除了对设计师图层设计规范这块的依赖(当然对于良好的设计规范会让还原效果更甚!),只保留了一项开发人员可能使用到的规范来做 UI 还原。


▐ 生成可维护代码


对于可维护性代码的问题,imgcook 会对还原后的 UI 在代码层面上生成目前使用比较广泛的 Flexbox 布局以及相对定位布局,在一些自定义的命名上(比如样式命名),imgcook 也会根据开发者的习惯生成更加人性化的命名。



本文转载自淘系技术公众号。


原文链接:https://mp.weixin.qq.com/s/yTz6SCaDUTkSTiXlw3QKng


2019 年 12 月 23 日 17:56189

评论

发布
暂无评论
发现更多内容

架构师训练营第八周学习总结

Gosling

极客大学架构师训练营

架构师训练营第一期第八周作业

Leo乐

极客大学架构师训练营

性能优化二第八周作业「架构师训练营第 1 期」

天天向善

架构师训练营第 1 期第八周总结

Leo乐

极客大学架构师训练营

匠心、携手、深耕:5G Capital展现出的无线产业新范式

脑极体

第四周学习总结

Griffenliu

第八周

Geek_fabd84

大型互联网系统技术架构模式

Mars

架构模式 大型互联网应用系统

第八周作业一

天天向上

极客大学架构师训练营

第四周学习总结

晴空万里

极客大学架构师训练营

架構師訓練營 week8 作業

ilake

GitHub SSH免密登录

jiangling500

GitHub SSH 免密登录

架构训练营第四周课后作业

Sandman

极客大学架构师训练营

Netty源码解析 -- PoolChunk实现原理(jemalloc 3的算法)

binecy

源码 Netty 内存管理

架构师训练营 -week08-总结

大刘

极客大学架构师训练营

第四周作业

晴空万里

三步实现SSH免密登录Linux服务器

jiangling500

SSH 免密登录 Linux服务器

网络模型及性能优化

天天向上

极客大学架构师训练营

LeetCode题解:169. 多数元素,排序,JavaScript,详细注释

Lee Chen

算法 LeetCode 前端进阶训练营

它是世界上最好的语言,吊打PHP那种

MySQL从删库到跑路

php 少儿编程 scratch

架構師訓練營 week8 總結

ilake

架构师训练营第 1 期 week8

张建亮

极客大学架构师训练营

架构师训练营第 1 期 - 第八周作业

Todd-Lee

极客大学架构师训练营

第四周-作业一

ray-arch

极客大学架构师训练营

典型互联网应用系统使用的技术方案和手段

jorden wang

高交会:前沿科技“二维码报警系统”为你保驾护航

WX13823153201

第四周作业

Griffenliu

架构师训练营 - 第八周 - 作业一

行者

第八周作业

极客大学架构师训练营

在GitHub中如何进行PR(Pull Request)

jiangling500

GitHub PR

网上如何精确分别百家电投台子真假靠谱方法(LGF微7998)

InfoQ_ba4217df53b1

演讲经验交流会|ArchSummit 上海站

演讲经验交流会|ArchSummit 上海站

手把手教你D2C,走向前端智能化-InfoQ