zuoyan-lens设计稿-网页转换工具

联合创作 · 2023-09-19 19:38

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走查成本

如何使用

  •  安装
npm i -g @zuoyanart/lens
  • 切换到项目目录执行命令
lens g [platform]  //platform: h5 or uniapp
浏览 17
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报