关于前端:低代码开源-一键设计稿生成代码帮您解决生产痛点

作为一个前端或管理者，您是否遇到过以下场景

• 作为前端老鸟照样须要写页面布局，尽管你曾经写了无数遍，然而效率和三年前的你差异不大
• 我的项目死亡线越来越近，而你还得出页面 / 组件，无奈专一于业务逻辑
• 你曾经费尽心力形象了很多组件，但还是发现很多页面内容没方法用组件来表白，而后又开始写页面
• 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 切图，不须要设计或开发手动切图导图
• 主动生成 icon svg 文件，可间接上传到 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 或者加我微信探讨。

同时，该系列的文章也在列纲要梳理中，敬请期待