低代码开源, 一键设计稿生成代码,帮您解决生产痛点

2022-05-26 15:14:06 +08:00
 huabinglan

作为一个前端或管理者,您是否遇到过以下场景

是不是越看越痛心疾首?

但请问,你想过改变吗?

你尝试过去解决这些问题吗?

为了彻底解决这些问题, 我做了深入而广泛的调研和思考,从调研,预研,实践,验证已经有三年有余的时间了。

这里面结合SVG 设计稿描述系统字体识别和字蛛转换多种空间 /特征算法视觉识别机器学习DSL 和 AST 转换等多种技术,已经实现了从设计稿到前端页面的顺滑直出,并且对前端、设计、操作系统毫无侵入。

在项目实践中,设计稿还原度中位数 0.95 ,最高可达 0.99 , 复杂页面代码保留率 70%,而且符合开发预期, 二开体验一流。

解决方案传送门: https://gitee.com/d2-c/lens

介绍

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

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

特点

生产级代码
智能切图
自动检测字体
循环布局识别
跨平台,系统无关
设计师学习成本为 0
开放 DSL 转换,可以自由定义输出
还原度高

使用场景

移动端推荐,PC 端暂无适配

适用于什么群体

1 ,前端开发人员

2 ,业务运营人员

解决了什么问题

1 ,前端开发人员 前端开发可以快速完成页面交付,不用担心 UI 走查,专注页面逻辑等核心问题,对于项目快速交付,减少技术债务等都有立竿见影的效果

2 ,业务运营人员 解决业务运营人员快速执行策划落地,无须等待技术排期或技术短暂工期,可以极速完成创新、验证、试错的问题,

亦可快速创建体验 demo 供客户 /老板体验, 快速达成成交意向,或者减少返工等问题

技术难点

对于 D2C 类型的项目, 生成代码的准确性、可用性和可维护性是成败的关键,而设计稿的解析和推算本身就非常复杂。

这里只做简单的罗列,不做细致的分析, 因为这个东西复杂度蛮高,没有过经验的人只会云里雾里摸不清头脑,同时这些问题,我将出系列文章分享自己的经验,欢迎大家讨论

先天不足:一个静态的东西无法完全表达动态效果

因为设计稿是纯静态的, 所以想要表达动态交互效果就只能靠脑补。 目前来看, 无论是根据环境推导还是 AI 识别,效果都不理想。 这里面要分为多个场景来细说。

1 ,可以预先定义的动效交互, 这部分的动态效果可以通过组件识别来表达, 因为动效已经在组件里定义过了, 直接命中组件即可

2 ,可脑补但没有预先定义或不能预先定义的 改造代码,甚至重构布局结构,已经没有什么方案可以解决了

3 ,产品或者 UI 不说, 前端根本就想不到的交互 这种的也没办法, 开发通过大脑都没办法命中, 更别提一个机器系统了

规划

对于一个以降本增效为目标的项目来讲:D2C 只是其中的一环(虽然这一环就足够掉头发了),后面的开发链路还有:

逻辑 /事件编排

服务端数据理解

只有这两块内容完全开发完毕后,才能勉强说达到设计目标了,这个时候不管对开发还是产品、运营才算是一个完整的闭环链路, 庆幸的是, 这两块的算法复杂度没有 D2C 环节的高

后续

