告别熬夜写代码！AI编程让我用Vibe Coding轻松上线 10 + 工具

**Vibe Coding 会上瘾，一旦你开始，就很难停下来。**我最近用这种方式又开发了一个在线工具网站—— https://www.tooltool.net。不仅实现了多个在线工具，还深深享受 Vibe Coding 带来的成就感，而我要做的仅仅是描述自己的需求，剩下的交给 AI。

这篇文章，我将详细分享整个过程，从最初灵感到上线部署，希望为你带来启发和乐趣，助你开启 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 等功能。