前端智能化D2C到底怎么样了带你一睹为快

前端智能化D2C到底怎么样了带你一睹为快本站　　前端近年来一直在尝试如何提高开发人员的效率，从最初的脚手架工具、组件库、持续集成体系、自动化测试、多端适配到现在的全面的低代码平台、前端智能化、在线 IDE，大家都在为未来的新的且高效率的方式做着努力

　　前端近年来一直在尝试如何提高开发人员的效率，从最初的脚手架工具、组件库、持续集成体系、自动化测试、多端适配到现在的全面的低代码平台、前端智能化、在线 IDE，大家都在为未来的新的且高效率的方式做着努力。

　　前端行业即将要进入到下一个阶段，因为对于如何搭建组件库、脚手架已经有大量的文章/教程，已经快到了人人可以手撕一个组件库的阶段了，并且随着前端开发人员的技术的普遍提高，枯燥机械式地写代码（样式/布局）已经无法满足开发人员日益增长的追逐技术的心了，因此需要智能化布局来解放这些枯燥的工作。

　　落后就要挨打，我就打算趁着周末打算探索一下前端智能化。（本人也是新手，纯是感兴趣~，因此不用担心看不懂）

　　其实要说从设计稿转化为 html 的项目，最早可以溯源为PS(Photoshop)的导出 html 功能，PS(Photoshop) 可谓是一个老牌的设计产品，从1988年首次发布新版本，到现在仍然在更新。

　　首先打开 PS， 导入一张网上随便下载的图片，将 图片 拖进 PS。然后按照以下步骤进行操作。

　　就能看到导出了以下几个文件。（我这里切的比较粗糙如果是精细地将一张图片进行切片，应该是非常符合web 的所用格式的，毕竟很久以前，设计师就是这么给我们切片的）

　　前端当时正处于萌芽阶段，前端智能化的概念还没有被提出，没有 Vue、React，没有工程化，也没有低代码，一切都是刚刚起步，前端智能化也没有被提及。

　　随后，基于 pix2code 开发的 Screenshot2Code[2] 项目速度进入到 Github 排行榜第一，该工具能够将 UI 截图转成 HTML 代码，该项目作者号称 3 年后人工智能会彻底改变前端开发。

　　随后58集团、CodeFun等 都相继发布了智能化的产品，但是这个行业是年轻的，也是具有挑战的，这些产品的都还在初期，虽然没办法全方面的得到开发者的青睐，但是都已经有一些不错的落地场景了。

　　代码（css）可维护性（代码量，定宽定高，flex）List自动识别，分组列表循环识别其中第一点是最基本的，因为如果一个D2C（Design To Code）工具，抛开一些布局之外，连基本的设计稿都无法1:1 还原的话，对我们开发的工作量来说太巨大了，这就好比某个同事已经写了一个半成品项目了，这个时候他突然有事请假了，需要我们去帮忙结尾，这个时候我们需要去看别人的代码，再去修改。每每这个时候心里都会念叨，还不如自己重新写一个项目。

　　imgcook的官网[5]上下载其sketch插件，在 sketch 中打开插件的面板选择导出代码导出到我们的项目，然后就可以去官网我们的项目里查看。

　　其实这部分还是和 58 Picasso 一样的问题的。累赘的类名，定宽定高，并且同类型没有合并（暂时没有找到如何合并），还有些是通过 absolute 来布局的。

　　imgcook 也算是一个做了比较久的产品了，可见D2C的难度还是非常大的，对于算法的要求很高。

　　CodeFun的官网[7]上下载其sketch插件，在sketch中打开插件的面板选择上传此设计稿，然后就可以去官网我们的项目里查看。

　　64%。虽然类名还是有些不语义化，但是已经是去除了写死的宽高，同类型进行了合并抽取出了公共代码。

　　通过这一次的评测，也了解了一些前端智能化的知识以及现有平台的支撑程度。发现前端智能化在未来的道路上还是能帮助我们提高效率的，至少在页面还原度上面，还是非常的完美的，不需要不断地和设计扯皮了，并且也不用当个切图仔了，能够把生产力聚焦于写 JS , 写页面的逻辑（仿佛和后端工程是差不多了，只需要关注逻辑与数据）。

　　毕竟200年以前你告诉中国人以后不会再有皇帝，他们会告诉你自盘古开天地啥时候没有过皇帝？只要我们敢想没有什么不可能。像现阶段，自动驾驶、人脸识别 无论哪项技术的成熟，都对我们的行业产生巨大的影响。

　　前端也不例外，前端智能化、Web AR/VR、前端低代码、前端跨端每一项的成熟，都会给我们带来颠覆性的影响。

　　2021年9月30日微语早读：苹果CEO获得价值3.68亿美元股票奖励淘宝及部分微信小程序支持“云闪付”付款