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

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 = 享受开发过程,打造高质量产品。

用愉快的心态,去创造更美好的代码世界吧!

相关推荐
我爱一条柴ya19 分钟前
【AI大模型】线性回归:经典算法的深度解析与实战指南
人工智能·python·算法·ai·ai编程
坤坤爱学习2.02 小时前
求医十年,病因不明,ChatGPT:你看起来有基因突变
人工智能·ai·chatgpt·程序员·大模型·ai编程·大模型学
草梅友仁13 小时前
草梅 Auth 与 AI 开发心得 | 2025 年第 27 周草梅周报
github·ai编程·视觉设计
mortimer20 小时前
从零到一:构建一个 Chatterbox-TTS API 服务
开源·github·ai编程
我爱一条柴ya1 天前
【AI大模型】深入理解 Transformer 架构:自然语言处理的革命引擎
人工智能·ai·ai作画·ai编程·ai写作
猫头虎1 天前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
win4r2 天前
🚀 SuperClaude让Claude Code编程能力暴增300%!小白秒变顶尖程序员!19个专业命令+9大预定义角色,零编程经验也能开发复杂项目,完全碾
aigc·ai编程·claude
slowlybutsurely2 天前
Cursor核心功能及开发实战
ai编程·cursor
码农飞哥2 天前
能生成二维码的浏览器插件来了
ai编程·浏览器插件