Vibe Coding

第一章：什么是 Vibe Coding

1.1 Vibe Coding 的定义

Vibe Coding 是一种以自然语言、迭代反馈和 AI 工具为核心的软件开发方式。

传统开发中，我们通常这样工作：

人写需求
人设计架构
人写代码
人调试
人部署上线

而在 Vibe Coding 中，流程变成：

人描述目标
AI 帮助拆解任务
AI 生成代码或方案
人审查、测试、反馈
AI 继续修改
人做最终判断与交付

这里的关键不是“AI 替代人”，而是“人和 AI 形成开发搭档”。

1.2 一个生活化例子

假设你想做一个“个人记账小程序”。

传统写法可能是：

text

我需要先想数据库表怎么设计，再写前端页面，再写后端接口，再调登录，再处理图表，再部署。

Vibe Coding 的做法可能是：

text

我想做一个个人记账应用，支持记录收入支出、按月份统计、分类饼图、导出 CSV。
请先帮我拆解基础功能，并给出前后端技术方案。

AI 可以先输出：

用户角色
页面清单
数据表设计
API 设计
开发步骤
风险点
测试用例

然后你再逐步让它实现。

1.3 Vibe Coding 的核心能力

Vibe Coding 不是只会写 Prompt。它至少包括以下几种能力：

表达能力：能把需求说清楚
拆解能力：能把大目标拆成小任务
判断能力：能判断 AI 方案是否靠谱
调试能力：能定位问题并持续修正
承担责任的能力: 能保证项目可运行、可维护、可上线
对外沟通的能力: 能够对外阐述、沟通、协商当前项目的相关情况

1.4 常见误区

误区一：Vibe Coding 等于不会代码也能做一切

不完全是。AI 可以降低入门门槛，但如果完全不理解代码，很容易出现：

项目跑不起来
Bug 不知道从哪里来
AI 改坏已有功能
部署失败
安全漏洞

误区二：Prompt 写得越长越好

不是越长越好，而是越清楚越好。

坏例子：

text

帮我做一个牛逼的网站。

好例子：

text

帮我做一个课程报名网站，目标用户是想学习 AI 编程的大学生。
需要包含首页、课程列表、课程详情、报名表单、后台报名记录页。
技术栈使用 Next.js + Tailwind CSS，先实现前端静态页面，不接数据库。

误区三：AI 生成的代码可以直接相信

AI 很强，但它会犯错。人类必须负责：

验证功能
审查代码
检查安全
控制范围
做最终决策

第二章：AI 编程工具全景

工具	适合场景	特点
Codex	终端开发、代码库修改、自动化任务	更像一个工程搭档，可以读项目、改文件、跑命令
Cursor	IDE 内编码、补全、重构、聊天	对新手友好，适合边看代码边对话
Claude Code	长上下文项目分析、Agent 工作流	适合复杂项目理解与修改
GitHub Copilot	日常补全、函数生成	融入传统 IDE 工作流

第三章：Cursor 的配置与应用

3.1 Cursor 的优势

Cursor 是面向开发者的 AI IDE，适合边写代码边和 AI 交流。

它的优势是：

学习成本低
对代码上下文理解较好
适合局部修改
适合解释代码
适合生成页面、组件、函数

3.2 Cursor 的安装配置

3.2.1 安装

直接访问 Cursor 官方网站（https://cursor.com/cn/），点击页面上的 “Download for Windows”。

然后双击安装，和一般的软件安装没有太大区别。

3.2.2注册账号

需要去官网注册账号（科学）

略

3.2.3 网络配置（必须）

修改网络适配模式为http/1.1

3.2.4 CodingPlan的购买

可以选择需要的套餐进行购买。

在国内可以使用支付宝付款，注意会自动按月扣款。

3.2.5 查看使用情况

3.3 cursor的使用

3.3.1 对话模式

Cursor 这几个模式可以理解为“同一个 AI，用不同工作权限和思考方式”。

Agent：执行模式。适合让 AI 直接改代码、运行命令、修 bug、补测试、提交实现。它可以读写文件、调用工具，适合“帮我实现/修复/跑一下”。

