低代码开源, 一键设计稿生成代码,帮您解决生产痛点
作为一个前端或管理者,您是否遇到过以下场景
- 作为前端老鸟照样需要写页面布局,虽然你已经写了无数遍,但是效率和三年前的你差别不大
- 项目死亡线越来越近,而你还得出页面/组件, 无法专注于业务逻辑
- 你已经费尽心力抽象了很多组件, 但还是发现很多页面内容没办法用组件来表达,然后又开始写页面
- CTO/前端架构在试了所有的工程化、组件化方案后还苦于找不到前端有效提升产出的办法
- 刚做完页面, 老板/客户/产品说这个页面要改版/改交互…
- UI走查在一点点扣像素, 而你表示:我的心好累
是不是越看越痛心疾首?
但请问,你想过改变吗?
你尝试过去解决这些问题吗?
为了彻底解决这些问题, 我做了深入而广泛的调研和思考,从调研,预研,实践,验证已经有三年有余的时间了。
这里面结合SVG设计稿描述
,系统字体识别和字蛛转换
,多种空间/特征算法
,视觉识别
,机器学习
,DSL和AST转换
等多种技术,已经实现了从设计稿到前端页面的顺滑直出,并且对前端、设计、操作系统毫无侵入。
在项目实践中,设计稿还原度中位数0.95,最高可达0.99, 复杂页面代码保留率70%,而且符合开发预期, 二开体验一流。
解决方案传送门:https://gitee.com/d2-c/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 走查成本
使用场景
移动端推荐, PC端暂无适配
- 移动端全页面开发 - 特别推荐
- 移动端细粒度模块开发场景 - 特别推荐
- 移动端活动页 - 推荐
适用于什么群体
1,前端开发人员
2,业务运营人员
解决了什么问题
1,前端开发人员
前端开发可以快速完成页面交付,不用担心UI走查,专注页面逻辑等核心问题,对于项目快速交付,减少技术债务等都有立竿见影的效果
2,业务运营人员
解决业务运营人员快速执行策划落地,无须等待技术排期或技术短暂工期,可以极速完成创新、验证、试错的问题,
亦可快速创建体验demo供客户/老板体验, 快速达成成交意向,或者减少返工等问题
技术难点
对于D2C类型的项目, 生成代码的准确性、可用性和可维护性是成败的关键,而设计稿的解析和推算本身就非常复杂。
这里只做简单的罗列,不做细致的分析, 因为这个东西复杂度蛮高,没有过经验的人只会云里雾里摸不清头脑,同时这些问题,我将出系列文章分享自己的经验,欢迎大家讨论
- 如果转换设计稿为可分析的DSL和图片用于智能算法识别,并且要系统无关
- 如何划分盒子模型
- 如果定义绝对定位
- 如何处理字体
- 如果处理icon
- 如何识别相似结构,划分循环单元
- 如何处理冗余图层
- 组件识别如何足够精确,机器学习在推导过程中的应用
先天不足:一个静态的东西无法完全表达动态效果
因为设计稿是纯静态的, 所以想要表达动态交互效果就只能靠脑补。
目前来看, 无论是根据环境推导还是AI识别,效果都不理想。
这里面要分为多个场景来细说。
1,可以预先定义的动效交互,
这部分的动态效果可以通过组件识别来表达, 因为动效已经在组件里定义过了, 直接命中组件即可
2,可脑补但没有预先定义或不能预先定义的
改造代码,甚至重构布局结构,已经没有什么方案可以解决了
3,产品或者UI不说, 前端根本就想不到的交互
这种的也没办法, 开发通过大脑都没办法命中, 更别提一个机器系统了
规划
对于一个以降本增效为目标的项目来讲: D2C只是其中的一环(虽然这一环就足够掉头发了),后面的开发链路还有:
逻辑/事件编排
服务端数据理解
只有这两块内容完全开发完毕后,才能勉强说达到设计目标了,这个时候不管对开发还是产品、运营才算是一个完整的闭环链路, 庆幸的是, 这两块的算法复杂度没有D2C环节的高
后续
对于开发者,这个开源项目(https://gitee.com/d2-c/lens ), 完成度不能算是完美,欢迎大家使用,提issues或者加我微信讨论。
同时, 该系列的文章也在列大纲梳理中,敬请期待
低代码开源, 一键设计稿生成代码,帮您解决生产痛点相关推荐
- 设计稿生成代码与 Serverless 的前世今生与未来!
一场脑洞实验 云栖大会云上 Hello World 活动火热进行中!每位参与者都可收获一份阿里云出品的全球唯一序列号纪念证书! 作为阿里经济体前端委员会的四大技术方向之一,前端智能化方向一被提及,就不 ...
- imgcook设计稿生成代码插件
Sketch/PSD/静态图片生成代码插件 imgcook 是专注以各种图像(Sketch/PSD/静态图片)为原材料烹饪的匠心大厨,通过智能化手段将各种视觉稿一键生成可维护的 UI 视图代码,期望此 ...
- 前端设计稿转代码现状,会不会失业?
大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 前言 前端近年来一直在尝试如何提高开发人员的效率,从最初的脚手架工具.组件库.持续集成体系. ...
- 写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢 添加评论 分享 按投票 ...
- Lodop打印设计界面生成代码带”...(省略)”
Lodop的设计界面中,菜单里的生成代码,如果打印项内容过多,后面会显示"...(省略)",省略的是打印项的内容值,无论是纯文本还是超文本,都可以用选中打印项-右键-设置属性里找到 ...
- stm32 电机库生成代码出错原因 stm32 cuble生成代码出错原因
原因1 第一个原因比较简单,是新手比较容易犯错的,就算路径中有汉语的问题 原因2 第二个原因就很隐蔽了,而且目前全网也很少有帖子谈及到第二个原因就是你的java环境(注意:stm32cubemx运行在 ...
- 使用Visual Studio宏来自动生成代码 [ Visual Studio | 宏 | 自动生成代码 ]
前言 宏的定义:是组合到一起形成一个命令以自动完成某项任务的一系列命令和指令.(MSDN) 在使用Visual Studio宏实现JS折叠功能的时候就想过用它来实现代码自动生成,有了前面的基础,实现起 ...
- java主窗体设计代码_java窗体设计+GUI经典代码全放送
[实例简介] java窗体设计经典代码,手把手叫你如何设计java窗体,编写应用程序. [实例截图] [核心代码] 57641e3b-d82c-4f28-bb29-35f951c1158d └── j ...
- idea access数据库连接_idea代码神器:根据表生成代码
Easycode是idea的一个插件,可以直接对数据的表生成entity,controller,service,dao,mapper,无需任何编码,简单而强大. 1.安装(EasyCode) 我这里的 ...
最新文章
- iOS 系统分析(一) 阅读内核准备知识
- 关于Linux下进程创建的相关知识
- Mongodb部署记录[3]-主从搭建
- 但这是不可能的,或者无法发现JIT破坏了您的代码。
- Java春招实习面试经验汇总,面试篇
- HDUOJ 1062 TEXT REVERSE
- 串灯控制盒去掉怎么接_单双向可控硅好坏怎么判断
- PyTorch 1.0 中文文档:多进程最佳实践
- Android 系统(246)---SystemServer进程的启动流程
- Spring : @Value注解
- Bitfinex将向纽约总检察长办公室移交“被指控 8.5 亿美元资金挪用案”相关文件
- 《从零开始学Swift》学习笔记(Day 14)——字符串的插入、删除和替换
- 剑指offer面试题[58]-二叉树的下一个结点
- SQL Server 中系统表的作用
- hadoop在ubuntu上的安装流程
- C#:常用字符整理自用
- 华为荣耀4X的ROOT
- Vue-实现商品放大镜效果
- 快速排序的那些事儿(Kotlin)
- 其他的一些生活小常识
热门文章
- 编译原理课设---表驱动LL(1)语法分析器的设计
- prusai3打印机使用教程_PrusaI3改进型3D打印机DIY教程.docx
- 这个网站 精确的北京时间 是如何获取的
- LeetCode 1049. 最后一块石头的重量 II 做题小结
- mnv*框架开发时代
- mysql排序规则选哪个_Mysql 排序规则选择
- JS event.target 返回触发事件的当前元素
- android缓存策略跟cdn,缓存学习(五)CDN缓存(下)-CDN缓存策略、CDN缓存和浏览器缓存之间的关系、回源和回源比...
- easy poi 双行标题导出
- 语义通信论文阅读(1):Beyond Transmitting Bits: Context, Semantics, and Task-Oriented Communications