[{"data":1,"prerenderedAt":456},["ShallowReactive",2],{"page-/post/imgx/use-trae-build-imgx":3,"surrounding-page":447},{"id":4,"title":5,"author":6,"body":7,"date":433,"description":434,"extension":435,"group":6,"lastmod":436,"meta":437,"navigation":438,"path":439,"rawbody":440,"seo":441,"showTitle":6,"stem":442,"tags":443,"versions":6,"__hash__":446},"content/post/imgx/use-trae-build-imgx.md","Vibe Coding 一天内完成图片编辑工具（ Trae 又行了？",null,{"type":8,"value":9,"toc":430},"minimark",[10,26,36,42,45,51,58,61,68,82,85,90,97,108,115,121,124,134,139,145,150,153,159,162,167,172,175,182,187,190,195,198,203,206,209,214,217,224,231,238,245,259,262,267,270,279,282,289,293,298,301,307,313,318,324,329,334,339,344,351,364,376,379,384,387,393,396,399,405,410,416,422,427],[11,12,13,14,18,19,18,22,25],"p",{},"最近一段时间高强度使用 ",[15,16,17],"code",{},"Cursor","、",[15,20,21],{},"Kiro",[15,23,24],{},"Trae"," 这三大编辑器。",[11,27,28,29,31,32,35],{},"最开始用 ",[15,30,17],{},"， 用的 fake cursor 插件，只嫖一个免费版（claude 3.5）。 一用真香啊，能设置 ",[15,33,34],{},"rules","，不跑题，交互也丝滑。",[11,37,38,39,41],{},"然而用的多了，没两天时间，感觉就不守规矩了。",[15,40,34],{}," 要么就是漏下，要不就完全不遵守了。感觉是要从我手下离职，要报复我一样...🥲",[11,43,44],{},"自动从聊天中中总结一些临时规则虽然不错，但换了电脑好像就没了，隔一段时间好像也会自动没（？）。",[11,46,47,48,50],{},"这时候开始出现一些 ",[15,49,21],{}," 的宣传文章，我正好有用，就火速下载体验。",[11,52,53,54,57],{},"谁让他能用 ",[15,55,56],{},"Claude4"," 呢",[11,59,60],{},"体验一番后，感觉他的设计思路很不错，尤其是 Spec 模式。但我还是 Vibe 模式用的多。",[11,62,63],{},[64,65],"img",{"alt":66,"src":67},"","https://img.zzao.club/article/202507221116762.png",[11,69,70,71,73,74,77,78,81],{},"也可能是 ",[15,72,56],{}," 的加持效果太好，从 ",[15,75,76],{},"3.5"," 到 ",[15,79,80],{},"4","，像是从村里进城一样，哪哪都是好啊...",[11,83,84],{},"唯一的问题可能在我",[11,86,87],{},[64,88],{"alt":66,"src":89},"https://img.zzao.club/article/202507221116763.png",[11,91,92,96],{},[93,94,95],"strong",{},"这种可能是网络问题导致重试情景时常出现","。",[11,98,99,100,103,104,107],{},"而且思考时间要比 ",[15,101,102],{},"cursor"," 和 ",[15,105,106],{},"trae"," 长很多。",[11,109,110,111,114],{},"由于思考时间长（可能是上下文多），",[93,112,113],{},"还会出现死循环","，不停的在解决同一个问题。",[11,116,117,118],{},"但是总体还是帮我干了很多活，",[93,119,120],{},"准确度非常高",[11,122,123],{},"（但两天就被我把额度干没了）",[11,125,126,127],{},"比如我这个只用了一天时间就做出来的",[128,129,133],"a",{"href":130,"rel":131},"https://zzao.club/imgx",[132],"nofollow","图片编辑工具",[11,135,136],{},[128,137,130],{"href":130,"rel":138},[132],[11,140,141,144],{},[64,142],{"alt":66,"src":143},"https://img.zzao.club/article/202507221116764.png","\n右键出现操作面板，支持无限分割格子",[11,146,147],{},[64,148],{"alt":66,"src":149},"https://img.zzao.club/article/202507221116765.png",[11,151,152],{},"也可以分割后再把格子删掉。删掉后又可以让格子补齐它的空位。",[11,154,155,158],{},[64,156],{"alt":66,"src":157},"https://img.zzao.club/article/202507221116766.gif","\n也可以设置圆角、间距。",[11,160,161],{},"同时也支持直接粘贴刚刚复制的图片。",[11,163,164],{},[93,165,166],{},"理论上可以出现任何布局",[11,168,169],{},[64,170],{"alt":66,"src":171},"https://img.zzao.club/article/202507221116767.png",[11,173,174],{},"没有图片的格子就会被绘制成透明背景。",[11,176,177,178,181],{},"而",[93,179,180],{},"分图功能","，可以将上传的图片，分布到每个格子中。",[11,183,184],{},[64,185],{"alt":66,"src":186},"https://img.zzao.club/article/202507221116768.png",[11,188,189],{},"也支持再次拆分格子，再次上传图片",[11,191,192],{},[64,193],{"alt":66,"src":194},"https://img.zzao.club/article/202507221116769.png",[11,196,197],{},"如果再次切换回拼图模式，就可以再次重新给小格子上传图片",[11,199,200],{},[64,201],{"alt":66,"src":202},"https://img.zzao.club/article/202507221116770.png",[11,204,205],{},"当然，再次切换到分图，就会重新把新上传的图片重新分割。",[11,207,208],{},"然后就是一个简单的长图功能。支持横向和纵向。",[11,210,211],{},[64,212],{"alt":66,"src":213},"https://img.zzao.club/article/202507221116771.png",[11,215,216],{},"可以选完再上传图片，也支持传完再切换比例。",[11,218,219,220,223],{},"以上就是全部功能了（目前纯前端功能），",[93,221,222],{},"总体用时在 8 小时以内","，具体几个小时记不清了，因为我是每天写一部分。",[11,225,226,227,230],{},"比较关键的点就是： ",[93,228,229],{},"要先定一个总体的架构","，不管是自己写，还是让 AI 自己写，先把基本思路完全敲定。",[11,232,233,234,237],{},"比如我这个图片工具，",[93,235,236],{},"核心就是维护一组数组数据","，页面渲染完全依靠这组数据，调整参数就是调整数据。导出也是用数据在原生 Canvas 上重绘完全一致的页面，然后导出。",[11,239,240,241,244],{},"这样不管是分割格子，还是上传图片，分割图片，长图，",[93,242,243],{},"本质都是处理这组数据","。扩展性还是很高的，就算完全转为后端渲染也很轻松支持。",[11,246,247,248,251,252,255,256,258],{},"如果是采用了依靠 ",[93,249,250],{},"html"," 渲染内容，在使用 ",[93,253,254],{},"html2canvas"," 导出 ",[93,257,250],{}," 内容。一是把场景限制在了浏览器上，二是需要特殊处理元素上的交互，避免导出不需要渲染的元素、辅助线等。",[11,260,261],{},"至于为什么做这种图片工具。",[11,263,264],{},[64,265],{"alt":66,"src":266},"https://img.zzao.club/article/202503121139543.png",[11,268,269],{},"这算是我在 25 年 2 月份构思的图片工具的一部分。",[11,271,272,273,278],{},"一开始先做的第一部分（IMG），也就是文字生图片，还在 V2ex 发了贴，",[128,274,277],{"href":275,"rel":276},"https://v2ex.com/t/1110730",[132],"点击查看","，很快就 100 多 star 了。",[11,280,281],{},"但可能大部分只是有兴趣，提出问题的人很少，所以我在迭代完所有内容，并且经历了一次比较大的重构。目前支持自定义模板，自定义预设，然后使用一个预设码去拿到自己想要的图片。",[11,283,284,288],{},[128,285,286],{"href":286,"rel":287},"https://imgx.zzao.club/008/default",[132]," 比如这个链接",[11,290,291],{},[64,292],{"alt":66,"src":286},[11,294,295],{},[64,296],{"alt":66,"src":297},"https://imgx.zzao.club/008/%E9%9A%8F%E6%84%8F%E6%9B%B4%E6%94%B9%E6%A0%87%E9%A2%98/%E5%AF%B9%E5%AF%B9%E5%AF%B9/%E5%92%8C%E5%89%AF%E6%A0%87%E9%A2%98/%E8%8F%9C%E9%B8%9F",[11,299,300],{},"也支持直接触发下载，点开链接即可保存图片 （不过微信了不让你打开下载，会提示去浏览器",[11,302,303],{},[128,304,305],{"href":305,"rel":306},"https://imgx.zzao.club/008/default?download=1",[132],[11,308,309,310],{},"当初这个功能，吭哧吭哧做了一两个月，",[93,311,312],{},"那时候我还是古法敲制的代码...",[11,314,315],{},[93,316,317],{},"而图片处理这部分，一天不到就用 AI 搞完了",[11,319,320,321,323],{},"用 ",[15,322,21],{}," 完成了拼图和分图功能后，我正在头疼没额度了怎么办",[11,325,326],{},[93,327,328],{},"突然 Trae 给我自动续费了。。。",[11,330,331],{},[64,332],{"alt":66,"src":333},"https://img.zzao.club/article/202507221116772.png",[11,335,336,337],{},"此时我还在心里咒骂 ",[15,338,24],{},[11,340,341,342],{},"本着钱都花了就试试吧的想法打开了 ",[15,343,24],{},[11,345,346,347,350],{},"然后惊喜的发现它更新了 ",[15,348,349],{},"2.0"," 了！",[11,352,353,354,356,357,360,361,96],{},"并且也能和 ",[15,355,17],{}," 一样设置 ",[15,358,359],{},".trae/rules/project_rules.md"," ，以前没注意它能不能设置上下文，现在才发现",[93,362,363],{},"能设置项目的上下文，也能导入更多的上下文",[11,365,366,372,373,375],{},[93,367,368,369,371],{},"但这个 ",[15,370,34],{}," 仅仅就是放在这里，供它使用","，你在对话中让他去操作这个 ",[15,374,34],{},"，自己写入，他完全不理解往哪里写，说明对话模式里没设计和 rules 的交互。",[11,377,378],{},"但是我也比较满意了",[11,380,381],{},[64,382],{"alt":66,"src":383},"https://img.zzao.club/article/202507221116773.png",[11,385,386],{},"毕竟这么多可以用的模型，2 天内也没发现网络错误之类的问题，很稳定。",[11,388,389,390,392],{},"而且我只是让他不要跑出我的把控，所以有 ",[15,391,34],{}," 之后输出的代码就很稳定。",[11,394,395],{},"然后我就继续用 Trae 完成了长图功能。",[11,397,398],{},"非常坎坷，需求太细致了，反而不利于 AI 发挥。",[11,400,401,402],{},"但是你让它完全自由发挥，十分不可控，扩展性也比较差。",[93,403,404],{},"正常的扩展性指的是方便支持更复杂的功能，毕竟以前需要手写。",[11,406,407],{},[93,408,409],{},"现在对于 AI 来说，什么扩展性不扩展性的，就算重写整个项目都用不了太长时间。。",[11,411,412,413],{},"另外，",[15,414,415],{},"SOLO模式用不了，没码！",[11,417,418,419,421],{},"在我畅快的使用 ",[15,420,24],{}," 时，前线又传来了 Cursor 封锁中国 IP 的消息！",[11,423,424],{},[93,425,426],{},"突然，此刻的 Trae 显得格外好用....",[11,428,429],{},"根本不认识什么 cursor 和 kiro ！",{"title":66,"searchDepth":431,"depth":431,"links":432},2,[],"2025-07-22T00:00:00.000Z","最近一段时间高强度使用 Cursor、Kiro、Trae 这三大编辑器。","md","2025-08-19T00:00:00.000Z",{},true,"/post/imgx/use-trae-build-imgx","---\ntitle: Vibe Coding 一天内完成图片编辑工具（ Trae 又行了？\ndate: 2025-07-22\nlastmod: 2025-08-19\ntags: [\"IMGX\", \"Vibe-Code\"]\n\n---\n最近一段时间高强度使用 `Cursor`、`Kiro`、`Trae` 这三大编辑器。\n\n最开始用 `Cursor`， 用的 fake cursor 插件，只嫖一个免费版（claude 3.5）。 一用真香啊，能设置 `rules`，不跑题，交互也丝滑。\n\n然而用的多了，没两天时间，感觉就不守规矩了。`rules` 要么就是漏下，要不就完全不遵守了。感觉是要从我手下离职，要报复我一样...🥲\n\n自动从聊天中中总结一些临时规则虽然不错，但换了电脑好像就没了，隔一段时间好像也会自动没（？）。\n\n这时候开始出现一些 `Kiro` 的宣传文章，我正好有用，就火速下载体验。\n\n谁让他能用 `Claude4` 呢\n\n体验一番后，感觉他的设计思路很不错，尤其是 Spec 模式。但我还是 Vibe 模式用的多。\n\n![](https://img.zzao.club/article/202507221116762.png)\n\n也可能是 `Claude4` 的加持效果太好，从 `3.5` 到 `4`，像是从村里进城一样，哪哪都是好啊...\n\n唯一的问题可能在我\n\n![](https://img.zzao.club/article/202507221116763.png)\n\n**这种可能是网络问题导致重试情景时常出现**。\n\n而且思考时间要比 `cursor` 和 `trae` 长很多。\n\n由于思考时间长（可能是上下文多），**还会出现死循环**，不停的在解决同一个问题。\n\n但是总体还是帮我干了很多活，**准确度非常高**\n\n（但两天就被我把额度干没了）\n\n比如我这个只用了一天时间就做出来的[图片编辑工具](https://zzao.club/imgx)\n\nhttps://zzao.club/imgx\n\n![](https://img.zzao.club/article/202507221116764.png)\n右键出现操作面板，支持无限分割格子\n\n![](https://img.zzao.club/article/202507221116765.png)\n\n也可以分割后再把格子删掉。删掉后又可以让格子补齐它的空位。\n\n![](https://img.zzao.club/article/202507221116766.gif)\n也可以设置圆角、间距。\n\n同时也支持直接粘贴刚刚复制的图片。\n\n**理论上可以出现任何布局**\n\n![](https://img.zzao.club/article/202507221116767.png)\n\n没有图片的格子就会被绘制成透明背景。\n\n而**分图功能**，可以将上传的图片，分布到每个格子中。\n\n![](https://img.zzao.club/article/202507221116768.png)\n\n也支持再次拆分格子，再次上传图片\n\n![](https://img.zzao.club/article/202507221116769.png)\n\n如果再次切换回拼图模式，就可以再次重新给小格子上传图片\n\n![](https://img.zzao.club/article/202507221116770.png)\n\n当然，再次切换到分图，就会重新把新上传的图片重新分割。\n\n然后就是一个简单的长图功能。支持横向和纵向。\n\n![](https://img.zzao.club/article/202507221116771.png)\n\n可以选完再上传图片，也支持传完再切换比例。\n\n以上就是全部功能了（目前纯前端功能），**总体用时在 8 小时以内**，具体几个小时记不清了，因为我是每天写一部分。\n\n比较关键的点就是： **要先定一个总体的架构**，不管是自己写，还是让 AI 自己写，先把基本思路完全敲定。\n\n比如我这个图片工具，**核心就是维护一组数组数据**，页面渲染完全依靠这组数据，调整参数就是调整数据。导出也是用数据在原生 Canvas 上重绘完全一致的页面，然后导出。\n\n这样不管是分割格子，还是上传图片，分割图片，长图，**本质都是处理这组数据**。扩展性还是很高的，就算完全转为后端渲染也很轻松支持。\n\n如果是采用了依靠 **html** 渲染内容，在使用 **html2canvas** 导出 **html** 内容。一是把场景限制在了浏览器上，二是需要特殊处理元素上的交互，避免导出不需要渲染的元素、辅助线等。\n\n至于为什么做这种图片工具。\n\n![](https://img.zzao.club/article/202503121139543.png)\n\n这算是我在 25 年 2 月份构思的图片工具的一部分。 \n\n一开始先做的第一部分（IMG），也就是文字生图片，还在 V2ex 发了贴，[点击查看](https://v2ex.com/t/1110730)，很快就 100 多 star 了。\n\n但可能大部分只是有兴趣，提出问题的人很少，所以我在迭代完所有内容，并且经历了一次比较大的重构。目前支持自定义模板，自定义预设，然后使用一个预设码去拿到自己想要的图片。\n\nhttps://imgx.zzao.club/008/default 比如这个链接\n\n![](https://imgx.zzao.club/008/default)\n\n![](https://imgx.zzao.club/008/随意更改标题/对对对/和副标题/菜鸟)\n\n也支持直接触发下载，点开链接即可保存图片 （不过微信了不让你打开下载，会提示去浏览器\n\nhttps://imgx.zzao.club/008/default?download=1\n\n当初这个功能，吭哧吭哧做了一两个月，**那时候我还是古法敲制的代码...**\n\n**而图片处理这部分，一天不到就用 AI 搞完了**\n\n用 `Kiro` 完成了拼图和分图功能后，我正在头疼没额度了怎么办\n\n**突然 Trae 给我自动续费了。。。**\n\n![](https://img.zzao.club/article/202507221116772.png)\n\n此时我还在心里咒骂 `Trae`\n\n本着钱都花了就试试吧的想法打开了 `Trae`\n\n然后惊喜的发现它更新了 `2.0` 了！\n\n并且也能和 `Cursor` 一样设置 `.trae/rules/project_rules.md` ，以前没注意它能不能设置上下文，现在才发现**能设置项目的上下文，也能导入更多的上下文**。\n\n**但这个 `rules` 仅仅就是放在这里，供它使用**，你在对话中让他去操作这个 `rules`，自己写入，他完全不理解往哪里写，说明对话模式里没设计和 rules 的交互。\n\n但是我也比较满意了\n\n![](https://img.zzao.club/article/202507221116773.png)\n\n毕竟这么多可以用的模型，2 天内也没发现网络错误之类的问题，很稳定。\n\n而且我只是让他不要跑出我的把控，所以有 `rules` 之后输出的代码就很稳定。\n\n然后我就继续用 Trae 完成了长图功能。\n\n非常坎坷，需求太细致了，反而不利于 AI 发挥。\n\n但是你让它完全自由发挥，十分不可控，扩展性也比较差。**正常的扩展性指的是方便支持更复杂的功能，毕竟以前需要手写。**\n\n**现在对于 AI 来说，什么扩展性不扩展性的，就算重写整个项目都用不了太长时间。。**\n\n 另外，`SOLO模式用不了，没码！`\n\n在我畅快的使用 `Trae` 时，前线又传来了 Cursor 封锁中国 IP 的消息！\n\n**突然，此刻的 Trae 显得格外好用....**\n\n根本不认识什么 cursor 和 kiro ！",{"title":5,"description":434},"post/imgx/use-trae-build-imgx",[444,445],"IMGX","Vibe-Code","3v64v9Y-exz5461309yEwpOWa0frBfFf8sY9onmFXI0",[448,452],{"title":449,"path":450,"stem":451},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":453,"path":454,"stem":455},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005085637]