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 = 享受开发过程，打造高质量产品。
用愉快的心态，去创造更美好的代码世界吧！