当前位置: 首页 > news >正文

Vibe Coding 完整教程:从入门到进阶工作流

发布日期:2026-05-17 | 适用工具:Claude Code、Cursor、Lovable、Google AI Studio

vibe-coding-教程-img1


什么是 Vibe Coding?

Vibe Coding 是一种用自然语言驱动 AI 生成代码的编程方式,由 OpenAI 联合创始人、AI 研究员 Andrej Karpathy2025 年 2 月正式提出。他的原话是:

"fully give in to the vibes, embrace exponentials, and forget that the code even exists"

核心理念可以归结为三个动词:见(see stuff)→ 说(say stuff)→ 跑(run stuff)。开发者不再逐行写代码,而是用自然语言描述需求,由 LLM 生成实现,再通过反馈循环迭代。

这不只是"让 AI 帮你写代码"——它代表了一种工作范式的切换:你从编码者变成需求描述者和质量审核者


Vibe Coding vs 传统编程:你真正需要知道的差异

维度 Vibe Coding 传统编程
上手门槛 极低,非程序员可用 需系统学习语言和框架
原型速度 极快(数小时出 MVP) 慢,但稳定
代码理解度 开发者可能不理解生成的代码 完全掌握
可维护性 差,易积累技术债
安全风险 安全漏洞出现概率高约 2.74 倍 相对可控
代码重复量 约是传统编程的 4 倍 可控

有一个反直觉的研究结论值得注意:有经验的开发者在使用 AI 编程工具后,实际生产效率慢了 19%,尽管他们预期会快 24%。原因是他们花了大量时间审查和修复 AI 生成的代码。

Vibe Coding 最适合的场景:快速验证创意的原型、周末个人项目、前端页面和小工具;不适合的场景:金融/医疗等高安全性系统、多人协作的大型代码库。


工具全览:2026 年 Vibe Coding 主流工具组合

vibe-coding-教程-img2

核心 AI 编程工具

工具 定位 适合人群
Claude Code 终端 AI 编程助手,深度代码库理解 有一定技术基础的开发者
Cursor AI 增强 IDE,基于 VSCode 习惯 IDE 工作流的开发者
Lovable 网页端,从描述直接生成全栈应用 非技术创始人/产品经理
Google AI Studio 多模态,支持图片转代码 快速原型
Windsurf 深度上下文理解的 IDE 大型项目重构

推荐工具组合

入门组合(零代码用户):Lovable + ChatGPT/Claude.ai
进阶组合(有技术背景):Claude Code + GitHub + Cursor
企业组合(团队协作):Claude Code + Git Worktrees + CI 自动化

Claude Code 支持通过兼容 OpenAI 协议的 API 接入,七牛云 AI 平台提供了统一的 API Key,可同时调用 Claude、DeepSeek、Kimi 等多个模型,适合在不同任务中灵活切换模型。


完整工作流:4 步从需求到代码

这是 Anthropic 官方 Claude Code 最佳实践文档中推荐的核心工作流,也是目前被验证最有效的 Vibe Coding 流程。

第 1 步:探索(Explore)

用计划模式(Plan Mode)让 AI 先读代码、不动文件:

(进入 Plan Mode)
读取 /src/auth 目录,理解我们如何处理用户登录和会话。
同时查看环境变量的配置方式。

这一步的目的是让 AI 建立上下文,而不是让它立刻动手。跳过这一步是初学者最常犯的错误

第 2 步:规划(Plan)

让 AI 生成详细的实施计划,明确哪些文件需要改动:

(仍在 Plan Mode)
我想添加 Google OAuth 登录。需要改哪些文件?
会话流程是什么?请生成一个实施计划。

对于复杂功能,可以让 AI 主动采访你——这是一个被低估的技巧:

我想构建[简要描述]。用 AskUserQuestion 工具采访我。
问技术实现、UI/UX、边界情况和权衡。不要问显而易见的问题,
深挖我没想到的难点。把最终结论写成 SPEC.md。

第 3 步:实现(Implement)

退出 Plan Mode,让 AI 按计划编码,同时提供验证标准

按照你的计划实现 OAuth 流程。
为 callback handler 写测试,运行测试套件并修复失败项。

