Vibe Coding 入门教程
发布时间:2026-09-30 | 浏览:1
Vibe Coding(氛围编程)是一种全新的编程范式,我们不需要一行行手写代码,而是用自然语言描述你想要什么,AI 来写代码、我们负责审查和把控方向。
Vibe Coding 教程参考: https://www.runoob.com/vibe-coding/vibe-coding-tutorial.html
什么是 Vibe Coding
Vibe Coding 一词由前特斯拉 AI 总监、OpenAI 联合创始人 Andrej Karpathy 在 2025 年 2 月首次提出。
他用一句话概括了这种全新的编程方式:
「I just vibe. I don't even touch the keyboard sometimes. I just talk to the AI, it writes the code, I review it, and we iterate.」
翻译过来就是:你只管描述你的「感觉」,AI 来写代码,你审查,然后来回迭代。
简单来说,Vibe Coding 就是:你用人话告诉 AI 你想要什么功能,AI 帮你把代码写出来,不需要纠结语法细节、不需要记忆 API 参数、不需要手动调试每一个错误——这些都由 AI 来处理。
我们的角色从「写代码的人」转变为「描述需求的人」,或者说——从程序员变成了产品经理+架构师。
Vibe Coding 不是让 AI 替代你思考,而是让 AI 处理低价值的重复劳动,让你专注于更有创造性的部分:理解问题、设计架构、验证结果。
Vibe Coding vs 传统编程
理解 Vibe Coding 与传统的编程方式有什么不同,有助于你更好地使用它。
为什么现在可以 Vibe Coding
Vibe Coding 之所以在 2025 年成为可能,是因为几个关键条件的成熟。
GPT-5.5、Claude 5、Gemini 等模型在代码生成方面的准确率大幅提升。
它们不仅能写出语法正确的代码,还能理解项目上下文、遵循最佳实践、处理边界情况。
更重要的是,它们可以处理超长上下文——一次性阅读整个项目,理解你的代码库结构。
Cursor、Claude Code、GitHub Copilot、Windsurf 等工具将 AI 能力深度集成到了开发流程中。
这些工具不仅能补全代码,还能直接修改文件、运行终端命令、搜索代码库——像一个真正的开发者一样工作。
Agent 模式的工具可以自主执行多步骤任务:读取文件、编写代码、运行测试、根据测试结果修复错误。
你只需要下达一个初始指令,Agent 会自己循环迭代直到任务完成。
以下是目前最主流的 Vibe Coding 工具,各有侧重。
如果你是第一次接触 Vibe Coding,可以先使用国内的 Qoder 或 Trae 开始,操作类似 VS Code,学习曲线最平缓,且不会改变你熟悉的编辑器环境。
下面以 Claude Code(终端 CLI) 为例,展示 Vibe Coding 的典型工作流。
Claude Code 完整教程参考: https://www.runoob.com/claude-code/claude-code-tutorial.html
第一个项目:Hello, Vibe World!
目标: 用 5 分钟,通过纯自然语言,让 Claude Code 帮你创建一个个人名片网页。
第二步:向 Claude 描述你想要的东西
在 Claude Code 的交互界面中,输入:
第三步:观察 Claude 工作
你会看到 Claude Code 自动:
Claude Code 会直接修改文件,无需你碰任何代码。
Vibe Coding 核心工作流
Vibe Coding 的核心工作流可以概括为四个步骤:描述、审查、迭代、交付。
用自然语言告诉 Claude Code 你想要什么。
不需要写代码,不需要说技术细节,说清楚「做什么」即可。
Claude Code 收到后会自己规划文件结构、生成代码、安装依赖、运行测试。
Claude Code 生成代码后,会展示所有改动(Diff)供你审查。
这是 Vibe Coding 中最重要的环节——你必须看懂 AI 改了什么。
审查不是为了找茬,而是确保你理解每一行代码在做什么。如果你看不懂某段代码,直接问 Claude Code:「这段代码是什么意思?为什么要这样写?」
审查发现问题后,用自然语言描述你想要的修改。
每次迭代后,Claude Code 会重新生成代码并展示 Diff,你再次审查,直到满意为止。
当所有功能符合预期且测试通过后,提交代码。
Claude Code 会帮你写好 commit message 并提交:
实战演示:用 Claude Code 从零构建一个 Todo 应用
下面通过一个完整的实战案例,演示 Vibe Coding 的整个流程。
我们将用 Claude Code 从零构建一个包含前端页面和后端 API 的 Todo 应用。
在终端中创建项目目录并启动 Claude Code:
然后向 Claude Code 描述你的需求:
第二步:Claude Code 做了什么
Claude Code 收到需求后,自动完成了以下步骤:
然后生成后端代码,以下是 app.py 的核心内容:
还有数据库模型 models.py:
Claude Code 展示 Diff 后,你逐行审查。
你可能会发现一些问题并提出修改意见。
例如,你注意到 API 路由没有统一前缀,提出修改:
Claude Code 会自动修改所有路由,你再次审查通过。
审查通过后,让 Claude Code 启动应用并测试:
打开浏览器访问 http://127.0.0.1:5000,可以看到完整的 Todo 应用界面。
所有功能验证通过后,提交代码:
整个实战过程,你一行代码都没有手动写。你做的事情是:描述需求、审查 Diff、描述修改、运行测试、提交代码。这就是 Vibe Coding 的核心体验。
Vibe Coding 的效果很大程度上取决于你如何描述需求。
好的提示词能让 AI 一次生成接近预期的代码,减少迭代次数。
一个高质量的提示词应该包含四个要素:
提示词的核心原则:越具体,结果越好。模糊的需求只会得到模糊的代码。
误区一:AI 可以替代所有编程知识
Vibe Coding 降低了编程门槛,但没有消除门槛。
我们仍然需要理解基本概念:变量、函数、API、数据库、HTTP、异步等,否则无法判断 AI 生成的代码是否正确,也无法有效地描述需求。
不要把整个产品的 PRD 文档复制给 AI,期望它一次性生成完美代码。
AI 的注意力有上限,需求越多越容易出错。
更有效的方式是:核心功能 → 验证 → 添加功能 → 验证 → 继续迭代。
有些开发者拿到 AI 生成的代码后直接合入,这是非常危险的。
AI 可能会引入安全漏洞、性能问题、或者完全不合理的架构。
我们至少需要快速浏览一遍关键逻辑,确保没有明显问题。
敏感信息(API 密钥、数据库密码)不要直接写在对话里——先在代码中用环境变量占位,再手动填入
每次关键修改后提交 Git,方便出问题时回滚
AI 生成的代码可能不符合你团队的编码规范,需要手动调整
对于需要高可靠性的代码(支付、认证、数据处理),AI 生成后务必人工审查
适合 Vibe Coding 的场景
Vibe Coding 并非万能,了解什么场景适合它能帮你更好地分配精力。
Python / 数据科学 Python 教程 Python2.x 教程 FastAPI 教程 Flask 教程 Django 教程 NumPy 教程 Pandas 教程 SciPy 教程 Matplotlib 教程 Dash 教程 Jupyter Notebook 教程 Pillow 教程 量化交易 R 教程 Julia 教程
Jupyter Notebook 教程
AI / 智能开发 AI Agent(智能体) AI(人工智能) Codex 教程 Vibe Coding 教程 Claude Code OpenCode Skills(技能) Ollama 教程 Hermes Agent DeepSeek Harness Pi Agent AI 数学基础 TensorFlow 教程 PyTorch 教程 Scikit-learn 教程 机器 教程 LangChain 自然语言处理 NLP OpenCV 教程 Selenium 教程 Playwright 教程
DeepSeek Harness
Scikit-learn 教程
前端开发 HTML 教程 HTML5 教程 CSS 教程 CSS3 教程 JavaScript 教程 HTML DOM 教程 TypeScript 教程 AJAX 教程 JSON 教程 Tailwind CSS 教程 Bootstrap4 教程 Bootstrap5 教程 Foundation 教程 Vue.js 教程 Vue3 教程 React 教程 Next.js 教程 AngularJS 教程 Angular 教程 jQuery 教程 jQuery UI 教程 jQuery EasyUI 教程 ECharts 教程 Chart.js 教程 Highcharts 教程 Google 地图 教程 SVG 教程 Font Awesome 教程
Tailwind CSS 教程
jQuery EasyUI 教程
Font Awesome 教程
后端开发 Node.js 教程 Electron 教程 PHP 教程 Java 教程 Go 教程 Rust 教程 C# 教程 Servlet 教程 JSP 教程 ASP 教程 AppML 教程 VBScript 教程 Swagger 教程 RESTful API 教程 Docker 教程 Linux 教程 ZooKeeper 教程
数据库 SQL 教程 MySQL 教程 PostgreSQL 教程 SQLite 教程 MongoDB 教程 Redis 教程 Memcached 教程
移动开发 Android 教程 Flutter 教程 Ionic 教程 jQuery Mobile 教程 Swift 教程 Kotlin 教程
jQuery Mobile 教程
DevOps / 工程化 Git 教程 SVN 教程 CMake 教程 Maven 教程 VS Code 教程 Obsidian 教程 PyCharm 教程 Eclipse 教程 Markdown 教程 LaTeX 教程
编程语言 C 教程 C++ 教程 Zig 教程 Scala 教程 Ruby 教程 Perl 教程 Lua 教程 Dart 教程 汇编语言 教程 Verilog 教程
计算机基础 计算机组成原理 数据结构与算法 C 语言数据结构与算法 设计模式 Python 设计模式 正则表达式 HTTP 教程 TCP/IP 教程 网络协议 W3C 教程
XML / Web Service XML 教程 DTD 教程 XML DOM 教程 XSLT 教程 XPath 教程 XQuery 教程 XLink 教程 XPointer 教程 XML Schema 教程 XSL-FO 教程 Web Service 教程 WSDL 教程 SOAP 教程 RSS 教程 RDF 教程
.NET ASP.NET 教程 MVC 教程 Razor 教程 Web Forms 教程 Web Pages 教程 PowerShell 教程
网站建设 网站建设指南 浏览器信息 网站主机教程 网站品质