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

[huabinglan]

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

• 作为前端老鸟照样需要写页面布局，虽然你已经写了无数遍，但是效率和三年前的你差别不大
• 项目死亡线越来越近，而你还得出页面 /组件， 无法专注于业务逻辑
• 你已经费尽心力抽象了很多组件， 但还是发现很多页面内容没办法用组件来表达，然后又开始写页面
• 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 或者加我微信讨论。

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

[dk7952638]

一个小小的建议，迁移到 github 上比较好，gitee 实在不是个开源的好地方

[encro]

正想用 rust 的 egui 自己撸一个设计即代码工具，
没想到你这里就有了，
希望能提供 online demo

[encro]

和我想的不一样，你这个是常规的将其他设计稿转为代码，我想的是：

1 ，定义 /选择设计系统；
2 ，设计页面和组件；
3 ，输出组件和样式代码；

[huabinglan]

@encro 还是拖拉点配的那种低代码吗？这种的局限性太大了

[huabinglan]

@dk7952638 github 有一份， 推 gitee 是考虑到很多 coder 仍然不会翻墙

[encro]

@huabinglan

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


1 ，将 semi design/T design/antd 之类风格导入进去，改下参数，形成自己的设计系统；
2 ，新增页面，拖放组件，修改组件参数；
3 ，导出页面组件代码，可选 vue/react/web component.

[encro]

真正实现从设计系统，到设计，到代码一条龙，而不是通过转换，走的不是一条路。

[huabinglan]

@encro 是不是不好落地啊， 一个 figma 就是一个重量级产品了，有了之后又导入了一个 ui 组件系统， 会非常限制设计的能力的， 特别是 To C 。
我觉的你也有想法， 不嫌弃可以加个 VX 聊：enVveWFuYXJ0

[encro]

@huabinglan

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

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

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

你可以加下我，哈哈，https://c4ys.com/archives/2805

[huabinglan]

@encro 这个群不错， 已入

[encro]

@huabinglan

不，现在还没有什么交流。

[taowen]

就是一个云服务的 sdk ？ https://gitee.com/d2-c/lens/blob/master/src/parseLayer/index.js

[huabinglan]

@taowen 这块的代码因为太复杂和一些模型的东西，还没想好怎么释放，对于使用者成本太高了， 目前和成员商量了一下， 最好的方式是： 开放方案，自己实现。就是把所有的道道都公开， 但是有能力的自己实现， 没能力的直接用就好了， 我也不收费。 当然这些东西还会改进

[huabinglan]

现在释放的源码中已经包括： 跨平台设计稿转换，智能切图，字体识别，DSL 转换等
@taowen

[xjj666]

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]

@xjj666 加我 VX 聊：zuoyansoft

[polobug]

你这 demo 是啥 demo 。。。。就很不直观，用户想要的是什么？是进你页面就能看到设计图和产出图的展示。而不是你这些杂七杂八的语言描述。。。

[huabinglan]

@polobug demo 里的目录结构，设计稿，运行结果都直接给出了，你这个直观法是什么直观法

[polobug]

@huabinglan #18 你这里面的演示视频太长，且不能拖动，没给出重点

[huabinglan]

@polobug 哦哦，你说这个，不能拖动是放不了视频，放的是个 gif ， 至于后续我会再出一个打开生成结果的视频