提供验证标准是提升质量最有效的单一动作。没有验证标准,AI 可能生成"看起来对但实际跑不通"的代码。

验证方式 示例
测试用例 "写 validateEmail 函数,用例:user@example.com → true,invalid → false"
截图对比 "截图当前效果,与目标设计图对比,列出差异并修复"
命令输出 "修复后运行 npm run build,确认无报错"

第 4 步:提交(Commit)

写一条描述性 commit message 并提交,创建 PR。

CLAUDE.md:Vibe Coding 的核心配置文件

CLAUDE.md 是 Claude Code 每次会话开始时自动读取的文件,相当于给 AI 的"项目说明书"。这是让 Vibe Coding 可持续的最重要配置

运行 /init 可以自动生成一个基础版本,然后手动精炼。

有效的 CLAUDE.md 示例

# 代码风格
- 使用 ES modules (import/export),不用 CommonJS (require)
- 尽量解构导入:import { foo } from 'bar'# 工作流
- 修改一系列文件后,必须运行 typecheck
- 优先运行单个测试,不跑整个测试套件(性能原因)# 项目约定
- API 路由统一前缀 /api/v1/
- 数据库操作必须走 /src/db 层,不直接调用 ORM

什么该写,什么不该写

✅ 写进去 ❌ 不要写
AI 猜不到的 Bash 命令 AI 能从代码里读出来的内容
与默认值不同的代码风格 标准语言规范
测试工具和运行方式 详细的 API 文档(给链接)
项目特有的架构决策 每个文件的功能描述

关键原则:CLAUDE.md 越短越好。文件太长会让 AI 忽略其中一半规则。如果某条规则不写 AI 也能做对,就删掉它。


Prompt 技巧:5 个让生成质量翻倍的写法

1. 具体化:指定文件、场景、偏好

❌ "给 foo.py 加测试"
✅ "给 foo.py 写一个测试,覆盖用户未登录时的边界情况,不用 mock"

2. 给出参照:指向已有的代码模式

❌ "加一个日历组件"
✅ "看 HotDogWidget.php 理解组件模式,按同样的结构实现日历组件,只用项目已有的库"

3. 描述症状,而非命令修复

❌ "修复登录 bug"
✅ "用户反映 session 超时后登录失败,检查 src/auth/ 的 token 刷新逻辑,写一个能复现问题的 failing test,再修复它"

4. 用 @ 引用文件,不要描述路径

❌ "看看认证模块的文件"
✅ "@src/auth/session.ts 这里的 token 刷新逻辑是否有竞态条件?"

5. 让 AI 自己获取上下文

用 'gh issue view 1234' 了解这个 issue 的细节,然后修复它,写测试,创建 PR。

常见坑点:Vibe Coding 的典型失败模式

坑 1:厨房水槽式会话

一个会话里先做功能 A,然后问无关问题,再回来做 A。上下文里全是噪音。
解法:不同任务之间用 /clear 重置上下文。

坑 2:反复纠正却越改越错

AI 做错了,纠正,还是错,再纠正。上下文里充满了失败案例。
解法:纠正超过 2 次就 /clear,重新用包含教训的更好 prompt 开始。

坑 3:CLAUDE.md 写太长

规则太多,AI 只执行前一半。
解法:每条规则问自己:"不写这条,AI 会犯错吗?"不会就删掉。

坑 4:"vibe coding 宿醉"

初期产出飞快,几周后代码结构混乱,维护成本急剧上升。
解法:从一开始就建立 CLAUDE.md 和测试体系,定期用 AI 做代码审查。

坑 5:信任而不验证

AI 生成了看起来合理的代码,但没有边界情况处理。
解法:永远提供验证标准。如果无法验证,就不发布。


进阶:从 Vibe Coding 到 Agentic Engineering

GitHub 上热度最高的 Vibe Coding 资源(shanraisshan/claude-code-best-practice,53.4k ⭐)的副标题就是 "from vibe coding to agentic engineering"。这是整个社区的演进方向。

两者的核心区别:

Vibe Coding Agentic Engineering
驱动方式 感性描述,即兴迭代 规格文档驱动,有明确验证标准
AI 角色 执行者 自主 Agent,可分解子任务
验证方式 手动看效果 自动化测试、CI 流水线
适用规模 个人项目、原型 团队协作、生产系统

