zuoyan-lens

设计稿-网页转换工具
授权协议 Apache-2.0
开发语言 JavaScript
所属分类 Web应用开发、 网页开发工具
软件类型 开源软件
地区 国产
投 递 者 陶福
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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
 相关资料
  • 布局方式 静态布局 自适应布局 流式布局 响应式布局 弹性布局 兼容策略 渐进坚强 优雅降级 移动优先

  • 找到默认主页入口 我们知道页面入口都是配置在路由中的,我们来看下app/config/routing.yml发现没有“/”的路由,但是我们发现了这么几句: app: resource: "@AppBundle/Controller/" type: annotation annotation的意思是“注解”,也就是说这一部分路由配置放在了注释里面,而资源在@AppBundl

  • 问题内容: 有哪些实用程序可获取网页图像? 基本上等同于打开页面后对其进行“截屏”。 问题答案: wkhtmltopdf和wkhtmltoimage是开源(LGPLv3)命令行工具,可使用QT Webkit渲染引擎将HTML渲染为PDF和各种图像格式。

  • 自版本1.8后已弃用:程序包仅包含一个模板标记,并已移至内置标记(lorem)。

  • 我有一个带有servlet 3.1的web应用程序,还有一个没有@WebFilter注释的servlet filter,并且工作正常。 我想用@WebServlet注释替换它,但使用相同的旧过滤器,而不创建新的过滤器类,并在旧过滤器类中使用@WebFilter。下面是我web.xml档案。 我试图用下面的servlet替换它。 我没有找到任何过滤器映射和安全约束的注释。 你能帮我吗?

  • Lens 是为那些每天使用 Kubernetes 的人设计的 IDE。它可以探索和导航 Kubernetes 集群,而无需学习 kubectl 命令,实时检查实时统计信息、事件和日志流。 它将所有集群、服务、工作负载、工具、自动化和相关资源整合在一起,以便于访问。Lens 与 Prometheus 集成,可视化并查看资源使用指标的趋势,包括 CPU、内存、网络和磁盘,以及总容量、实际使用情况、请求