Plan：规划模式。适合需求还不清楚、改动比较大、需要先讨论方案的时候。它通常先阅读代码、分析影响、给出实施计划，不急着动手改文件。

Debug：调试模式。适合定位问题，比如报错、测试失败、页面异常、接口不通。它会更偏向收集运行证据、看日志、复现问题，再判断根因。

Ask：问答模式。适合只想了解代码、解释概念、查找位置、做只读分析。一般不会改文件，适合“这段代码干什么”“这个功能在哪实现”。

简单选法：

想让它直接干活：选 Agent
想先商量方案：选 Plan
有 bug/报错要查：选 Debug
只想问问题不改代码：选 Ask

3.3.2 选中代码片段或文件

选中代码片段，可以缩小检索范围，提高效率准确性节省token。

3.3.3 提交图片内容

可以把截图内容，直接ctrl+c到对话窗口。

如果有大/长图片，尤其是包含了大量文字的图片，建议先保存称文件，然后用引用文件的方式加载到对话。

3.3.4 生成文件可以回滚

cursor自带轻量的版本管理，可以对生成的文件进行回滚。

可以在文件中按段落回滚或保持。

3.3.5 卡死现象

遇到一些长难复杂的问题时，偶尔会出现卡死。只要出现图中这句话就是没救了不用再等，重新提交或者改写问题。

3.4 总结：

cursor的优势：

一份CodingPlan可以选不同种类的模型基座
有严谨的读写模式控制
自带版本工具
窗口交互性好，可选择代码文件
充值续费方便

缺点：

最低费用也是20美元每月
偶尔会出现卡死

第四章：Codex 的配置与应用

4.1 Codex 是什么

Codex 是OpenAI出品的Vibe Coding CLI 工具。

4.2 Codex 的CLI的安装配置

4.2.1 安装git

并且确保在cmd中可以识别git命令

否则则在环境变量中PATH路径增加git的路径

4.2.2 安装node.js

同一般软件安装，主要是为了使用npm 作为包管理器。

4.2.3一键安装Codex （商家提供方式）

在cmd窗口输入命令：

JSON

npm install -g pumpkinai-config

codex-config

之后输入商家给你的 api key 即可。

4.2.4 手动安装Codex（通用，如果商家方式安装成功则该步跳过）

Bash

#终端输入
npm install -g @openai/codex

#如果无法下载，网络有问题可以用以下命令（关闭魔法）
npm install -g @openai/codex --registry https://registry.npmmirror.com

#验证安装命令
codex --version

修改C:\Users\用户名.codex\config.toml文件：

TOML

model_provider = "codex"
model = "gpt-5.4"
model_reasoning_effort = "high"
disable_response_storage = true

[model_providers.codex]
name = "codex"
base_url = "https://code.ppchat.vip/v1"
wire_api = "responses"
requires_openai_auth = true

修改C:\Users\用户名.codex\auth.json文件：

TOML

{    
    "OPENAI_API_KEY": "sk-xxx"
}

4.2.5 验证

在cmd窗口中输入codex 会显示如下内容（首次可能会询问以下当前路径是否信息）：

4.3 Codex 的VScode 插件配置

在插件中搜索

装好后vscode的右侧会出现一个codex对话窗口

4.4 codingPlan

查询

计费标准

当日剩余额度，当日使用额度 = 模型使用次数*模型配额，但是注意模型使用次数不等于提问次数，codex会自己把一个问题切分成多个子问题进行交互。

4.5 codex的使用

4.5.1 权限

这三种权限可以这样理解：

默认权限
Codex 只在沙箱里工作。
通常可以读项目文件、改工作区内允许修改的文件、运行一部分安全命令。
但一旦要做更敏感的事，比如访问受限目录、联网、启动外部程序、执行可能有风险的命令，就需要你手动确认。
自动审查
是有安全边界，但比“默认权限”更顺一点。
当 Codex 需要更高权限时，会先交给系统自动审核；审核通过就直接执行，不一定每次都打断你手动点确认。
如果自动审核不通过，Codex 还是得换更安全的办法，或者再请你明确授权。
以上两者基本上无法对工作区外的文件做插删改。
完全访问权限
基本相当于把沙箱限制拿掉很多，Codex 可以更自由地访问文件、运行命令，处理事情最快。
但风险也最高，因为它可能修改更多目录、执行更强的操作。

