很多时候,我让Claude生成一些svg后还是需要调整一下参数,对对齐,消除文字重叠等,但是直接用文本编辑器改的话,没有可见即可得的环境就不是那么直观。
我知道一定有大把的svg编辑器,但是在这个时代,我还是想试试让Claude生成一个。
它一次就给了我一个基本的版本,但是为了增加些功能,还是进行了几轮交互,包括bug修复。一个27个版本,期间,我甚至还考虑过要加入AI生成功能,但是想到安全性问题,就算了。
最终结果是一段950行,一共38,384个字符的tsx文件。

当然,功能上已经初步成型了。

是的,对于我而言,AI程序能力的大幅提升提供了一种可能性:就是需要什么工具不用再去寻找、下载和安装了。直接让Claude生成一个,在artifacts里直接使用。
想起来就生成一个,用完就扔那里,下次需要再生成一个。对的,我就是属于非常讨厌软件工程的一类人,尤其是如今的软件工程早已偏离了程序本来该有的样子。现在,AI把这个该有的样子找回来了。
不过,我讨厌软件工程,不代表我认为程序就只要一个文件就可以了。这个svg编辑器,我还是赋予了很多未来潜在能力的设想的,所以,我打算以此为基础,启一个工程。
当然,按照之前的一贯做法,我会先把这个已经实现功能的tsx文件分别扔给Claude、GPT和Gemini,让他们给出生成项目工程的建议,然后就在cursor中在模型的“指导下”半手工完成。这期间,还是需要人工修改多次,有些配置问题,有些组件设计和引用问题。
反正,如果不是抱着“死磕到底”的心,工程能够顺利跑起来的概率不超过20%,哦不,是不超过10%,哦不,是基本没戏。
很多血泪教训让一个本来发誓不学习前端框架的人,慢慢的居然熟悉了React和Next。因为要偷懒而出发,却初心大改,勤奋学习,刻苦钻研。
不过,这一次,我意外的更换了方法了。
我知道Cursor升级到0.46后,有了agent功能。但过去一段时间也没有特意去尝试,我依然按照先前的方式准备半人工。但是在进行过程中突然发现触发了agent,居然没有按照我之前习惯的方式来进行,偷偷干了很多活。
于是,我停下了正在进行的工程。重新起了一个新项目(初始化一个next项目),给了三大模型共同合作下帮我设计的项目结构:

Cursor就开始了。
当它完成了25项工作后,提示到了系统设定的默认跳出,问我要不要继续。
我的指令是继续。
然后,一直到下图。

一次生成完毕,当然,在点开页面进入到编译环节时,还是出了一些错误,我简单的把错误信息加入对话,然后修复了几轮。

第一版出来了,当然这个界面并不符合我的要求,而且很多功能也不太正常。
所以继续对话,继续修正。我又传了一张在Claude中的页面布局截图。
是的,改错误的过程需要一些反复的,但是全程我没有帮助改动过一个字的代码,也没有任何关于可能的错误的提示,只局限于三种提示词:1、告诉它要什么功能;2、哪个功能不正常;3、系统返回的错误信息。
我突然就想看看,只在这三中提示词下,AI能让这个项目走多远。
大概又是三四轮交互后,实现了下面的页面。

当然,也可以顺利的粘贴一段Claude生成的代码,尽管显示还有些小问题,那也是功能还不够的原因。

我准备再前进一步,是否可以直接提交github代码仓。
没有一次成功,原因是我github上一个安全设置的冲突,当我修改掉这个冲突时,提交成功了。
突然,我多了一个想法,我想看看这个项目在我坚持只靠“三种提示词”的对话下,能走多远。
我在github上把项目设成了public:
https://github.com/dmquant/svg-slide-editor
我还在vercel上进行了部署:https://svg-slide-editor.vercel.app/
因为这个工具我自己也会使用,我应该会时不时的进行些更新,当然只用上面说的限定对话方式,也许很快模型就没有办法再实现我要的新功能,或者无法再修复成功代码。
没关系,每次走不下去的时候,我会停住,然后等模型更新,再试,或许这还能成为一个模型测试的方法,也未可知。
此刻,我知道模型还能走下去,因为我又加了一个小功能。
但是,我累了,卷不动了,今天走不下去了,就只能到此为止了。