开源通过智能算法将设计稿转换为前端页面的产品，设计稿即代码

一、开源项目简介

一个通过智能算法将设计稿转换为前端页面的产品（design to code），是`低代码`平台的一个分支方向， 他的输入是设计稿产出是前端页面，中间无需值守即可自动完成。

zuoyan lens是一个通过智能算法将设计稿转换为前端页面的产品（design to code），是低代码平台的一个分支方向， 他的输入是设计稿产出是前端页面，中间无需值守即可自动完成。

此项目可以一键将 Sketch、Photoshop 的设计稿转换为可维护的前端代码。100 个 page 的工作量 10 分钟内即可轻松搞定，极大释放前端生产力。

二、开源协议

使用Apache-2.0开源协议

三、界面展示

四、功能概述

特点

生产级代码

• 通过智能算法推算出和手写代码一样的结构和css逻辑，产出的代码约等于一个中级前端的水平
• 全flex布局
• 根据元素所处的环境， 自动修正像素误差，符合设计表达。
• 代码可阅读、可维护.

智能切图

• 自动生成透明png切图， 不需要设计或开发手动切图导图
• 自动生成icon svg文件， 可直接上传到iconfont等作为字体图标使用，亦可转为 svg 雪碧

自动检测字体

• 自动检测设计稿字体，如果字体缺失会自动提示安装， 如果字体不一致会影响到页面还原度，不方便安装的字体，可以让设计师合并图层

循环布局识别

• 自动识别list，grid等布局方式
• 独有结点空间结构匹配算法， 能精确推算循环体，而且性能表现优异

跨平台，系统无关

• 兼容所有平台，windows和linux上也可以解析Sketch文件

设计师学习成本为0

• 只需要准守正常的设计规范即可， 其他无任何要求

开放AST转换，可以自由定义输出

• 采用GoGoCode来做AST转换, 可以自由定义输出语言，语法， 比如转为：React， 微信原生，Vue，uniapp，Taro，RN等

还原度高

• 项目实测设计稿的还原度中位数为0.95，完全可以达到生产交付标准，极大降低 UI 走查成本

使用场景

• 移动端细粒度模块开发场景 – 特别推荐
• 移动端活动页 – 推荐
• 移动端全页面开发 – 特别推荐
• PC 端 toC 应用 – 暂无适配
• PC 端 toB 应用 – 暂无适配
• PC 端富交互应用 – 暂无适配
• 游戏场景 – 暂无适配

大版本 RoadMap

• 文本分类。 使css更加语义化
• 自动组合图形算法增强
• 图片分类。 自动识别icon图标
• 目标检测。 自动识别组件