4.5.2 读写模式

在codex中无法通过明确的选项来约束操作是读还是写，因此在提示语中就要更加明确的表明是否要生成为文件。

4.5.3 确定文件

在codex窗口中无法选择具体涉及的文件，如果你不明确说明涉及的文件codex会自动去根据语义在整个目录中寻找。虽然codex一般也能找到，但是会耽误时间浪费token，而且文件太过接近时也会产生歧义。

所以建议在对话中通过相对路径明确涉及的文件。

4.5.4 获取IDE上下文状态

聊天窗口中/ide状态开关，能够允许对话窗口感知vscode的当前打开的文件。

4.5.5 窗口token剩余状态

目前的大模型对于上下文窗口都是有限的，一次持续对话越长窗口剩余量就越小。

当窗口已用量高的时候是非常耗费token和时间的，所以如果已经不需要之前的对话上下文时，尽快切换为新的对话。

4.6 总结

codex的优点：

费用上比较有弹性，第三方商家的提供了多种不同的套餐
几乎不会有任何卡死情况

缺点

一个codingplan只能选择一种模型
对话交互不如cursor的好（没有文件选择、读写选择）
续费麻烦一点

第五章：Skill 的应用

5.1 Skill 是什么

Skill 可以理解为给 AI 准备的一份“专业操作手册”。

普通 Prompt 是一次性的，而 Skill 是可复用的。

例如你经常需要 AI 生成 PRD，就可以创建一个 PRD Skill，里面写清楚：

PRD 的结构
需要问哪些问题
输出格式
验收标准
示例模板

之后每次需要写 PRD，不用重复解释规则。

5.2 Skill 的价值

Skill 的核心价值是把经验沉淀下来。

如果说 Prompt 是“临时沟通”，Skill 就是“团队 SOP”。

适合做成 Skill 的内容包括：

PRD 生成流程
代码 Review 标准
前端页面设计规范
API 文档生成规范
测试用例生成规范
面试题整理规范
周报生成规范

5.3 一个 Skill 示例：代码 Review Skill

假设我们希望 AI 每次 Review 代码时都按照固定标准检查：

markdown

# Code Review Skill

## 检查重点

1. 是否有明显 Bug
2. 是否有安全风险
3. 是否破坏原有功能
4. 是否缺少测试
5. 是否有性能问题
6. 是否存在命名混乱或结构不清晰

## 输出格式

先输出高风险问题，再输出中低风险问题。
每个问题必须包含：

- 文件位置
- 问题说明
- 影响范围
- 修改建议

这样 AI 的输出会稳定很多。

5.4 Skill 课堂练习

练习目标：设计一个“生成面试题”的 Skill。

要求：

输入岗位名称
输入技术方向
输出 10 道基础题
输出 10 道项目题
输出 5 道开放题
每道题附参考答案
标注考察点

示例输入：

text

岗位：前端开发实习生
技术方向：React + Vibe Coding

第六章：Prompt Engineering for Coding

6.1 好 Prompt 的四个要素

一个好的 Coding Prompt 通常包含：

背景：现在在做什么项目
目标：希望 AI 完成什么
约束：不能做什么，必须遵守什么
验证：完成后如何确认正确

模板：

text

背景：我正在做一个【项目类型】，技术栈是【技术栈】。
目标：请帮我完成【具体任务】。
约束：不要修改【范围】，保持【要求】。
验证：完成后请运行【测试/构建】，并说明验证结果。

验证的原理？

6.2 常用 Prompt 模板

需求拆解 Prompt

text

我想做一个【产品名称】，目标用户是【用户群体】。
核心目标是【目标】。
请帮我拆解：
1. 用户角色
2. 使用场景
3. MVP 功能
4. 页面清单
5. 数据对象
6. 开发优先级
7. 潜在风险

技术方案 Prompt

text

请基于以下需求设计技术方案：
【粘贴需求】

请输出：
1. 推荐技术栈
2. 前端结构
3. 后端结构
4. 数据库表设计
5. API 列表
6. 开发里程碑
7. 风险与替代方案

Debug Prompt

text

我遇到了以下报错：
【粘贴报错】

