ChatGPT生成UI代码实战

技术 · 2023-10-06

ChatGPT所代表的大数据模型已经确实改变了很多工作的流程和形态。作为一位走在新技术一线的小开发,自然也想借助一下其强大的代码生成能力来提高自己的工作效率,让更多的时间留给摸鱼创造和思考。

然而,ChatGPT已经推出这么久了,相信大家也多多少少有体验过,自然也发现,ChatGPT在生成诸如注释、文档、CRUD和单元测试等规则性强的代码方面具有强大的生产力。然而,在让它生成重要的逻辑代码时,就很容易出现生成5分钟,调试5小时的离谱情况。作为一位客户端开发,需要写的CRUD和单元测试的代码实在是不多。逻辑代码的开发为了防止一些不可控的意外也没办法全权交给ChatGPT代理。因此,只能让其作为一个升级版的Google帮忙查一些文档和回答一些小问题。好像完全没有什么场景可以让ChatGPT发挥实力。

然而,仔细一想🤔️,在客户端的需求开发过程中也存在这种规律性强,枯燥无味,但是又不得不写的代码类型。那么有没有一种可能让借助ChatGPT来生成这些枯燥的UI代码呢?

其实自动生成UI代码并不是什么新问题,关于这方面的产品也已经不少。比如在司内,智能代码生成OTeam也正在开展相关工作,而外部也有很多竞品比如:imgCook,codeFun等等产品可以完成自动生成UI代码的功能。不过总的来说,这些产品的实现逻辑都分为两步:

1、将设计稿转化为平台无关的DSL视图树(UI2DSL);

2、将DSL视图树转换为静态代码(DSL2Code)。

不过这些产品使用下来也发现一些问题:首先是生成出的代码大都是支持结构化UI的开发语言,例如HTML、Flutter和SwiftUI等。对一些老旧的编程语言(说的就是你Objective-C)缺少对应的自动生成逻辑。

此外,在DSL视图树转换为静态代码的过程中,往往是通过预先编辑好的规则来机械地生成代码,属于标准的借助“人工”实现的智能,这导致生成出的代码可读性较差。进一步带来了难以维护和调整的问题,使得开发者想要在生成的代码的基础上进行修改变得困难。

然而,随着ChatGPT这项革命性工具的出现,好像有了一点不一样的转机。由于ChatGPT具备自动代码生成的能力,因此可以完美解决现有自动生成代码工具的一些短板,包括代码可读性差或者一些语言不支持生成的问题。


 心动不如行动,为了可以早点下班提高工作效率,不妨直接来尝试一波。这里也借用一些成熟产品的思想,将借助ChatGPT生成代码的工作分成两步完成:

1、解析设计稿或者DSL视图树转化为ChatGPT可以理解的提示词Prompt;

2、将提示词输入ChatGPT得到生成的代码。

说句后话,在完成Demo后的实际测试中发现,这种将提示词作为中间产物的流程,其实还有一个隐含的优势:ChatGPT可以理解的提示词,本身也是我们开发可以理解的,相较于编码繁琐基于json的DSL视图树,这种基于自然语言的提示词可以让开发按照需要再进行一些调整,使ChatGPT更好的为我们服务,让我们在成为Prompt工程师的路上更进一步。

这种类型的工具目前还没有现成的产品可以参考,不过当前主流的设计软件对第三方插件的兼容性都非常出色,作为一位开发,遇到没有的工具自己开发一个嘛。找设计同学咨询了下,得知他们目前主要使用的设计工具是Figma,于是在花了些时间后就开发了一个简单的将Figma设计稿转化为ChatGPT Prompt的插件Demo:

插件地址: https://www.figma.com/community/plugin/1221029912601242433/Figma-To-Prompt-Demo

具体使用方法如下:

1、首先打开设计稿,选中想要生成代码的组件


2、对子组件的图层修改一下名字,防止出现一些奇奇怪怪的名字

3、执行插件得到Prompt描述词


4、将生成的Prompt输入ChatGPT得到最终生成的代码

当然了,目前这只是一个简单的Demo,解析Figma设计文件生成Prompt的过程其实也是一个标准的“人工”智能流程,由于时间问题目前也仅解析了诸如大小、位置这种简单的参数信息,也仅仅能生成这种八股文一样简单的UI代码——也许这些代码让一位熟练的开发来写可能也只需要十几分钟。尽管如此,作为可行性验证,这个结果仍然是十分出色的,证明了借助ChatGPT生成出高可读性和高可用性的代码是完全没有问题的,而且可以进一步的通过在Prompt中添加统一的规范要求、规则限制来严格控制生成的代码,对后期的维护也有很大的帮助。


后记:

未来已来。

但是仔细想想,未来好像来了很多次了,只是这一次被我们遇到了而已。

很多年前,Excel为首的电子表格出现后改变了很多行业数据处理的方式,相较于大规模的数据库或者更侧重科学计算的Python来说,其易操作性使其成为了许多企业和个人处理数据的首选工具,各种各样的Excel的教学一搜一大把,甚至我还有印象在初中的信息课上还有一节课叫做Excel的操作,可就算这样,仍然有人对着Excel按计算器。

现在未来又来了,ChatGPT的本质就是一把更好用的锤子,而锤子应该怎么用,该砸向哪里还是需要轮锤子的人来决定——有些人拿到更好的锤子也只是砸砸核桃,而有的人拿到更好的锤子也许就可以造出更好的飞机。

也许未来,我的岗位就需要从iOS开发变成Prompt开发了,不过好像头衔还长了点,看起来也不是个坏事😄


本文作者:首乌

本文链接:https://www.wesee.club/archives/815/

版权声明:自由转载-非商用-非衍生-保持署名(cc 创意共享 3.0 许可证

Theme Jasmine by Kent Liao

粤ICP备2023052298号-1