前言

“图生代码”。这项新功能允许开发人员直接利用产品设计图一键生成相应的代码，极大地提高了编程效率和研发速度。甚至会未来软件开发可能迎来一场革命性的变革。但图生代码究竟能直到什么程度？本文结合一款图生代码的实例程序整理了一些有代表意义的转换。

一，表单

（1）计算表格

计算表格是比较常见的一种表单录入，也有相对丰富的类execl生态，其中格式编排，数据计算联动等等都有很好的定义模型。

添加图片注释，不超过 140 字（可选）

该实例尝试转换了，CSS样式基本可以保留。计算表格类execl也有不错的支持。计算表格上应该可以打8分以上。

添加图片注释，不超过 140 字（可选）

（2）自定义表单布局

自定义布局，使用的block 绝对定位，每一个组件采用了绝对定位的设计。在表现力和代码处理上也还是比较协调的。在图生代码的应用中，这一部分应该是使用最多的。其灵活性也非常不错。

添加图片注释，不超过 140 字（可选）

​

添加图片注释，不超过 140 字（可选）

​

（3）图文混排

图文混排，对布局的考验是非常大的，对于代码整体逻辑设计也是复合度最高的，这部分实例是不错用例。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

​

二，表单组件细节

(1)磁贴布局

磁贴是现在非常常用的一种组件，具体到组件设计时，会将组件中的数据生成了一个枚举类，和一个接口访问类进行隔离。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

(2)统计图

统计图或者叫大屏图，是图形设计中最常见的一种类型。但直接生成代码类型还不多。而起数据结构也比较复杂一些。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

时间关系，根据实例简单整理了一些简单的示例，后续会逐渐补充，并将视频放出。