对于开发者,这个开源项目( https://gitee.com/d2-c/lens ), 完成度不能算是完美,欢迎大家使用,提 issues 或者加我微信讨论。

同时, 该系列的文章也在列大纲梳理中,敬请期待

2300 次点击
所在节点    程序员
20 条回复
dk7952638
2022-05-26 15:25:41 +08:00
一个小小的建议,迁移到 github 上比较好,gitee 实在不是个开源的好地方
encro
2022-05-26 15:28:00 +08:00
正想用 rust 的 egui 自己撸一个设计即代码工具,
没想到你这里就有了,
希望能提供 online demo
encro
2022-05-26 15:31:06 +08:00
和我想的不一样,你这个是常规的将其他设计稿转为代码,我想的是:

1 ,定义 /选择设计系统;
2 ,设计页面和组件;
3 ,输出组件和样式代码;
huabinglan
2022-05-26 15:36:47 +08:00
@encro 还是拖拉点配的那种低代码吗?这种的局限性太大了
huabinglan
2022-05-26 15:37:39 +08:00
@dk7952638 github 有一份, 推 gitee 是考虑到很多 coder 仍然不会翻墙
encro
2022-05-26 15:51:17 +08:00
@huabinglan

不,先主要是一个设计工具,只是提供了输出代码功能。
主要参考 Figma/lunacy 之类原型设计软件。


1 ,将 semi design/T design/antd 之类风格导入进去,改下参数,形成自己的设计系统;
2 ,新增页面,拖放组件,修改组件参数;
3 ,导出页面组件代码,可选 vue/react/web component.
encro
2022-05-26 15:53:26 +08:00
真正实现从设计系统,到设计,到代码一条龙,而不是通过转换,走的不是一条路。
huabinglan
2022-05-26 16:08:13 +08:00
@encro 是不是不好落地啊, 一个 figma 就是一个重量级产品了,有了之后又导入了一个 ui 组件系统, 会非常限制设计的能力的, 特别是 To C 。
我觉的你也有想法, 不嫌弃可以加个 VX 聊:enVveWFuYXJ0
encro
2022-05-26 16:20:18 +08:00
@huabinglan

可以先考虑只兼容一套设计系统:

1 ,自己实现一个类似 semi 的系统
2 ,实现一个设计器,
3 ,实现 Semo 类似组件导出多个平台代码功能,
4 ,实现类似各种钢笔工具、图片处理工具之类 PS 功能以及周边 (v2)
5 ,实现对接其他设计系统。(v3)

一开始不用兼容太多设计系统和组件,但是确实是一个非常庞大的工程。
开始有这个想法主要开始是玩,学习 rust+egui 这种即时渲染模式。

你可以加下我,哈哈,https://c4ys.com/archives/2805
huabinglan
2022-05-26 16:50:19 +08:00
@encro 这个群不错, 已入
encro
2022-05-26 17:11:59 +08:00
@huabinglan

不,现在还没有什么交流。
taowen
2022-05-27 10:22:57 +08:00
huabinglan
2022-05-27 10:41:10 +08:00
@taowen 这块的代码因为太复杂和一些模型的东西,还没想好怎么释放,对于使用者成本太高了, 目前和成员商量了一下, 最好的方式是: 开放方案,自己实现。就是把所有的道道都公开, 但是有能力的自己实现, 没能力的直接用就好了, 我也不收费。 当然这些东西还会改进
huabinglan
2022-05-27 10:46:03 +08:00
现在释放的源码中已经包括: 跨平台设计稿转换,智能切图,字体识别,DSL 转换等
@taowen
xjj666
2022-05-28 11:11:10 +08:00
op, 我转换了一个 sketch, 出错了:
画板数量 1
开始智能编排[2 、工作路线](1/1)
TypeError: Cannot read properties of undefined (reading 'red')
at module.exports.colorParser (/usr/local/lib/node_modules/@zuoyanart/lens/src/tools.js:179:27)
at module.exports._formatChild (/usr/local/lib/node_modules/@zuoyanart/lens/src/parserSketch/sketchToPng.js:97:123)
at module.exports.format (/usr/local/lib/node_modules/@zuoyanart/lens/src/parserSketch/sketchToPng.js:75:16)
at module.exports.parseSvg (/usr/local/lib/node_modules/@zuoyanart/lens/src/parserSketch/layer.js:46:23)
at module.exports.parse (/usr/local/lib/node_modules/@zuoyanart/lens/src/parserSketch/layer.js:54:16)
at SketchToDsl.parseLayer (/usr/local/lib/node_modules/@zuoyanart/lens/src/index.js:40:43)
huabinglan
2022-05-28 14:30:45 +08:00
@xjj666 加我 VX 聊:zuoyansoft
polobug
2022-06-17 11:26:22 +08:00
你这 demo 是啥 demo 。。。。就很不直观,用户想要的是什么?是进你页面就能看到设计图和产出图的展示。而不是你这些杂七杂八的语言描述。。。
huabinglan
2022-06-20 20:51:06 +08:00
@polobug demo 里的目录结构,设计稿,运行结果都直接给出了,你这个直观法是什么直观法
polobug
2022-06-21 09:39:41 +08:00
@huabinglan #18 你这里面的演示视频太长,且不能拖动,没给出重点
huabinglan
2022-06-21 15:47:11 +08:00
@polobug 哦哦,你说这个,不能拖动是放不了视频,放的是个 gif , 至于后续我会再出一个打开生成结果的视频

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/855453

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX