2024 年 Andrej Karpathy 提出了「Vibe Coding」这个概念——你不需要理解每一行代码，只要能把意图翻译给 AI，然后「感觉」着把产品做出来。
说实话，第一次听到这个词的时候我有点不屑。作为一个写了多年代码的全栈开发者，「不理解代码就上线」这种事听起来像是灾难的前奏。
但当我真的用这套工作流，从零做出好几个项目之后，我改变了想法。
今天这篇文章不讲概念，直接分享我实际在用的工具清单。这些工具的组合，让我一个人就能完成从前端到后端、从设计到部署的完整链路。
Claude：你的首席工程师
这是整套工作流的核心。
Vibe Coding 的本质是人机协作，而 Claude 是目前我找到的最强搭档。不同于其他 AI 编程工具只做代码补全，Claude 的优势在于上下文理解能力——它能理解你的项目结构、业务逻辑，然后给出真正可用的代码方案。
我用 Claude 做三件事：
-
架构设计：把模糊的产品想法拆解成技术方案
-
代码生成：从组件到 API，从数据库 Schema 到业务逻辑
-
Debug：遇到报错直接贴进去，它能定位问题并给出修复方案
关键能力是「读项目」。把代码库丢给它，它能理解整体架构后再动手改，而不是像某些工具那样改了这里坏了那里。
但是Claude原生版本在国内比较容易封号，所以我一般只用他的CLI工具，配合Coding Plan，这样可以大幅度降低费用，一般我是用GLM-5模型。
与此同时我还会使用Cursor，因为腾讯的Coding Plan不支持多模态，所以需要识别图片的部份我会使用Cursor来帮我完成。
当然用好这些工具，还有很多的技巧，比如安装必备的skills来约束流程和边界，写好CLAUDE.md文档等技巧。
Supabase：后端即服务
作为一个全栈开发者，我最不想花时间的事情之一就是搭后端基础设施。数据库、认证、文件存储、实时订阅……这些东西每个项目都要写一遍，但不产生任何业务价值。
Supabase 解决了这个问题。它是开源的 Firebase 替代品，底层是 PostgreSQL，意味着数据随时可控、可迁移。
我最常用的功能：
-
Auth：开箱即用的邮箱/社交登录，5 分钟接入
-
Database：Postgres 加自动生成的 RESTful API 和 GraphQL
-
Storage：文件上传，配合 RLS（行级安全）做权限控制
-
Realtime：实时数据订阅，做协作类功能特别好使
对于 Vibe Coding 场景，Supabase 的优势是可以描述给 AI。你只需要说「用 Supabase 创建一个 users 表」，Claude 就能直接写出完整的数据库迁移和 API 调用代码。
Supabase有免费额度免费的500 MB 空间，基本上能满足对产品的验证，平时用到的三方登录，忘记密码，注册等等一键完成，直接跳过写后端接口的流程。
Resend：开发者的邮件服务
很多产品都绕不开邮件：注册验证码、密码重置、通知提醒……但搭建邮件系统是个坑——DKIM、SPF、DMARC 配置不当，你的邮件直接进垃圾箱。
Resend 把这件事简化到了极致：几行代码就能发邮件，自带漂亮的模板编辑器，而且 API 设计得特别优雅。
// 就这么简单
await resend.emails.send({
from: 'noreply@yourdomain.com',
to: 'user@example.com',
subject: '验证你的邮箱',
html: '<h1>点击下方按钮验证</h1>'
})
配合 Supabase Auth 使用，整个用户注册流程可以做到 10 分钟内跑通，需要注意的是，这里需要一个域名，所以去注册一个域名，在国内厂商注册便宜极了，新用户39送个域名+1年的乞版服务器，用来学习运维和学习服务器的知识完全够了，可以自己尝试部署服务，配置证书等等，不行养个龙虾也是极好的。
每月提供3,000 封免費額度完全够用！！
🚀 Vercel：零配置部署
项目写完了，怎么上线？以前这是最烦的环节：配服务器、装 Nginx、搞 SSL 证书、配置 CI/CD……
Vercel 让这一切消失了。git push，完事。
它对 Next.js 的支持是最好的（毕竟是同一个公司），但同样支持其他框架。几个让我离不开的功能：
-
Preview 部署：每个 PR 自动生成预览链接，代码审查直接看效果
-
Edge Functions：全球边缘节点运行，响应速度快
-
Serverless：不需要管服务器，按需扩缩容
在 Vibe Coding 工作流里，Vercel 的角色是部署即确认——改完代码推上去，几秒钟就能验证线上效果。这种即时反馈循环对「感觉着编程」非常重要。
Vercel也支持自定义域名，添加一些解析就可以。
✏️ Pencil：在代码里做设计
这是一个被严重低估的工具。
传统的工作流是设计师在 Figma 里画图，开发者再看图还原代码。这个过程存在巨大的信息损耗——颜色差一点、间距差一点、动效还原不了……
Pencil 的思路完全不同：它直接在 VS Code 里工作。你在代码旁边画设计稿，然后一键生成代码。设计和开发不再割裂。
对于一个人干全栈的 Vibe Coding 场景，这个工具简直是神器——你不需要精通设计，也不需要在 Figma 和编辑器之间反复切换。想法有了，直接在代码环境里可视化，然后落地。
🐙 GitHub：代码的命脉
这个不需要多介绍，但我想强调一点：在 Vibe Coding 时代，GitHub 的角色比以前更重要了。
当你的大部分代码都是 AI 生成的，版本控制就是你的安全网。每次 AI 做出的改动都可能引入意想不到的问题。git diff 让你能快速审查 AI 的每一次改动，git revert 让你随时可以回滚。
另外，GitHub Copilot 和 GitHub Actions 也已经深度融入了我的工作流。Copilot 做日常补全，Actions 自动化测试和部署。
这些工具怎么协同？
说完了单个工具，更重要的是它们怎么串起来。我的典型工作流是这样的：
1. Claude 分析需求，输出技术方案
2. Pencil 快速出 UI 原型（如果有需要）
3. Claude 根据方案生成代码
4. Supabase 搭建后端（数据库 + Auth + API）
5. Resend 接入邮件服务
6. Vercel 一键部署
7. GitHub 管理版本，记录每次迭代
整个链路的重点是：每一环都可以用自然语言驱动。你不需要手写数据库查询，不需要手配 Nginx，不需要从零搭邮件服务。你只需要说清楚「我要什么」，AI + 工具帮你搞定「怎么做」。
这就是 Vibe Coding 的本质——把精力从「如何实现」释放到「要实现什么」。
最主要的是几乎全部免费！！！！直接让你的
一点个人体会
这套工具箱不是一开始就凑齐的。它是在做了一个又一个项目的过程中，逐渐打磨出来的。
如果你刚开始尝试 Vibe Coding，我的建议是：
-
先选一个 AI 编程工具（Claude 目前最佳）
-
后端直接上 Supabase，别自己搭
-
部署用 Vercel，别折腾服务器
-
其他工具按需添加
不要追求工具齐全，追求快速做出第一个能用的东西。工具会在实践中自己找到你。
AI时代缺少的不是技能，是想法，和快速验证想法的行动力
有本书叫《人人都是产品经理》，这下真的是了，人人都是产品经理。
*这套工具的完整链接清单，我整理在了 LinkHub[# Vibe Coding Tools
](linkhub.ai-explorer.cn/zh/collecti…) 上，有需要的自取。*，这是我第一个做的产品，后面会专门出一片文章，来讲解一下这个项目，欢迎使用，有想法的可以给我留言。
我是 Isaac，一个在用 AI 改变开发方式的全栈开发者。如果你也对 Vibe Coding 感兴趣，欢迎交流。
