zuoyan-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走查成本
如何使用
- 安装
npm i -g @zuoyanart/lens
- 切换到项目目录执行命令
lens g [platform] //platform: h5 or uniapp
评论