触发步骤：
1. 【步骤一】
2. 【步骤二】

期望结果：【期望】
实际结果：【实际】

请帮我分析可能原因，并给出最小修改方案。

重构 Prompt

text

请重构这部分代码，目标是提升可读性和可维护性。
要求：
1. 不改变现有行为
2. 不修改公开 API
3. 尽量减少改动范围
4. 重构后说明改动点和验证方式

6.3 坏 Prompt 改写练习

坏 Prompt：

text

这个页面太丑了，帮我改好看点。

改写后：

text

请优化当前课程首页的视觉设计。
目标用户是想学习 AI 编程的大学生和职场新人。
风格希望是现代、清爽、有科技感，但不要太花。
请保留现有内容结构，只调整布局、字体层级、颜色、间距和按钮样式。
完成后说明你做了哪些视觉优化。

第七章：Vibe Coding 面试题

7.1 基础认知类

问题 1：你怎么理解 Vibe Coding？

参考回答：

text

我理解的 Vibe Coding 是一种 AI 辅助开发方式。开发者通过自然语言描述目标，AI 帮助完成需求拆解、代码生成、调试和文档整理。
但它不是完全替代程序员，开发者仍然需要负责需求判断、技术选择、代码审查、测试和上线验证。

考察点：

是否理解 AI 是辅助工具
是否知道人类仍需负责判断
是否有工程意识

问题 2：AI 生成代码最大的问题是什么？

参考回答：

text

最大的问题是它可能生成看起来合理但实际有问题的代码，例如遗漏边界情况、引入安全风险、使用不存在的 API 或破坏原有逻辑。
所以我会通过阅读 diff、运行测试、手动验证和 Code Review 来控制风险。

问题 3：Cursor 和 Codex 有什么区别？

参考前面章节

问题 4：你如何写一个好的 Coding Prompt？

参考回答：

text

我通常会包含背景、目标、约束和验证方式。
例如我会说明项目技术栈、要完成的功能、不希望改动的范围，以及完成后需要运行哪些测试。
这样可以减少 AI 自作主张，也方便验证结果。

问题 5：讲一个你用 AI 辅助完成项目的经历。

回答结构：

项目背景
你的目标
AI 参与了哪些环节
你负责哪些关键判断
遇到什么问题
如何解决
最终结果

示例回答：

text

我做过一个课程报名网站。最开始我用 AI 帮我拆解页面和数据结构，然后用 Cursor 生成前端组件，用 Codex 接入报名 API 和后台列表。
过程中 AI 曾经生成过一个没有输入校验的接口，我通过 Code Review 发现后补充了字段校验和错误处理。
最后项目部署到 Vercel，并在 README 中记录了启动方式和功能说明。

问题 6：如果 AI 把项目改坏了怎么办？

参考回答：

text

我会先通过 git diff 查看改动范围，判断是哪一部分引入问题。
如果已经有测试，会先跑测试定位失败点。
如果改动过大，我会回到最近稳定提交，重新用更小的任务让 AI 修改。
所以我平时会保持小步提交，避免一次性大范围修改。

问题 7：AI 编程会不会让程序员失业？

参考之前章节回答

Vibe Coding ​

第一章：什么是 Vibe Coding ​

1.1 Vibe Coding 的定义 ​

1.2 一个生活化例子 ​

1.3 Vibe Coding 的核心能力 ​

1.4 常见误区 ​

误区一：Vibe Coding 等于不会代码也能做一切 ​

误区二：Prompt 写得越长越好 ​

误区三：AI 生成的代码可以直接相信 ​

第二章：AI 编程工具全景 ​

第三章：Cursor 的配置与应用 ​

3.1 Cursor 的优势 ​

3.2 Cursor 的安装配置 ​

3.2.1 安装 ​

3.2.2注册账号 ​

3.2.3 网络配置（必须） ​

3.2.4 CodingPlan的购买 ​

3.2.5 查看使用情况 ​

3.3 cursor的使用 ​

3.3.1 对话模式 ​

3.3.2 选中代码片段或文件 ​

3.3.3 提交图片内容 ​

3.3.4 生成文件可以回滚 ​

3.3.5 卡死现象 ​

