乐趣区

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

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

  • 作为前端老鸟照样须要写页面布局,尽管你曾经写了无数遍,然而效率和三年前的你差异不大
  • 我的项目死亡线越来越近,而你还得出页面 / 组件,无奈专一于业务逻辑
  • 你曾经费尽心力形象了很多组件,但还是发现很多页面内容没方法用组件来表白,而后又开始写页面
  • 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 雪碧
自动检测字体
  • 自动检测设计稿字体,如果字体缺失会主动提醒装置,如果字体不统一会影响到页面还原度,不不便装置的字体,能够让设计师或自行合并图层
循环布局辨认
  • 自动识别 listgrid 等布局形式
  • 独有结点空间结构匹配算法,智能排除乐音元素烦扰,准确推算循环体,而且性能体现优异
跨平台,零碎无关
  • 兼容所有平台,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 或者加我微信探讨。

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

退出移动版