V2EX 10小时前
[程序员] Vibe Coding 一天内完成图片编辑工具(Trae 又行了?
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文作者分享了近期使用 Cursor、Kiro、Trae 三款AI代码助手的深度体验。Cursor初期表现惊艳,但后期规则遵守出现问题。Kiro以Claude 4模型为亮点,Spec模式设计出色,但存在思考时间长、易出现死循环等网络或模型问题。Trae更新2.0后,支持项目规则设置和上下文导入,虽然对话模式下规则交互不完善,但整体稳定且模型选择多,帮助作者高效完成了图片编辑工具的开发。文章还穿插了作者关于项目架构设计和AI在开发中的作用的思考,并提到了Cursor封锁中国IP事件,使得Trae成为当前更优的选择。

💡 Cursor在初次使用时,其Fake Cursor插件和Claude 3.5模型提供了流畅的交互和有效的规则设置,但随后的使用中,AI对规则的遵守出现明显下降,甚至出现遗漏或完全不遵循的情况,使其在长期使用中表现不佳。

🌟 Kiro凭借Claude 4模型的强大能力,在模型性能上带来了显著提升,其Spec模式的设计思路得到作者肯定。然而,Kiro在实际使用中也暴露出思考时间长、容易陷入死循环的问题,这可能与网络状况或模型本身的特性有关,尽管其准确度高,但额度消耗也较快。

🚀 Trae在更新至2.0版本后,引入了类似Cursor的.trae/rules/project_rules.md设置,允许导入项目上下文,显著提升了AI在项目中的可控性和稳定性。尽管其对话模式下对规则的交互设计尚不完善,但其多模型支持和稳定性使其成为完成复杂功能的有力工具,尤其在Cursor遭遇IP封锁后,Trae的优势更加凸显。

🛠️ 作者强调了在项目开发中,确立清晰的整体架构的重要性,无论是自主设计还是借助AI辅助。以其开发的图片编辑工具为例,通过维护一组核心数据驱动渲染和导出,极大地提高了代码的可维护性和扩展性,这种数据驱动的架构设计对于AI辅助开发同样适用,能够简化复杂功能的实现。

🎨 文章还分享了作者开发图片编辑工具的经历,从最初的文本生图工具到后来的图片拼图、分图及长图功能,AI在后期的开发中显著缩短了开发周期。作者对比了纯前端渲染与原生Canvas重绘的优劣,肯定了数据驱动架构在扩展性方面的优势,并提及了AI在处理精细化需求时的挑战与潜力。

最近一段时间高强度使用 CursorKiroTrae 这三大编辑器。

最开始用 Cursor, 用的 fake cursor 插件,只嫖一个免费版( claude 3.5 )。 一用真香啊,能设置 rules,不跑题,交互也丝滑。

然而用的多了,没两天时间,感觉就不守规矩了。rules 要么就是漏下,要不就完全不遵守了。感觉是要从我手下离职,要报复我一样...🥲

自动从聊天中中总结一些临时规则虽然不错,但换了电脑好像就没了,隔一段时间好像也会自动没(?)。

这时候开始出现一些 Kiro 的宣传文章,我正好有用,就火速下载体验。

谁让他能用 Claude4

体验一番后,感觉他的设计思路很不错,尤其是 Spec 模式。但我还是 Vibe 模式用的多。

也可能是 Claude4 的加持效果太好,从 3.54,像是从村里进城一样,哪哪都是好啊...

唯一的问题可能在我

这种可能是网络问题导致重试情景时常出现

而且思考时间要比 cursortrae 长很多。

由于思考时间长(可能是上下文多),还会出现死循环,不停的在解决同一个问题。

但是总体还是帮我干了很多活,准确度非常高

(但两天就被我把额度干没了)

比如我这个只用了一天时间就做出来的图片编辑工具

https://zzao.club/imgx

右键出现操作面板,支持无限分割格子

也可以分割后再把格子删掉。删掉后又可以让格子补齐它的空位。

也可以设置圆角、间距。

同时也支持直接粘贴刚刚复制的图片。

理论上可以出现任何布局

没有图片的格子就会被绘制成透明背景。

分图功能,可以将上传的图片,分布到每个格子中。

也支持再次拆分格子,再次上传图片

如果再次切换回拼图模式,就可以再次重新给小格子上传图片

当然,再次切换到分图,就会重新把新上传的图片重新分割。

然后就是一个简单的长图功能。支持横向和纵向。

可以选完再上传图片,也支持传完再切换比例。

以上就是全部功能了(目前纯前端功能),总体用时在 8 小时以内,具体几个小时记不清了,因为我是每天写一部分。

比较关键的点就是: 要先定一个总体的架构,不管是自己写,还是让 AI 自己写,先把基本思路完全敲定。

比如我这个图片工具,核心就是维护一组数组数据,页面渲染完全依靠这组数据,调整参数就是调整数据。导出也是用数据在原生 Canvas 上重绘完全一致的页面,然后导出。

这样不管是分割格子,还是上传图片,分割图片,长图,本质都是处理这组数据。扩展性还是很高的,就算完全转为后端渲染也很轻松支持。

如果是采用了依靠 html 渲染内容,在使用 html2canvas 导出 html 内容。一是把场景限制在了浏览器上,二是需要特殊处理元素上的交互,避免导出不需要渲染的元素、辅助线等。

至于为什么做这种图片工具。

这算是我在 25 年 2 月份构思的图片工具的一部分。

一开始先做的第一部分( IMG ),也就是文字生图片,还在 V2EX 发了贴原贴

很快就 100 多 star 了。

但可能大部分只是有兴趣,提出问题的人很少,所以我在迭代完所有内容,并且经历了一次比较大的重构。目前支持自定义模板,自定义预设,然后使用一个预设码去拿到自己想要的图片。

https://imgx.zzao.club/008/default 比如这个链接

https://imgx.zzao.club/008/随意更改标题/对对对/和副标题/菜鸟

也支持直接触发下载,点开链接即可保存图片 (不过微信了不让你打开下载,会提示去浏览器

https://imgx.zzao.club/008/default?download=1

当初这个功能,吭哧吭哧做了一两个月,那时候我还是古法敲制的代码...

而图片处理这部分,一天不到就用 AI 搞完了

Kiro 完成了拼图和分图功能后,我正在头疼没额度了怎么办

突然 Trae 给我自动续费了。。。

此时我还在心里咒骂 Trae

本着钱都花了就试试吧的想法打开了 Trae

然后惊喜的发现它更新了 2.0 了!

并且也能和 Cursor 一样设置 .trae/rules/project_rules.md ,以前没注意它能不能设置上下文,现在才发现能设置项目的上下文,也能导入更多的上下文

但这个 rules 仅仅就是放在这里,供它使用,你在对话中让他去操作这个 rules,自己写入,他完全不理解往哪里写,说明对话模式里没设计和 rules 的交互。

但是我也比较满意了

毕竟这么多可以用的模型,2 天内也没发现网络错误之类的问题,很稳定。

而且我只是让他不要跑出我的把控,所以有 rules 之后输出的代码就很稳定。

然后我就继续用 Trae 完成了长图功能。

非常坎坷,需求太细致了,反而不利于 AI 发挥。

但是你让它完全自由发挥,十分不可控,扩展性也比较差。正常的扩展性指的是方便支持更复杂的功能,毕竟以前需要手写。

现在对于 AI 来说,什么扩展性不扩展性的,就算重写整个项目都用不了太长时间。。

另外,SOLO 模式用不了,没码!

在我畅快的使用 Trae 时,前线又传来了 Cursor 封锁中国 IP 的消息!

突然,此刻的 Trae 显得格外好用....

根本不认识什么 cursor 和 kiro !

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

AI代码助手 Cursor Kiro Trae AI开发
相关文章