1

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

 2 years ago
source link: https://www.v2ex.com/t/855453
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK