前言

蚂蚁集团在今年4月份推出了一款自研的智能研发平台CodeFuse推出“图生代码”新功能，支持开发人员用产品设计图一键生成代码，大幅提升前端页面的开发效率。据说在蚂蚁集团内部，每周已有超五成工程师在日常研发中使用CodeFuse，在生成单元测试场景采纳率可以达到50%。

CodeFuse

CodeFuse 图生代码绝对是一个颠覆性的创新，虽然在实际使用中只是在非核心的程序注解以及单元测试方面有了一定应用。但对于AI应用以及“程序员”码农圈子里还是掀起了不小的波澜特别是在IT35岁大裁员不景气的背景下。

但“图生代码”其意义究竟在何处？其又有其什么样的技术难度和背景，让AI技术红极一时，超级大厂背书的应用中仍然用词如此保守。本文将试图揭露一二。

技术起源

AI图生代码与低代码的无代码可视化应用

图形化一直是编程应用的一个热点，特别是近两年的低代码无代码概念更是将图形化推向顶峰，但此“图形化”与“图生代码”的“图”却是同意不同宗。虽然说两者两者都是在推崇可视化应用，但“图生代码”则更注重可视化建模。而无代码拖拽应用则是即见即所得的可视化应用。

推荐一款开源的图形与代码转换工具

代码与图形天然是具有相对性的，但其都在围绕着最终的业务模型与场景去布局。而AIGC的技术进步突出的表现则是在模型与场景领域的更懂“人”的需求。在场景与模型这两个大的变量被AI技术圈定在特定的范围后，图形与代码则会走的更近，而在这面的一些技术也会逐步的走到台前。今天推荐一款不错的开源的图形与代码的转换设计工具。供需要的朋友研究。

1. 图形设计系统：

图形设计系统还是比较偏传统的，控件属性拖动元数基本俱全，事件、样式、动作基本实现也是中规中矩，但这些都不是重点重点是这些设计如何统一到代码应用中。

图形设计系统

2.代码应用设计

代码应用设计也还算比较简洁，采用的是java接口的模式来作为对象载体。将UI属性使用元注解的方式在对象上进行标注。在兼容性以及扩展性上有了足够的现象空间。对于动作事件等逻辑应用上也是别出心裁，化繁为简。

对应代码描述

代码与模型对照

3.SVG矢量图引入

SVG自定义图形

4.技术实现路线

本身基于JAVA语言体系，是在Java Spring 注解基础上的一套扩展子集，混合编译引擎器通过扩展注解构建完整的Domain模型，通过读取标准Spring 注解完成普通Web数据交付及调度过程，通过Domin域模型动态渲染JS文件输出为JSON交付给前端引擎构建页面。

5.代码注解集合

6.图形化工具