Vibe Coding 是最近 AI 编程领域被反复讨论的一种工作方式开发者不再逐行手写所有代码而是通过自然语言向 Claude Code、Cursor、Codex 这类工具描述需求让 AI 生成实现再由开发者负责审查、修正和落地。与其把它理解为“偷懒”不如把它理解成一种新的编程协作方式你把握方向AI 负责大量样板代码和重复性工作。这篇文章会从零开始拆解 Vibe Coding 的核心概念带你完成 Claude Code、Cursor、Codex、Coze 四种工具的安装与基础配置然后用一个最小页面项目跑通完整流程再介绍 SDD 规格驱动开发、Agent 扩展、常见报错排查和生产环境最佳实践。学完这套内容你可以把 Vibe Coding 用在原型开发、内部工具、脚本编写和个人项目中也能判断哪些场景不适合交给 AI。1. Vibe Coding 入门先理解这套编程方式适合什么场景1.1 从自然语言驱动编程到 Vibe Coding 的演变“自然语言编程”并不是新概念但在大模型具备较强的代码生成能力后它才真正进入日常开发流程。Vibe Coding 的核心是用接近日常表达的方式描述产品意图然后由 AI 生成代码。开发者不再把主要精力放在语法、库调用和样板代码上而是放在需求表达、结果判断和问题定位上。名字里的 Vibe 强调的是一种状态开发者保持对话节奏快速反馈而不是逐行检查每个字符。你说一句话AI 给出一段代码你运行一下有报错就继续对话。整个过程强调快速获得反馈而不是一开始就设计出完整架构。需要澄清的是Vibe Coding 不是“不写代码”而是“代码由 AI 写人来判断是否正确”。所以在这个模式下真正重要的能力变成了描述需求、审查代码、定位问题、约束 AI 的改动边界。这也是本文后续所有章节围绕的核心。1.2 Vibe Coding 适合谁不适合谁Vibe Coding 非常适合快速验证想法但不适合所有场景。判断标准不是“工具强不强”而是“结果是否正确可验证、风险是否可承受”。场景适合程度原因快速验证产品原型高可以在几小时内看到可点击的页面内部工具和运维脚本高错误影响范围有限可快速修复自动化测试代码生成中高需要人工确认断言是否合理个人学习编程中新手容易忽略原理需要额外学习基础支付、权限、加密相关逻辑低安全边界需要人工严格审查复杂分布式系统架构低上下文窗口限制AI 难以把握全局高并发性能调优低生成代码通常会牺牲性能换可读性没有验收标准的自由发散需求低无法判断 AI 输出是否正确如果你是新手不建议一上来就让 AI 生成整个企业级项目。更好的做法是先让 AI 生成小模块自己读懂每段代码再逐步扩大范围。如果你是有经验的开发者Vibe Coding 更适合用来处理重复性工作而不是替代架构设计。1.3 工具矩阵Claude Code、Cursor、Codex、Coze 分别解决什么问题很多人会把 Claude Code、Cursor、Codex 混为一谈实际上它们的交互层级不同。工具形态典型使用场景上手难度Claude Code终端 CLI在现有 Git 工程里读文件、改代码、执行命令中Cursor桌面编辑器在 IDE 里通过对话生成代码、补全、重构低Codex CLI终端 Agent自动化任务、批量重构、运行测试并修改代码中Coze云端 Agent 平台把 AI 能力封装成可交互 Bot 和工作流低简单来说Cursor 负责“写着舒服”Claude Code 和 Codex 负责“工程化操作”Coze 负责“把能力发布成服务”。它们不是互相替代的关系而是不同环节的工具。学习时可以先用 Cursor 建立手感再进入 Claude Code 和 Codex 处理真实项目最后用 Coze 把验证过的能力包装成 Agent。2. 环境准备把四种 AI 编程工具装到当前机器2.1 环境要求与版本确认在开始安装前先确认电脑上具备以下基础环境Node.jsClaude Code 和 Codex CLI 通常通过 npm 安装建议使用 18 或更高版本具体以工具官方要求为准。Git用于版本管理。Vibe Coding 的每次改动都应该能通过 Git 回滚。代码编辑器可以使用 VS Code也可以直接使用 Cursor 作为主力编辑器。操作系统macOS、Linux、Windows 都可以使用。Windows 环境下终端工具在 PowerShell 和 WSL 中的表现略有差异。需要注意AI 编程工具版本更新非常快安装前先查看官方文档中的最低版本要求不要假设“最新版一定兼容所有配置”。2.2 安装 Claude Code 并完成登录Claude Code 的常见安装方式是通过 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后检查版本claude --version在项目目录中执行claude会进入终端交互模式。首次运行一般会走登录流程也可以使用环境变量提供 API Keyexport ANTHROPIC_API_KEYyour_api_key_here如果需要接入企业内部模型网关或兼容接口可以配置接口地址export ANTHROPIC_BASE_URLhttps://your-api-gateway.example.com这里的ANTHROPIC_BASE_URL要特别小心。配置错误会导致请求全部失败如果把模型名写成了当前版本不认识的名称可能会看到类似deepseek-v4-pro is not a model this version of claude code recognizes的报错。这个报错说明模型名和当前工具版本不兼容需要核对模型提供方给出的兼容模型名。登录时如果提示your organization has disabled claude subscription access for claude code说明当前账号被所在组织限制了 Claude Code 访问权限。处理方式是切换到允许使用的个人账号或联系组织管理员调整策略。2.3 安装 Codex CLI 并确认 CLI 路径Codex CLI 的常见安装方式也是 npmnpm install -g openai/codex验证安装codex --version在编辑器插件中使用 Codex 时如果看到下面这个报错unable to locate the codex cli binary. set codex cli path or ensure the executable is in your PATH意思是插件没有找到codex可执行文件。先找到命令的真实路径which codexWindows 下使用where codex然后把输出路径填入插件设置中的codex_cli_path或对应配置项。这个问题常见于 PATH 配置不完整或者插件安装时没有重新加载终端环境。2.4 安装 Cursor 并处理中文设置Cursor 是桌面编辑器从官方网站下载对应操作系统的安装包安装后登录账号即可使用。打开一个新项目后可以直接在 AI 对话面板里输入需求也可以使用编辑器内置的补全能力。关于中文设置不同版本提供的选项并不一致。先打开设置界面搜索 “language” 或 “locale”如果当前版本没有内置中文选项可以在扩展市场里搜索官方或可信的中文语言包。不要为了汉化去下载不明来源的修改版也不要手动替换程序文件这类操作在版本更新后容易失效还可能带来安全风险。如果实在无法汉化可以把注意力放在几个核心入口上代码编辑区、文件树、终端、AI 对话面板。Cursor 的界面英文词汇量不大配合翻译工具使用不会造成太大障碍。2.5 注册 Coze 并理解云端 Agent 的定位Coze 是云端 Agent 构建平台不需要在本地安装客户端。注册后可以创建 Bot配置模型、知识库、插件和工作流。对于 AI 编程来说Coze 适合把已经验证过的提示词和代码逻辑包装成可交互服务。举个例子某个团队经常需要根据产品需求生成测试用例。可以在 Coze 里创建一个 Bot输入需求文档输出标准化的测试用例表格。这个 Bot 不直接写业务代码但能把 AI 能力开放给非开发者使用。Coze 与本地工具的关系可以这样理解Claude Code、Cursor、Codex 处理“代码生成”Coze 处理“Agent 交互”。前者生成程序后者把程序包装成对话式服务。3. 用 Cursor 跑通第一个 Vibe Coding 项目3.1 项目目标做一个最小待办事项页面新建一个目录vibe-todo目标是实现一个不需要后端、不需要构建工具的单页待办事项应用。功能要求如下输入框输入待办内容。点击按钮新增。列表展示所有待办。点击待办前复选框文字变为删除线。刷新页面后数据不丢失。页面在浏览器里直接打开即可运行。这个项目虽然简单但已经覆盖了输入、渲染、状态管理、持久化和异常处理非常适合作为 Vibe Coding 的第一个闭环。3.2 用自然语言描述功能需求在 Cursor 中打开项目目录后使用 AI 对话输入下面这段提示词请给我做一个待办事项单页应用 1. 一个输入框和一个新增按钮。 2. 用户在输入框里输入文字点击新增后加入下方列表。 3. 每个待办项前面有一个复选框勾选后文字变为删除线。 4. 数据保存在 localStorage刷新页面后仍然保留。 5. 使用原生 HTML CSS JavaScript不要引入框架。 6. 文件拆成 index.html、style.css、app.js 三个文件。 7. 基础样式干净适合移动端和桌面端。这段提示词包含了输入、处理、输出、边界条件和约束。AI 生成结果时不容易跑偏。如果只写“帮我做个待办页面”AI 会自由发挥后续返工成本反而更高。这里要特别说明提示词的价值Vibe Coding 的收益主要来自“一次说清楚”和“快速迭代”。提示词越具体AI 第一次生成结果的质量就越高。这个原则在 Cursor、Claude Code、Codex 中通用。3.3 审查 AI 生成的代码AI 生成代码后不要直接信任。重点检查下面这些内容审查项检查内容问题处理建议用户输入渲染是否使用 textContent 而不是 innerHTML使用 innerHTML 可能造成脚本注入风险localStorage 读取是否用 try/catch 处理 JSON 解析异常数据损坏时自动重置为空列表空文本拦截空字符串是否会被加入列表新增前检查输入值事件绑定时机脚本是否在 DOM 加载后执行把 script 放在 body 末尾或使用 DOMContentLoaded样式适配是否考虑移动端和桌面端调整容器宽度和间距控制台报错是否有关键报错打开浏览器开发者工具逐条确认以 localStorage 为例AI 生成代码时经常直接写const todos JSON.parse(localStorage.getItem(todos)) || [];这段代码在数据正常时没问题但如果 localStorage 里被写入了非 JSON 字符串页面会直接报错。更稳的写法是包一层 try/catchfunction loadTodos() { try { return JSON.parse(localStorage.getItem(todos)) || []; } catch (e) { return []; } }这个差异就是审查的关键点AI 能生成看起来正确的代码但边界情况需要人来把关。3.4 运行与验证直接在浏览器里打开index.html即可运行。验证步骤输入一条待办点击新增确认列表出现该项。刷新页面确认数据仍然存在。输入空字符串确认不会加入空项目。勾选待办确认删除线出现。打开浏览器控制台确认没有报错。如果发现行为不符合预期回到 Cursor把现象和期望告诉 AI并要求它定位问题而不是重写整个文件。比如点击复选框后文字出现了删除线但刷新页面后勾选状态丢失。 请先定位原因再修改不要影响新增功能。这种反馈方式让 AI 沿着问题线索排查而不是每次都生成一份新的代码。4. 用 Claude Code 在终端和现有工程里推进开发4.1 在现有项目里启动 Claude CodeCursor 适合从零开始写页面Claude Code 更适合在已有的工程目录里做多文件修改。进入项目目录后执行cd /path/to/vibe-todo claudeClaude Code 启动后会看到当前目录的文件结构它可以读取文件、修改文件、执行命令。对于已有工程推荐先确保目录在 Git 仓库中这样 AI 的每一步修改都能通过 Git 查看 diff 和回滚git init git add . git commit -m initial commit不要把没有版本管理的项目直接交给 AI 修改。一旦 AI 产生大量不可控改动没有 Git 就无法快速回到安全状态。4.2 写好 AI 编程提示词终端场景下提示词同样决定生成质量。错误示例帮我改一下登录逻辑推荐示例在 src/login.ts 中登录逻辑存在两个问题 1. 密码校验使用明文比较需要改成哈希比对。 2. 登录成功后没有写入会话状态。 请修改这两个问题。 修改要求 - 保持函数签名不变。 - 不要改动其他文件。 - 修改完成后给出变更文件的 diff 摘要。这个提示词给出了文件路径、具体问题、修改范围和输出要求。Claude Code 在这种上下文明确的情况下生成内容更可控。如果提示词太宽泛AI 可能会修改你不想动的代码。4.3 管理上下文、多文件修改和命令执行Claude Code 可以一次修改多个文件这会带来风险。推荐在对话中明确约束“先读取 src/services/user.ts再决定改哪里。”“只修改 src/api 目录下的文件。”“执行 npm test然后把失败信息贴给我。”可以要求 AI 在执行命令前先展示命令确认后再执行。这样能避免它运行意外命令。每次大改动后用 Git 检查变更git diff git status如果修改结果不满意直接回滚git checkout -- .这里的核心原则是给 AI 足够的上下文但严格控制改动范围。上下文不够会导致错误修整范围不受控会导致无关文件被改动。4.4 使用 Skill 固定代码生成工作流Claude Code 支持通过 Skill 机制把一套提示词和流程放到项目目录中让 AI 自动加载。常见做法是在项目里创建.claude/skills/code-review/SKILL.mdname: code-review description: 审查当前改动输出问题清单和修改建议 steps: 1. 读取 git diff。 2. 逐文件检查异常处理和安全性。 3. 输出问题清单、严重级别、修改建议。Skill 本身是文本文件作用是把可重复的流程固化成规范。团队评审标准、代码生成模板、SQL 编写规范都可以做成 Skill。需要注意不同版本的 Claude Code 对 Skill 目录和格式可能有差异落地前先查看当前版本的官方说明。5. 用 SDD 方法把 Vibe Coding 变成可控流程5.1 什么是 SDDSpec-Driven DevelopmentSDD 是“规格驱动开发”的思路在让 AI 写代码之前先写一份规格说明描述系统要做什么、边界是什么、验收标准是什么。规格不一定是几十页的文档可以是一个几百字的文件关键是让 AI 和人都对齐同一个目标。在 Vibe Coding 中SDD 特别有用。因为 AI 对话有上下文窗口限制项目一复杂口头需求很容易丢失或变形。把需求写进文件后每次对话都可以让 AI 先读取规格文件再开始改代码结果会稳定很多。另一方面SDD 解决了“AI 自由发挥”的问题。AI 在信息不足时倾向于猜测需求而规格文件提供了明确的约束可以减少猜测。5.2 规格说明模板在项目目录中新建一个spec.md文件内容可以参考下面这个模板# 待办事项应用规格 ## 背景 用户需要一个简单的待办事项管理页面。 ## 功能清单 - F1新增待办。 - F2标记完成。 - F3删除待办。 - F4数据持久化到 localStorage。 ## 数据模型 - todo: { id: string, text: string, done: boolean, createdAt: number } ## 页面结构 - 顶部输入框和新增按钮。 - 中间待办列表。 - 列表项包含复选框、文本、删除按钮。 ## 边界条件 - 空文本不允许新增。 - localStorage 数据损坏时自动重置为空列表。 - 不支持离线同步。 ## 验收标准 1. 输入文本后点击新增列表出现新项目。 2. 刷新页面后数据不丢失。 3. 勾选后文本显示删除线。 4. 删除按钮可以移除项目。这个模板的核心字段包括背景、功能清单、数据模型、页面结构、边界条件、验收标准。实际项目可以增加接口定义、权限设计、错误码等。5.3 从规格说明到生成代码在 Claude Code 中可以用下面这个提示词启动开发读取 spec.md按规格实现这个应用。 代码放在当前目录使用原生 HTML/CSS/JavaScript。 完成后运行一个简单检查确认没有遗漏 F1-F4。AI 会先读取规格文件然后按功能清单实现。发现规格不清晰时好的工具会主动提问而不是自己猜。这时应该补充规格而不是让 AI 随便决定。在 Cursor 中也可以使用同样的思路先把 spec.md 内容选中然后让 AI 按规格生成。规格文件的好处是可以反复使用即使生成结果不满意修改后可以重新生成不需要重新描述整个需求。5.4 迭代与验收实现完成后对照验收标准逐条验证。如果某一项不通过不要说“你改一下”而是明确描述“F2 没有生效点击复选框后文字没有删除线且刷新后勾选状态丢失。”“请先定位原因再修改不要改动 F1 和 F3 的行为。”这样迭代才有方向。SDD 的核心价值是先定义“对”的样子再让 AI 去实现而不是让 AI 定义“对”。当项目规模变大这个原则带来的稳定性提升会非常明显。6. Codex CLI 实战与常见报错排查6.1 Codex CLI 适合什么场景Codex CLI 适合在终端里执行自动化任务例如在仓库里批量替换 API 调用。修复单元测试失败。生成迁移脚本。根据 Issue 描述生成代码。它和 Cursor 的区别是Cursor 是编辑器内的交互Codex 更偏向“命令行 Agent”可以直接读取仓库、运行测试、生成提交。如果你的工作流高度依赖终端、Git、CICodex CLI 会更顺手。6.2 基本使用流程在项目目录执行codex然后描述任务修复 src/utils/date.ts 中时区处理错误。 先运行 npm test 复现问题再修改代码最后重新运行测试确认通过。Codex 的典型工作流是AI 读取文件、修改代码、执行测试、给出 diff。对于生产仓库建议在独立分支上使用git checkout -b fix/date-timezone codex确认修改无误后再合并到主分支避免 AI 直接改动不稳定代码。6.3 将 Codex 接入不同模型时的注意点有开发者会把 Codex 配置到其他模型提供方比如企业内部模型网关或第三方兼容接口。配置时需要注意模型名必须是当前工具版本能识别的名称否则会报错。API 地址、请求头要匹配提供方要求。工具版本更新后模型兼容列表可能变化。一个常见报错是deepseek-v4-pro is not a model this version of codex recognizes这种提示说明配置里写的模型名和当前工具支持的模型名不一致。解决方式是查看当前工具的模型列表或把配置改成模型提供方给出的兼容模型名。不要直接假设“新模型一定被所有工具支持”。注意接入第三方模型时不要把 API Key 写进仓库。使用环境变量或工具提供的配置文件并确保配置文件被.gitignore忽略。6.4 常见报错排查问题现象常见原因检查方式处理建议提示 unable to locate the codex cli binary插件找不到 codex 命令执行 which code