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