运维咖啡吧
享受技术带来的乐趣,体验生活给予的感动

借免费拼图工具诞生的故事分享下使用AI编程的经验

在过去的短短三天里,我经历了一场奇妙的创作之旅。这一切都要从周六发出的这一篇「我珍藏的免费服务清单,在这个GitHub项目面前不值一提」文章说起

虽然我们已经在上海居住了十几年,但家里的亲戚却少有来过的,最近恰遇小学放假,姐姐带小外甥来看看大上海,时间很紧不会多呆,考虑到这火辣的天气,在跟小朋友沟通过之后决定周六带他们去蹦床乐园玩儿,主要是两个小朋友进去玩儿,我这身板根本蹦不动,就在外边做好后勤工作,毕竟是游乐场所,很吵,闲来无聊就想着写篇文章打发下时间,于是动笔

文章没有问题,但因为文章里需要配一张拼图,翻了很久都没有找到一个趁手好用的工具,要么登录要么花钱,我都不想,于是便有了自己造个轮子的想法。周日起床开始动手,由于我自己并不怎么懂前端,再加上现在AI已经这么强大,自然而然的就想到了Vibe Coding,我出想法和思路,编码的事情就交给AI了,用了最近常用的Gemini 2.5 Pro模型,从早到晚,高强度的对话了几个小时,凌晨时分,一个我自己满意的拼图版本终于上线了

这个版本只有两个核心的功能:布局拼图长图拼接,布局拼图主要是根据给定的布局拼出好看的图片,内置了几十种布局,非常丰富,许多布局还是其他拼图软件收费的,支持边框拖动、拖拽换位、边框间距、圆角调节等等基础功能,而长图拼接则较为简单,主要就是可以拼长图,支持横向和纵向,解决了拼图下载清晰度不够的问题

虽说这些功能其他的拼图软件也有,不过自己造的必须有自己的优势,不用下载APP打开网页就能用、完全免费、不用登录直接下载,同时因为是纯前端实现,没有后端服务,不存在数据上传问题,对用户隐私十分友好,更加安全

时间来到周一,高强度的使用了这个拼图工具,同时还发现并修复了一些BUG,优化了使用体验,让它变得更好用。我不甘于新造的轮子只有我自己使用,于是写了篇文章一个纯粹的在线拼图工具,完全免费不用登录向大家介绍了这个工具,同时还发给了咖啡吧的朋友们试用

除了好用之外还得到了一些BUG反馈及优化建议,都很中肯,于是就继续与AI对话,在周二上线了一个新版本,修复BUG增加功能,首先解决了移动端无法使用的问题,全面兼容移动端,移动端的使用体验变得像PC端一样丝滑,其次新增了图片视区平移功能,你可以自己决定某张图片展示的视觉区域,还上线了背景图片功能,背景不在是单纯的颜色,拼图也可以有创意,除此之外还优化了上传逻辑、PC端侧边折叠、新增交互提示等等,使用体验更上一层

新版本上线后比较兴奋,即兴又写了篇短文介绍:「一个纯粹的免费在线拼图工具,它进化了!」,同样的文章发出后又收到了不少朋友的反馈,能不能增加16:10的比例配置?边框能不能自定义调整,像拍立得一样下方留白?能否在拼图上添加文字?添加的文字能不能添加箭头指向?好吧,这些功能通通安排,只要AI能实现我就能上线,好在AI足够强大,这些功能全都一一上线了:添加文字添加箭头自定义边框,其实还不止这些,我还为这个项目做了个Landing Page,也同样交给了Gemini,基于这两天我们的交互,它非常准确且快速的做出了这个页面,我看了下,十分精准还好看

尤其是这块内容,真的做到了我心里

经验

整个工具的开发我没有写一行代码,全程都是Gemini,我输出想法,由它来实现,完了我测试,我告诉他哪里有问题或者哪里待优化,它继续修改,我继续测试如此往复,最终造就了这个工具。所以说,AI时代了,即便是你不懂编程,只要有好的想法、清晰的思维和逻辑,也一样能够上线好用的产品

如何更好的与AI交互,我觉得首先就是你自己要十分清楚你想要什么,并能通过语言表达出来,要AI能够理解,尽量说的详细。几点经验分享

1.第一个问题要尽可能的描述的详细,让它给你输出你最想要的结果,如果第一个回复的结果离你的想法差距较大,那可以调整提示词,开个新对话重新提问,让AI尽可能给你最接近你想要的结果

2.之后的每一个对话都尽量让AI只解决一个问题,避免在一次对话中既要修复BUG又要增加Feature,一次对话解决一个问题,解决完成再进行下次对话开启新的问题,减少互相之间的干扰

3.虽说一个会话可以连续多轮的问题,但随着问答的越来越多,积累的上下文就越来越庞大,AI每次回答时都要先回顾上下文,不仅回答时间会变慢,准确率还会降低,此时一个好的做法是新开一个对话,那如何让新开的会话能够继续工作不用重头开始呢?我的做法是让AI对当前会话进行总结,拿总结结果作为下一次会话的第一个问题。下面是我常用的与AI完成一轮对话的结语

这个会话的内容太多了,有很多无效的干扰,影响了回答的准确性和效率,我现在准备开启一个新的会话,在开启新会话之前,需要你提供一个提示词,作为下一个对话的开始,让下一个对话在阅读了提示词之后能够清晰准确的知道当前的项目整体及每一个核心细节,包括项目目录结构、核心代码等,以便它能够准确高效的接下来的工作

4.新开启的会话在提第一个问题时最好把项目相关的代码给一并发给他,让AI能够完全了解项目状况,这样效率会高不少

经验给你,欢迎补充

结语

从一个解决个人麻烦的小工具,到如今这个趋于完善的系统平台,整个过程充满了探索的乐趣。我把它分享出来,不仅是分享一个工具,更是分享一种在AI时代下全新的创作可能性,我不知道它的终点在哪,但只要还有能被解决的痛点,只要大家还有新的奇思妙想,这场有趣的对话和进化,就会继续下去

工具地址: https://img.ops-coffee.cn

欢迎你来体验它的第三次进化,也期待在留言区看到你的想法和创意