告别熬夜写代码!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 = 享受开发过程,打造高质量产品。

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

相关推荐
yeshan26 分钟前
使用 Claude Code 的自定义 Sub Agent 完善博文写作体验
ai编程·claude·掘金·日新计划
人生都在赌3 小时前
一个AI工作流如何让代码审查从手动到智能?实战拆解
ai编程·devops·cursor
北极的树3 小时前
大模型上下文工程之Prefix Caching技术详解
人工智能·ai编程
软件测试君3 小时前
【Rag实用分享】小白也能看懂的文档解析和分割教程
aigc·openai·ai编程
qiyue773 小时前
AI编程专栏(七)-什么是上下文工程,与提示工程区别
人工智能·ai编程·cursor
wayne2143 小时前
不写一行代码,也能做出 App?一文看懂「Vibe Coding」
人工智能·ai编程
茉莉花9927 小时前
如何编写一个spring ai alibaba工具
ai编程
yao0003710 小时前
Claude 4.0 终极编程指南:模型对比、API配置与IDE集成实战
ide·ai编程
~ rainbow~10 小时前
AI编程实战——CobeBuddy 实现3d坦克大战
ai编程
天若有情6731 天前
【技术新闻】OpenAI发布GPT-5,AI编程助手迎来革命性突破
gpt·ai编程·业界资讯·新闻资讯