作为一个前端或管理者，您是否遇到过以下场景
- 作为前端老鸟照样需要写页面布局，虽然你已经写了无数遍，但是效率和三年前的你差别不大
- 项目死亡线越来越近，而你还得出页面/组件， 无法专注于业务逻辑
- 你已经费尽心力抽象了很多组件， 但还是发现很多页面内容没办法用组件来表达，然后又开始写页面
- CTO/前端架构在试了所有的工程化、组件化方案后还苦于找不到前端有效提升产出的办法
- 刚做完页面， 老板/客户/产品说这个页面要改版/改交互....
- UI走查在一点点扣像素， 而你表示：我的心好累
是不是越看越痛心疾首？
但请问，你想过改变吗？
你尝试过去解决这些问题吗？
为了彻底解决这些问题， 我做了深入而广泛的调研和思考，从调研，预研，实践，验证已经有三年有余的时间了。
这里面结合SVG设计稿描述，系统字体识别和字蛛转换，多种空间/特征算法，视觉识别，机器学习，DSL和AST转换等多种技术，已经实现了从设计稿到前端页面的顺滑直出，并且对前端、设计、操作系统毫无侵入。
在项目实践中，设计稿还原度中位数0.95，最高可达0.99， 复杂页面代码保留率70%，而且符合开发预期， 二开体验一流。
解决方案传送门：https://gitee.com/d2-c/lens
介绍
zuoyan lens是一个通过智能算法将设计稿转换为前端页面的产品（design to code），是低代码平台的一个分支方向， 他的输入是设计稿产出是前端页面，中间无需值守即可自动完成。
此项目可以一键将 Sketch、Photoshop 的设计稿转换为可维护的前端代码。100 个 page 的工作量 10 分钟内即可轻松搞定，极大释放前端生产力。
特点
生产级代码
- 通过智能算法推算出和手写代码一样的结构和css逻辑，产出的代码约等于一个中级前端的水平
- 全flex布局
- 根据元素所处的环境， 自动修正像素误差，符合设计表达。
- 代码可阅读、可维护.
智能切图
- 自动生成透明png切图， 不需要设计或开发手动切图导图
- 自动生成
iconsvg文件， 可直接上传到iconfont等作为字体图标使用，亦可转为 svg 雪碧
自动检测字体
- 自动检测设计稿字体，如果字体缺失会自动提示安装， 如果字体不一致会影响到页面还原度，不方便安装的字体，可以让设计师或自行合并图层
循环布局识别
- 自动识别
list，grid等布局方式 - 独有结点空间结构匹配算法，智能排除噪音元素干扰，精确推算循环体，而且性能表现优异
跨平台，系统无关
- 兼容所有平台，windows和linux上也可以解析
Sketch文件
设计师学习成本为0
- 只需要准守正常的设计规范即可， 其他无任何要求
开放DSL转换，可以自由定义输出
- 采用
GoGoCode来做AST转换, 可以自由定义输出语言，语法， 比如转为：React， 微信原生，Vue，uniapp，Taro，RN等
还原度高
- 项目实测设计稿的还原度中位数为0.95，完全可以达到生产交付标准，极大降低 UI 走查成本
使用场景
移动端推荐， PC端暂无适配
- 移动端全页面开发 - 特别推荐
- 移动端细粒度模块开发场景 - 特别推荐
- 移动端活动页 - 推荐
适用于什么群体
1，前端开发人员
2，业务运营人员
解决了什么问题
1，前端开发人员
前端开发可以快速完成页面交付，不用担心UI走查，专注页面逻辑等核心问题，对于项目快速交付，减少技术债务等都有立竿见影的效果
2，业务运营人员
解决业务运营人员快速执行策划落地，无须等待技术排期或技术短暂工期，可以极速完成创新、验证、试错的问题，
亦可快速创建体验demo供客户/老板体验， 快速达成成交意向，或者减少返工等问题
技术难点
对于D2C类型的项目， 生成代码的准确性、可用性和可维护性是成败的关键，而设计稿的解析和推算本身就非常复杂。
这里只做简单的罗列，不做细致的分析， 因为这个东西复杂度蛮高，没有过经验的人只会云里雾里摸不清头脑,同时这些问题，我将出系列文章分享自己的经验，欢迎大家讨论
- 如果转换设计稿为可分析的DSL和图片用于智能算法识别，并且要系统无关
- 如何划分盒子模型
- 如果定义绝对定位
- 如何处理字体
- 如果处理icon
- 如何识别相似结构，划分循环单元
- 如何处理冗余图层
- 组件识别如何足够精确，机器学习在推导过程中的应用
先天不足：一个静态的东西无法完全表达动态效果
因为设计稿是纯静态的， 所以想要表达动态交互效果就只能靠脑补。
目前来看, 无论是根据环境推导还是AI识别，效果都不理想。
这里面要分为多个场景来细说。
1，可以预先定义的动效交互，
这部分的动态效果可以通过组件识别来表达， 因为动效已经在组件里定义过了， 直接命中组件即可
2，可脑补但没有预先定义或不能预先定义的
改造代码，甚至重构布局结构，已经没有什么方案可以解决了
3，产品或者UI不说， 前端根本就想不到的交互
这种的也没办法， 开发通过大脑都没办法命中， 更别提一个机器系统了
规划
对于一个以降本增效为目标的项目来讲： D2C只是其中的一环(虽然这一环就足够掉头发了)，后面的开发链路还有：
逻辑/事件编排
服务端数据理解
只有这两块内容完全开发完毕后，才能勉强说达到设计目标了，这个时候不管对开发还是产品、运营才算是一个完整的闭环链路， 庆幸的是， 这两块的算法复杂度没有D2C环节的高
后续
对于开发者，这个开源项目（https://gitee.com/d2-c/lens ）， 完成度不能算是完美，欢迎大家使用，提issues或者加我微信讨论。
同时， 该系列的文章也在列大纲梳理中，敬请期待