loading image

AI时代的赛博神灯——初识“氛围编程”(2)

Posted by Enovace on March 17, 2026

AI时代的赛博神灯——初识“氛围编程”(2)

Banner

被卷进AI洪流,我却真正看清了方向。

人的改变不是循序渐进的,而是需要一个契机。

很多人觉得自己不适合AI,不会用AI。其实只是还没碰到那个"让你立刻上手并得到正反馈"的入口。

我也一样。直到我第一次用AI做出了一个真实可用的工具。

《画外边框》
Github链接:画外边框 :一款照片边框水印生成工具
Web端链接:RZFrame Web

Image

这篇文章既是我初次接触AI的学习和实践过程的分享,也是一个简单的AI辅助独立开发的流程。每个人都可以去尝试,如果你有想法,我建议你一定要试一试,独立做一个能够解决需求的小工具。

一、我为什么想做这个1. 需求发掘:

就像大部分产品的出现之初,往往出于自己对于解决某个问题的需求,我是个摄影爱好者。

很多人发照片,喜欢给照片套个边框,加上品牌的水印,或者自己的个人logo等,有的还会加上相机/镜头的信息。提高照片美感和专业程度。我也喜欢加,以前我是用PS去做。还要开软件,然后画蒙版,加文字什么的。怪麻烦的。

Image

2. 竞品分析

去网上找类似的工具,确实是有,还很多。但是存在各种各样的问题,要么收费,要么效果差,要么卡的一匹。

具体的流程我不做详细的叙述,总之,办法很简单——把**能找到的工具全都试用一遍,问题自然就清楚了。**乱收费、模板丑、卡顿、界面不美观、交互逻辑离奇等问题……这些都指导了我接下来的开发方向。

3. 功能规划

实际上,我最初的想法和规划也没有太清晰,毕竟是初次尝试,但我一定在坚持的一点是:

做一个只能给照片加边框的,好看的工具

其他的,调色,修图之类的功能,一概不做。

想法是有了,但接下来我面对的问题就是——我完全不会写代码。

二、先试了再说

那段时间,大概是25年11月,Gemini推出了一次更新,据说前端能力很强,到处都在传。

我看到各种宣传文案和视频演示,开始产生了兴趣,我就想,要不我也试试?

打开Gemini,大概把需求描述了一遍:

做一个给照片加边框的工具,能显示相机参数,能加水印,界面要好看。

就这一句话,没什么小作文一般的Prompt,也没有任何准备,我也没有任何基础。但我后面一切的发展,都起源于这个念头。

三、没我想的那么顺利

第一版做出来了,但问题一堆。

界面丑、照片能导入但导不出来、参数显示位置不对……每发现一个问题,就得重新描述给AI,让它改,改完又出新问题。

这只是简单做了一个HTML,后来涉及到后端代码,又是一关。部署的时候要装各种东西,npm、各种命令行……对我这种完全没有开发背景的人来说,每一步都像在拆盲盒,不知道错在哪,不知道下一步怎么办。

但我还是一点点尝试,就这样慢慢一点一点改过来的。

四、让我没放弃的那个瞬间

过程可以说是蛮曲折的,但我之所以没放弃,是因为AI在最开始就给了我一个惊喜。

第一次看到一个 “真的能用” 的界面出现在屏幕上,我有点不敢相信——这TM这么牛逼吗,还真能用?

那一刻我意识到一件事:

我不需要看懂代码,我只需要判断AI给我的结果是不是我想要的。至于它怎么实现的,不重要。

我负责提需求、判断结果。AI负责实现,就这么简单,如果有不对的,不符合我想法的,直接让AI改,我看不懂,我也不管,我只要结果。 咱也是体会到当老板的感觉了:)

五、实操流程

由于隔了几个月,中途换了很多对话,最初的对话已经找不到了,但大概的框架是:

  • 第一步:描述需求给AI
  • 第二步:第一版出来之后继续提需求迭代
  • 第三步:遇到报错直接截图/复制AI
  • 第四步:最后打包部署

1. 提出需求与初步实现

我重新使用Gemini 3.0,仍然是从网页开始,重新做了一遍:

Image

选择Canvas,重新以最初的提示词开始:
做一个给照片加边框的工具,能显示相机参数,能加水印,界面要好看。
比之前更快,Gemini给出了结果,这些是代码部分,我现在还是看不懂,但不重要:

Image

点击预览按钮,可以看到工具当前的界面样式,然后上传一个照片看看,还不错是吧,有模有样的:

Image

Image

2. 修改与优化过程

其实到这里,已经能够满足我大部分的功能需求了,我决定进一步补充需求,优化当前的工具补充的提示词,我还是以打字的方式,继续与AI进行沟通调整:

Image

稍等一会之后,AI给出了新的优化结果,很接近我想要的内容了。

Image

到这里,时间刚刚过去了小时。一个真正能用的工具,独属于你自己的工具,已经诞生了,不需要学习代码,不需要找软件,什么都不需要,只需要提出你自己的需求即可。

Image

3. 最终的优化结果

在之后,经过非常多轮的反复沟通,修改,总用时也就最多2天。最终,一个好看,好用的应用,便诞生了,当然,过程要经历大量的反反复复,但结果是好的。
最后,下载代码,保存到自己的电脑上,以后就可以继续使用了。

注意,我不会代码也不会前端,或许唯一有用的一点是,我之前是建筑设计师,长期锻炼来的审美能力,思维能力,还是有一点的。

Image

六、回头看这件事的意义

做这个工具对我来说,不只是做了个小产品。
它让我从原来行业的围墙里真正跳了出来。

我在建筑行业待了几年,考研失败,工作也没什么成长感,一直觉得自己困在一个越来越窄的地方。做出这个工具之后,我第一次感觉到——原来我还是那个有想法的我,我还是喜欢学习,喜欢尝试,原来边界我可以自己去打破。

我之前的迷茫,因为我还是被困在旧有的惯性当中,完全不知道自己要什么,现在,我至少知道了方向。

虽然路还不清晰,但方向定了。对一个迷茫了很久的人来说,这已经很重要了。


如果你也有一个小想法,一直觉得"我不懂技术,不够专业,我做不到"——不妨试试让AI帮你做一次。你只需要提出你的想法即可。

技术是手段,不是门槛。你只需要知道自己想要什么。

我认为上面的分享,是最简单最简单的接触vibe coding的方式,但也是最适合小白接触的流程。

我也是从这次实践开始,更进一步接触到了Antigravity,Codex,Claude Code。又开始学习更多AI的基础知识,开始去分析行业的发展,了解到什么是MCP,Skills,RAG,等等内容,最终是走上了与原本完全不同的道路,请相信你自己。

Image