进阶的关键步骤是引入 Spec-Driven Development(规格驱动开发):先写 SPEC.md,再让 AI 按规格实现,最后自动验证。这解决了纯 vibe coding 可维护性差的核心问题。


FAQ

Q:Vibe Coding 适合完全没有编程基础的人吗?
A:适合用于小项目和原型,工具如 Lovable 和 bolt.new 几乎不需要技术背景。但对于需要长期维护的产品,完全不懂代码会在调试和部署阶段遇到障碍。建议同步学习基础概念。

Q:如何避免 AI 生成的代码有安全漏洞?
A:研究显示 AI 生成代码的安全漏洞概率约是手写代码的 2.74 倍。实践上:1)用子 Agent 专门做安全审查;2)安全敏感模块必须人工审核;3)配置 CLAUDE.md 明确禁止不安全的模式(如直接拼接 SQL)。

Q:Claude Code 和 Cursor 应该选哪个?
A:两者定位不同。Cursor 更像 AI 增强的 IDE,适合在编辑器里工作的人;Claude Code 是终端工具,擅长跨文件的复杂任务和自动化脚本。很多开发者两个都用:日常编辑用 Cursor,复杂重构或 CI 集成用 Claude Code。

Q:如何管理 Vibe Coding 项目的技术债?
A:定期开一个新会话,让 AI 做代码审查并输出重构建议;用 /init 更新 CLAUDE.md 捕获新的约定;引入测试覆盖率门槛。核心是把 AI 也用于维护,而不只是生成。


总结

Vibe Coding 不是"懒人编程",而是一种将开发者认知资源从实现细节转移到需求定义和质量验证的工作方式。它的上限取决于你能否提供清晰的意图、有效的验证标准,以及持续管理 AI 的上下文。

从 Andrej Karpathy 于 2025 年 2 月提出这个概念,到如今 GitHub 上最热门的相关项目已超过 53k 星,Vibe Coding 社区的方向正在从"感性编程"向"工程化 Agent 协作"演进。先学会用好这套工作流,是进入下一阶段的基础。

本文核心工作流来源:Anthropic Claude Code 官方最佳实践(2026 年 5 月版本)。


参考资源

  • Andrej Karpathy 原推(2025 年 2 月)
  • claude-code-best-practice:https://github.com/shanraisshan/claude-code-best-practice(53.4k ⭐)
  • awesome-vibe-coding:https://github.com/filipecalegario/awesome-vibe-coding
  • 七牛云 AI 多模型 API:https://portal.qiniu.com/ai-inference/api-key
http://www.jsqmd.com/news/835134/

相关文章:

  • 2026湖州卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026年北京爱彼回收推荐|皇家橡树/离岸型变现,本地靠谱商家实时报价 - 奢侈品回收测评
  • 2026阜新卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • [T.14] 团队项目:Alpha 阶段项目总结
  • 2026鞍山卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026大庆卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026巴彦淖尔卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026衢州卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 【EF Core】继承策略——TPH
  • 家庭教育指导师报考呼和浩特正规机构推荐:报名入口、官方授权机构推荐 - 优选机构推荐
  • 2026辽阳卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026辽源卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026松原卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • FeedSpot上订阅英语口语Podcast
  • 2026抚顺卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026盘锦卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026年最新12款降AI工具亲测推荐(含免费工具):论文降AIGC指南 - 降AI实验室
  • 2026承德卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • JVM 调优实战:G1GC 日志分析指南
  • 2026伊春卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 栅格tif数据拼接
  • 2026沧州卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026通化卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 青岛焦虑抑郁就医指南:医疗机构信息整理 - 品牌排行榜
  • 2026铁岭卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 蛙趣拼文素材库:让 AI 写出来的文字少一点“机器味”
  • 2026白城卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 2026赤峰卫生间免砸砖防水、外墙、地下室、楼顶渗漏+彩钢瓦、阳光房隔热 本地专业防水公司TOP5权威推荐(2026年5月本地最新深度调研) - 防水百科
  • 个人博客第七天
  • 项目复盘不是追责会:有价值的复盘方法 - 众智商学院职业教育