Vibe Coding 会上瘾,一旦你开始,就很难停下来。 我最近用这种方式又开发了一个在线工具网站------ www.tooltool.net 不仅实现了多个在线工具,还深深享受 Vibe Coding 带来的成就感,而我要做的仅仅是描述自己的需求,剩下的交给 AI。
这篇文章,我将详细分享整个过程,从最初灵感到上线部署,希望为你带来启发和乐趣,助你开启 Vibe Coding 之旅。
预览效果

什么是Vibe Coding?
"Vibe Coding"(中文常译作"氛围编程")这一术语的提出者是 OpenAI 联合创始人、计算机科学家安德烈·卡帕西(Andrej Karpathy)。其来源可追溯至他在2025年2月于社交媒体平台X上发布的一条动态。
译文:有一种我称之为"氛围编程"(vibe coding)的新式编程方式,你完全沉浸在氛围中,拥抱技术的指数级进步,甚至忘记代码的存在。这之所以成为可能,是因为大语言模型(比如Cursor Composer搭配Sonnet)已经变得太强大了。而且我直接用SuperWhisper和Composer对话,几乎不用碰键盘。我会提出最懒的要求,比如"把侧边栏的内边距减半",因为我懒得自己去找。我总是"全部接受",不再看代码差异。遇到报错时,我直接原封不动地复制粘贴进去,通常问题就解决了。代码逐渐超出我平时的理解范围,真要搞懂得花时间仔细阅读。有时候大语言模型修不好某个bug,我就绕过去或者随便改点东西直到问题消失。对于临时性的周末小项目来说还行,但也挺有趣的。我在构建一个项目或网页应用,但这其实不算真正的编程------我只是看看东西、说说需求、运行一下、复制粘贴,然后它大多就能跑起来。
灵感来源
项目的初始想法很简单:把我自己常用的开发工具打造一个集多种实用工具于一身的网站,比如开发工具、文本处理、数据转换、颜色工具等。我的目标是让这个网站功能强大,同时界面友好、操作直观。其实在 AI 如此强大之前我已经开发过一个工具网站,但是代码需要完全自己编写,效率极低同时由于没有设计稿,最初出来的效果也不尽如人意,如下图:

当有了 AI 辅助之后一切都不一样了,完成上述功能仅需要语言描述,如果报错就修复错误。我不必关心过程,只需要关注结果。
技术栈选择
- 前端框架 :Next.js
理由:Next.js是一个全栈 React 框架,提供服务器端渲染(SSR)、静态站点生成(SSG)等功能,有助于提升网站性能和 SEO。 - UI库 :shadcn/ui
理由:shadcn/ui 是一个现代化的组件库,提供美观且可定制的UI组件,加速开发过程。 - 路由 :Next.js 内置路由
理由:Next.js 提供基于文件系统的路由,简化页面导航和路由管理。 - 后端 :Next.js API Routes
理由:Next.js 允许在同一项目中创建API路由,方便快速开发后端服务。 - 部署 :Vercel
理由:Vercel 是 Next.js 的官方部署平台,提供一键部署、自动 HTTPS 和全球 CDN 等功能。
开发过程
我使用的是 Cursor 的 Agent 模式,开发过程即需求描述,就像一个产品经理一样,下面是我的对话内容:
Ask:增加一个base64 decode的工具页

预览效果

除了解码还支持了编码,不错。
Ask:增加一个文本md5的工具页

预览效果

到目前为止整体还不错,但是 UI 风格不太统一,颜色也比较随意,于是我改成了 shadcn/ui,然后让 AI 针对之前的页面改造,同时由于页面比较多,把顶部导航也改成了shadcn/ui 的侧边栏。

经过上面改造后,base64 和 md5 工具效果如下:


其他页面类似,我只需要跟AI说"实现某工具即可",目前上图中侧边栏工具都已经实现,而且仅仅用了几个晚上的时间, 并且时间大部分都花在等待AI写代码的过程,后续我会继续进行完善,有了新的经验会随时分享。
总结
如果你也想开启一个类似的项目,下面几点规则可以遵循
- 别造轮子,有开源项目或模板直接用
- 提示词要具体,复杂任务拆分处理
- 使用成熟的组件库,应用风格整体的统一性会大幅提升
- 及时提交代码,每个任务运行没问题后最好提交一次,因为后面 AI 可能还会改已经没问题的代码,及时提交保证可以正常回滚。
- 放心把一切交给AI(目前本人已经建立起 AI 信仰)
Vibe Coding = 享受开发过程,打造高质量产品。
用愉快的心态,去创造更美好的代码世界吧!