一句话定义
Vibe Coding 是一种全新的编程方式：你不再需要手写每一行代码，而是用自然语言描述你想要什么，AI 帮你生成代码。
“像跟朋友聊天一样告诉 AI 你想要什么网站，它帮你写代码”
——你不用学编程语言，AI 替你当程序员，你当产品经理。
它到底怎么工作？
Vibe Coding 的工作流程只有三个步骤，循环迭代：
第一步：你描述需求
打开 AI 编程助手，用日常说话的方式告诉它你想要什么：
"帮我做一个个人博客网站，首页展示最新的 3 篇文章，
导航栏有首页、关于我、博客、联系四个页面。
颜色用深蓝和白色，风格简洁现代。"不需要使用任何专业术语，不需要知道 HTML、CSS、JavaScript 是什么。就像你跟设计师描述想法一样。
第二步：AI 生成代码
AI 收到你的描述后，会自动生成完整的网页代码。它会在几秒钟内写出：
- HTML — 网页的结构（标题在哪、图片在哪、导航栏在哪）
- CSS — 网页的样式（颜色、字体、间距、动画）
- JavaScript — 网页的交互（点击按钮弹出菜单、表单提交）
💡 你不需要理解这些代码。你只需要在浏览器中看效果。
第三步：你验收并提出修改
在浏览器中打开 AI 生成的网页，看看是不是你想要的。然后告诉 AI：
"导航栏的字有点大，改小一点。首页的图片换成三列布局。
联系方式下面加一个表单。"AI 会根据你的反馈修改代码。你可以在同一个对话中反复迭代，直到满意为止。这就是”Vibe Coding”中的”Vibe”（心流/氛围）——你和 AI 之间形成一种流畅的创作节奏。
一个真实例子
假设你想做一个摄影作品展示网站：
| 轮次 | 你说的话 | AI 做的事 |
|---|---|---|
| 第 1 轮 | ”帮我做一个摄影作品展示网站” | 生成一个基础首页，带导航栏、大图展示区、页脚 |
| 第 2 轮 | ”作品集页面用瀑布流布局，照片分三类：人像、风景、婚礼” | 修改作品集页面，添加分类筛选按钮和瀑布流 |
| 第 3 轮 | ”加一个联系页面，有预约表单” | 生成联系表单，配置 Formspree 接收提交 |
| 第 4 轮 | ”手机上看导航栏不好点，改一下” | 添加响应式设计，手机端用汉堡菜单 |
整个过程不超过 30 分钟，你一个字代码都没写。
跟传统编程有什么区别？
传统方式
学 HTML → 学 CSS → 学 JavaScript → 学框架 → 学部署 → 上线
（耗时：3~12 个月）每一环都需要花大量时间学习。语法错了页面就空白，js 报错就功能失效。
Vibe Coding 方式
描述需求 → AI 生成 → 预览 → 提修改意见 → AI 修改 → 部署上线
（耗时：1~4 小时）AI 负责技术实现，你负责创意和决策。就像你请了一个程序员帮你干活——只不过这个程序员是 AI。
具体对比
| 方面 | 传统编程 | Vibe Coding |
|---|---|---|
| 入门门槛 | 需要学语法、框架、工具链 | 会打字、会描述需求就行 |
| 学习时间 | 3~12 个月才能做网站 | 1 小时就能上手 |
| 可控性 | 完全可控，想怎么改就怎么改 | 依赖 AI 的理解能力，需要反复沟通 |
| 适合的项目 | 复杂应用、大型系统 | 个人网站 → 企业官网 → 带后端的完整应用，逐步进阶 |
| 成本 | 人力成本高 | 用 AI 免费额度即可 |
| 修改方式 | 自己找到代码位置手动改 | 告诉 AI 想改什么 |
你能做出什么样的网站？
Vibe Coding 能做很多种网站。以下是一些常见类型：
| 网站类型 | 难度 | 预计用时 | 说明 |
|---|---|---|---|
| 个人作品集 / 简历站 | ⭐ | 1~2 小时 | 纯前端，最适合入门 |
| 摄影 / 设计作品展示 | ⭐ | 2~3 小时 | 纯前端 + 图片展示，效果惊艳 |
| 个人博客 | ⭐⭐ | 3~4 小时 | 可纯前端，也可加后台管理 |
| 小型企业官网 | ⭐⭐ | 3~6 小时 | 前端展示 + 联系表单 |
| 电商产品展示页 | ⭐⭐⭐ | 4~8 小时 | 产品列表 + 详情页 + 购物车（用 AI 写前后端接口） |
| 在线预约系统 | ⭐⭐⭐ | 6~12 小时 | 日历选择 + 表单提交 + 后台管理，AI 帮你写 API |
| 社交 / 社区网站 | ⭐⭐⭐⭐ | 数天到数周 | 用户系统 + 发帖 + 评论，需要数据库和 API，Vibe Coding + BaaS 可以做到 |
💡 建议：从一个最简单的单页网站开始，体验完整个流程后，再逐步尝试更复杂的项目。
需要准备什么？
要在 Vibe Coding 建站，你只需要：
必备
| 项目 | 说明 |
|---|---|
| 一台电脑 | Windows / Mac 都可以，能上网就行 |
| 一个浏览器 | 推荐 Chrome，因为它有最好用的开发者工具 |
| 一个 AI 编程助手 | Claude Code（本指南使用的）、Cursor、或其他 AI 工具 |
| 一个愿意尝试的心态 | 不需要完美主义，做出来比做完美重要 |
推荐（但不强制）
| 项目 | 说明 |
|---|---|
| VS Code | 免费的代码编辑器，AI 生成代码后用来查看和保存 |
| GitHub 账号 | 免费，用来存放代码 |
| Vercel 账号 | 免费，用来把网站部署到互联网 |
✅ 以上所有工具都有免费版，本指南会一步一步教你怎么用。
Vibe Coding 的核心理念
你不需要理解代码
这是最难接受但最重要的一点。你不需要知道 HTML 标签、CSS 属性、JavaScript 函数。你只需要：
- 想清楚你要什么
- 用大白话告诉 AI
- 在浏览器里看效果
- 不满意就让它改
AI 是你的协作者，不是你的替代者
你把 AI 想象成一个不会累、脾气好、随叫随到的实习生：
- 你告诉它做什么
- 它做出来给你看
- 你觉得不行就让它重做
- 它不会抱怨，不会嫌你烦
迭代比完美更重要
第一版做到 80 分就够了：
- 先让 AI 生成一个基础版本
- 预览、提修改意见、再生成
- 每次只改 1~3 个点
- 满意了就部署上线
- 上线后还能继续优化
“先完成，再完美”——这是 Vibe Coding 的核心心法。
你现在已经准备好了
读完这一页，你已经理解了 Vibe Coding 的核心概念。接下来：
- 想要先了解背景？ → 读一读为什么现在 AI 编程突然变得这么强
- 有一些顾虑？ → 看看常见误区澄清，打消你的担心
- 想直接开干？ → 跳到阶段 0：环境搭建，开始动手