3.4 总结： ​

第四章：Codex 的配置与应用 ​

4.1 Codex 是什么 ​

4.2 Codex 的CLI的安装配置 ​

4.2.1 安装git ​

4.2.2 安装node.js ​

4.2.3一键安装Codex （商家提供方式） ​

4.2.4 手动安装Codex（通用，如果商家方式安装成功则该步跳过） ​

4.2.5 验证 ​

4.3 Codex 的VScode 插件配置 ​

4.4 codingPlan ​

4.5 codex的使用 ​

4.5.1 权限 ​

4.5.2 读写模式 ​

4.5.3 确定文件 ​

4.5.4 获取IDE上下文状态 ​

4.5.5 窗口token剩余状态 ​

4.6 总结 ​

第五章：Skill 的应用 ​

5.1 Skill 是什么 ​

5.2 Skill 的价值 ​

5.3 一个 Skill 示例：代码 Review Skill ​

5.4 Skill 课堂练习 ​

第六章：Prompt Engineering for Coding ​

6.1 好 Prompt 的四个要素 ​

6.2 常用 Prompt 模板 ​

需求拆解 Prompt ​

技术方案 Prompt ​

Debug Prompt ​

重构 Prompt ​

6.3 坏 Prompt 改写练习 ​

第七章：Vibe Coding 面试题 ​

7.1 基础认知类 ​

问题 1：你怎么理解 Vibe Coding？ ​

问题 2：AI 生成代码最大的问题是什么？ ​

问题 3：Cursor 和 Codex 有什么区别？ ​

问题 4：你如何写一个好的 Coding Prompt？ ​

问题 5：讲一个你用 AI 辅助完成项目的经历。 ​

问题 6：如果 AI 把项目改坏了怎么办？ ​

问题 7：AI 编程会不会让程序员失业？ ​

Vibe Coding

第一章：什么是 Vibe Coding

1.1 Vibe Coding 的定义

1.2 一个生活化例子

1.3 Vibe Coding 的核心能力

1.4 常见误区

误区一：Vibe Coding 等于不会代码也能做一切

误区二：Prompt 写得越长越好

误区三：AI 生成的代码可以直接相信

第二章：AI 编程工具全景

第三章：Cursor 的配置与应用

3.1 Cursor 的优势

3.2 Cursor 的安装配置

3.2.1 安装

3.2.2注册账号

3.2.3 网络配置（必须）

3.2.4 CodingPlan的购买

3.2.5 查看使用情况

3.3 cursor的使用

3.3.1 对话模式

3.3.2 选中代码片段或文件

3.3.3 提交图片内容

3.3.4 生成文件可以回滚

3.3.5 卡死现象

3.4 总结：

第四章：Codex 的配置与应用

4.1 Codex 是什么

4.2 Codex 的CLI的安装配置

4.2.1 安装git

4.2.2 安装node.js

4.2.3一键安装Codex （商家提供方式）

4.2.4 手动安装Codex（通用，如果商家方式安装成功则该步跳过）

4.2.5 验证

4.3 Codex 的VScode 插件配置

4.4 codingPlan

4.5 codex的使用

4.5.1 权限

4.5.2 读写模式

4.5.3 确定文件

4.5.4 获取IDE上下文状态

4.5.5 窗口token剩余状态

4.6 总结

第五章：Skill 的应用

5.1 Skill 是什么

5.2 Skill 的价值

5.3 一个 Skill 示例：代码 Review Skill

5.4 Skill 课堂练习

第六章：Prompt Engineering for Coding

6.1 好 Prompt 的四个要素

6.2 常用 Prompt 模板

需求拆解 Prompt

技术方案 Prompt

Debug Prompt

重构 Prompt

6.3 坏 Prompt 改写练习

第七章：Vibe Coding 面试题

7.1 基础认知类

问题 1：你怎么理解 Vibe Coding？

问题 2：AI 生成代码最大的问题是什么？

问题 3：Cursor 和 Codex 有什么区别？

问题 4：你如何写一个好的 Coding Prompt？

问题 5：讲一个你用 AI 辅助完成项目的经历。

问题 6：如果 AI 把项目改坏了怎么办？

问题 7：AI 编程会不会让程序员失业？