作为前端或者管理者，你是否遇到过以下场景？作为一个前端老手，页面布局还是要写的，虽然你已经写过无数次了，但是效率和三年前的你差不了多少，没办法用组件来表达，然后我开始写页面CTO/前端架构。尝试了所有的工程化和组件化方案，还是找不到有效提升前端输出的方法。刚做完页面，boss/customer/product说这个页面需要修改/交互....UI走查有点丢像素，你说：心好累，是吗越看越心痛？但是，你有想过改变它吗？您过去是否尝试过解决这些问题？为了彻底解决这些问题，我做了深入广泛的研究和思考。从研究、预研、实践、验证到现在已经三年多了。结合SVG设计稿描述、系统字体识别和wordspider转换、多种空间/特征算法、视觉识别、机器学习、DSL和AST转换等技术，实现了从设计稿到前端页面的平滑过渡直出，并且不侵入前端，设计，操作系统。在项目实践中，设计稿还原度中位数0.95，最高可达0.99，复杂页面代码保留率70%，满足开发预期，二次打开体验一流。解决方案传送门：https://gitee.com/d2-c/lens介绍zuoyanlens是一款通过智能算法将设计稿转化为前端页面的产品（designtocode），是低代码平台的一个分支.他的输入是设计稿，输出是前端页面，中间不用值班就可以自动完成。本项目可以一键将Sketch、Photoshop设计稿转化为可维护的前端代码。10分钟即可轻松完成100页的工作量，大大释放前端生产力。特点生产级代码使用智能算法计算出与手写代码相同的结构和css逻辑，输出的代码大约相当于一个中级前端水平全flex布局。根据元素所在的环境，自动修正像素错误以满足设计表达。代码是可读和可维护的。智能抠图自动生成透明png抠图，无需手动设计开发抠图。图标svg文件由图自动生成，可直接上传到iconfont用作字体图标，或转换成svgSprite自动检测字体自动检测设计稿字体，如果缺少字体会自动提示安装，如果字体不一致，会影响页面还原，不方便安装的字体，可以让设计者自行合并图层圆形布局识别自动识别列表、网格等布局方式独特的节点空间结构匹配算法，智能消除噪音元素干扰，精确计算循环体，性能卓越跨平台，系统无关兼容所有平台，也可以在windows和linux上解析Sketch文件Designer学习成本为0你只需要遵守正常的设计规范。打开DSL转换没有其他要求。您可以自由定义输出并使用GoGoCode进行AST转换。可以自由定义输出语言和语法，比如转换为：React、微信原生、Vue、uniapp、Taro、RN等还原度高的项目实测设计稿还原度中位数0.95，可以充分满足生产交付标准，大幅降低UI走查成本。使用场景推荐移动端，PC端无移动端适配。全页开发——特别推荐移动端细粒度模块开发场景——特别推荐移动端活动页——推荐适合什么人群1、前端开发人员2、业务运营商解决什么问题1、前端-前端开发人员前端开发可以快速完成页面交付，无需担心UI走查，专注于页面逻辑等核心问题，对快速项目交付和减少技术债务有立竿见影的效果。技术建设周期短，可以快速完成创新、验证、试错等问题。还可以快速制作体验demo供客户/老板体验，快速达成交易意向，或减少返工等技术难点。对于D2C类型的项目，生成代码的准确性、可用性、可维护性是成败的关键，而设计稿本身的分析计算是非常复杂的。这里只是简单罗列，不做详细分析，因为这个东西比较复杂，没有经验的人只会一头雾水。同时，我会发表一系列文章，分享我在这些问题上的经验，欢迎大家一起讨论如何将设计稿转化为可分析的DSL和图片进行智能算法识别，系统独立的情况下如何划分盒模型。如果定义绝对定位，字体怎么处理。如果你处理图标，如何识别相似的结构。其余层中组件的识别有多准确？机器学习在推导过程中的应用先天不足：静态的东西不能完全表达动态效果，因为设计稿是纯静态的，所以要想表达动态的交互效果，只能靠脑补。目前无论是环境衍生还是AI识别，效果都不理想。这里有几个场景需要详细说明。1、可以预先定义动态交互。这部分动效可以通过组件识别来表达，因为动效已经定义在组件中了，直接打组件就可以了。没有办法解决定义的转换代码，甚至重构布局结构。3.别说产品还是UI，前端想不到的交互根本就没有办法，开发也撞不上脑子，更谈不上一个。机器系统规划对于一个以降本增效为目标的项目：D2C只是其中一个环节（虽然这个环节已经够掉毛了），接下来的开发环节包括：逻辑/事件编排服务器数据了解只有经过这两个各项内容都开发完了，我们勉强可以说设计目标已经达到了。这时，无论是开发、产品、运营，都是一个完整的闭环环节。好在这两块的算法复杂度没有D2C高。对于开发者来说，这个开源项目（https://gitee.com/d2-c/lens）的完成并不能算完美。欢迎使用、提问题或加我微信讨论。同时本系列文章也在整理中，敬请期待
