作为一个前端或管理者，您是否遇到过以下场景
- 作为前端老鸟照样须要写页面布局，尽管你曾经写了无数遍，然而效率和三年前的你差异不大
- 我的项目死亡线越来越近，而你还得出页面 / 组件，无奈专一于业务逻辑
- 你曾经费尽心力形象了很多组件，但还是发现很多页面内容没方法用组件来表白，而后又开始写页面
- 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 或者加我微信探讨。
同时，该系列的文章也在列纲要梳理中，敬请期待