这套教程我整理了很长时间重点覆盖 Vibe Coding 的核心概念、四个主流工具的分工以及一套可以直接上手复制的实战流程。不管你是完全没写过代码的零基础学习者还是已经有开发经验、想通过 AI 提升效率的后端工程师都能从里面找到自己能直接用的部分。Superpowers 编程技能从零开始理解 Vibe Coding 的核心玩法先解释一个容易混淆的概念。很多刚接触 AI 编程的同学会把 Vibe Coding 理解为“完全不用写代码靠 AI 自动搞定一切”这其实不准确。Vibe Coding 这个词最早来自 Andrej Karpathy 的总结描述的是“更多地依赖自然语言描述需求、让 AI 生成代码同时人工负责审查和校验”的开发方式。重点不在于“不写代码”而在于你的角色从“手写每一行”变成了“定义方向 检查结果 修正偏差”。如果你把 Vibe Coding 当成“偷懒神器”上来就丢一句“帮我做个淘宝”那大概率会得到一堆结构混乱、跑不起来的代码。真正有效的 Vibe Coding 需要三个能力支撑说得清楚需求、判断 AI 输出是否正确、以及知道怎么让 AI 迭代改进。这篇文章会围绕四个核心工具展开工具形态适合人群Claude Code终端 AI 编程代理习惯命令行的开发者Codex CLI终端 AI 编程代理使用 OpenAI 生态的开发者CursorAI 代码编辑器喜欢 IDE 图形界面的新手SuperpowersSkill 技能包扩展想让 AI 工作流更规范的人操作系统方面Windows、macOS、Linux 都可以命令行示例我会用通用写法。版本信息更新很快所以下面不会写死具体版本号安装时以官方最新发布为准。1. 初次接触 Vibe Coding先理解这几件事1.1 Vibe Coding 到底是什么Vibe Coding 是“氛围编程”核心特点是开发者用自然语言描述“你要什么”AI 负责生成“怎么实现”。比如你输入“写一个 Python 脚本读取当前目录下所有 xlsx 文件把每个文件的 sheet 名称打印出来”AI 会直接返回可运行的代码你只需要保存并执行。很多教程会把 Vibe Coding 描述成“不需要懂编程”我的观点是零基础可以入门但最好掌握最基本的编程概念比如变量、函数、循环、错误信息。原因很简单AI 生成的代码不一定正确你需要能看懂报错信息、能判断它是否偏离需求。一个典型的 Vibe Coding 工作循环是这样的用自然语言描述需求包括输入、输出、约束条件。AI 生成代码或修改方案。人工审查代码结构确认没有明显问题。在当前环境运行代码。如果报错把错误信息反馈给 AI让它修复。重复 3 到 5 步直到功能满足要求。这里面最难的一步其实是“把需求描述清楚”。很多新手反馈“AI 写的代码完全不是我想要的”问题往往出在需求描述太模糊。比如“做一个登录功能”和“做一个基于 Token 的手机号 验证码登录功能验证码有效期 5 分钟连续输错 5 次锁定 30 分钟”后者生成结果的可用性会高得多。1.2 为什么要同时了解四个工具有不少人问是不是只需要学一个 AI 编程工具就够了我的建议是先专注一个再了解其他。不同工具各有优势Claude Code 在长上下文理解和多文件修改上表现突出。它可以在你整个项目目录里搜索、读取文件、修改代码适合处理“跨模块改造”这类任务。Codex CLI 与 OpenAI 生态结合紧密如果你后续要使用 OpenAI 的模型或服务它会比较顺手。Cursor 提供完整的图形界面新手更容易上手代码补全、问答、批量修改都集成在编辑器里。Superpowers 不是独立的编程工具而是一组 Skill 规则包。它可以被配置进 Claude Code 等工具中用来规范 AI 的思考方式和操作流程。实际开发中我自己常用“编辑器 命令行代理”的组合用 Cursor 写小文件和看代码用 Claude Code 处理跨文件的大型重构遇到需要快速验证某个 API 行为时再打开 Codex CLI。没有哪个工具是万能的关键是让工具匹配任务。1.3 学完这套流程后你能掌握什么正确安装并配置 Claude Code、Codex CLI、Cursor、Superpowers。用自然语言让 AI 从零生成一个可以运行的 Node.js 命令行项目。通过 AI 完成代码修改、报错排查、功能迭代。理解 Skill 的工作机制让 AI 按照固定流程输出更稳定的结果。学会工程化建议如何控制代码质量、如何避免 AI 乱改文件、如何在团队里推广这套工作流。2. 环境准备与安装说明在开始安装之前先确认你的电脑具备以下基础环境。注意不同工具的版本更新节奏很快下面给的是通用环境要求。2.1 基础运行环境操作系统Windows 10/11、macOS 12、Ubuntu 22.04 均可。终端Windows 推荐 PowerShell 7 或 Windows TerminalmacOS/Linux 使用系统自带终端即可。Node.js建议安装 18 或更高版本因为 Claude Code 和 Codex CLI 都依赖 Node.js 运行。包管理器npm 随 Node.js 一起安装也可以使用 pnpm、yarn本文以 npm 为例。Git用于克隆 Skill 项目、初始化代码仓库。检查 Node.js 是否安装成功打开终端执行node -v npm -v如果提示找不到命令需要先安装 Node.js。安装完成后重新打开终端再执行上面的检查命令。2.2 安装 Claude CodeClaude Code 官方推荐通过 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后在终端输入claude启动claude第一次启动时工具会引导你完成账号授权。具体授权方式可能会随版本变化通常是在浏览器中登录账号并确认绑定。授权成功后终端会进入交互式对话界面。如果你更习惯使用 VS Code可以在 VS Code 插件市场搜索 Claude Code 扩展。安装后可以通过命令面板启动 AI 对话窗口适合不想离开编辑器的同学。2.3 安装 Codex CLICodex CLI 是 OpenAI 推出的终端编程代理安装命令如下npm install -g openai/codex安装完成后终端输入codex启动codex同样需要完成登录授权。授权时建议选择最小权限方案只允许工具访问当前工作目录避免它读取系统敏感文件。2.4 安装 CursorCursor 不是命令行工具而是一个基于 VS Code 分支开发的 AI 编辑器。你需要前往 Cursor 官网下载对应操作系统的安装包。安装完成后首次启动会用向导引导你导入 VS Code 的配置包括主题、扩展、代码片段。如果之前没用过 VS Code也可以直接使用默认配置。Cursor 默认界面是英文后面我们会单独讲如何设置中文界面。2.5 获取 Superpowers SkillSuperpowers 项目的获取方式以 GitHub 为主要渠道。你需要先确定自己使用的是哪个 AI 工具再把它安装到对应的 Skill 目录。以 Claude Code 为例Skill 默认加载目录是~/.claude/skills。操作步骤克隆 Superpowers 项目到本地。将项目中的 skills 目录内容复制到~/.claude/skills。重启 Claude Code让它重新扫描 Skill。git clone Superpowers 项目地址 mkdir -p ~/.claude/skills cp -r superpowers/skills/* ~/.claude/skills/如果你的环境是 Windows~指向用户主目录比如C:\Users\你的用户名。执行前先确认目标目录存在复制完成后可以打开~/.claude/skills查看是否有对应的 skill 文件夹。这里特别提示Superpowers 的 Skill 规则通常包含严格的“工作流约束”比如要求 AI 先写计划再动手、每次修改前必须列出涉及文件。对于习惯于自由对话的人来说这套规则一开始会觉得“繁琐”但它能显著减少 AI 改错文件、遗漏边界情况的问题。3. 核心配置与概念拆解3.1 Claude Code 的核心用法Claude Code 是一个运行在终端里的 AI 编程代理和普通的 ChatGPT 网页版最大的区别是它可以直接读取你的项目目录、查看文件内容、修改代码并执行命令。你可以把它理解为“长在终端里的编程助手”。启动之后你可以直接输入自然语言。比如请帮我查看当前项目结构并告诉我使用了哪些依赖。它会在后台执行文件读取命令然后给出结构化回答。如果要求它修改代码它会先列出将要修改的文件再给出具体的修改内容。Claude Code 有一个重要的权限模型所有会改变文件系统或执行命令的操作默认都需要人工确认。这样做的好处是它不会悄悄把整个项目改乱。如果你希望它批量处理多个文件可以在对话中说明它会集中列出变更计划。建议在项目根目录启动 Claude Code而不是在任意目录启动这样它能准确识别项目边界不会读取无关文件。3.2 Codex CLI 的核心用法Codex CLI 的使用方式与 Claude Code 类似都是终端交互式代理。它更强调“沙箱环境”和“人审模式”。有两点需要注意第一Codex CLI 对本地模型或代理配置比较敏感。如果你使用了第三方模型网关、或者环境变量指向了其他接口可能会出现“unable to locate the codex cli binary. set codex cli path or ensure the elec...”之类的报错。这类问题的本质是Cursor 或者其他前端工具找不到 Codex CLI 的可执行文件路径。解决办法是在 Cursor 的扩展设置里手动指定 codex CLI 的可执行文件路径。第二Codex 默认会在一个受控环境中执行命令避免对系统造成破坏。如果遇到代理相关的报错例如本地代理服务未启动或端口不通优先检查代理服务的运行状态而不是修改 Codex 的请求地址。3.3 Cursor 的基础设置与中文界面Cursor 对新手来说最友好的一点是它保留了完整的 IDE 体验写代码、看报错、跑项目都在同一个窗口内。3.3.1 首次打开项目在 Cursor 里点击 File → Open Folder选择你的项目目录。左侧是文件树中间是编辑器底部是终端面板。如果你之前用过 VS Code几乎不需要学习成本。3.3.2 设置中文界面如果你希望把界面语言切换为中文在 Cursor 中搜索“Chinese”或“语言”。目前有两种常见方式安装中文语言包扩展和 VS Code 一样在扩展商店里搜索“Chinese (Simplified) Language Pack”并安装。之后重启编辑器界面就会切换为中文。需要注意语言包只影响编辑器自身的菜单和提示不影响 AI 对话的语言。AI 对话语言由你的提问语言决定你用它会中文它就回复中文。3.3.3 常用 AI 交互方式快捷键Ctrl KmacOS 为Cmd K在编辑器中直接唤起内联代码生成可以框选一段代码让 AI 修改或补充。Ctrl L打开 AI 对话面板可以和 AI 讨论整个项目。选中多行代码后在对话面板输入“解释这段代码”或“重构这段代码”AI 会结合项目上下文给出建议。3.4 Superpowers 到底是什么关于 Superpowers可以理解为一套“技能包”它不是一个独立的 AI 工具而是通过给 AI 增加预设的工作流规则让 AI 做事情更规范、更可预期。举个例子没有 Superpowers 时你直接让 AI“实现一个用户注册接口”它可能直接生成一段代码。而配置了 Superpowers 后它会先拆解需求确认字段、确认校验规则、确认数据库表结构、确认错误码、生成代码、编写测试、列出潜在风险。整个过程变长了但产出质量明显提升。Superpowers 安装后你可以在 Claude Code 里输入类似“加载 superpowers 工作流”的指令AI 会自己读取对应的 Skill 文件然后按照其中的规则执行。具体指令名称以项目 README 为准。如果你同时使用 OpenSpec 这类文档化协作工具也可以把 Superpowers 的 Skill 规则与 OpenSpec 的规格文档结合起来形成“先写规格、再写代码、后验证”的完整链路。这种方式在团队协作中价值很大因为 AI 能统一读取同一份规格文件减少理解偏差。4. 完整实战用 Vibe Coding 做一个项目规划助手为了让你把上面的概念串起来下面用一个具体的小项目演示完整流程。这个项目是一个“项目规划助手”命令行工具功能是输入项目描述自动生成项目结构建议和任务清单。4.1 项目需求定义开始写代码前先把需求写清楚工具类型Node.js 命令行程序通过终端运行。输入用户输入的文本描述项目目标例如“做一个带登录功能的待办事项网页”。输出推荐的技术栈。建议的目录结构。分阶段任务清单。约束不调用外部 API本地运行即可输出格式为终端可读的列表。4.2 初始化项目目录打开终端创建项目mkdir planning-assistant cd planning-assistant npm init -y此时目录下会生成一个package.json文件。再新建一个入口文件index.js。4.3 让 Claude Code 生成初始代码在项目目录启动 Claude Codeclaude然后在对话框输入以下提示词我的需求做一个 Node.js 命令行工具文件名为 index.js。 用户运行命令后会提示输入“项目描述”。 程序读取输入后输出三部分内容 1. 推荐技术栈用列表展示。 2. 建议的目录结构用树形文本展示。 3. 分阶段任务清单用有序列表展示。 要求纯本地逻辑不调用外部 API用中文输出代码尽量简短便于阅读。AI 会生成类似下面的代码。注意这只是演示预期效果实际生成内容可能不同。// 文件路径index.js const readline require(readline); const rl readline.createInterface({ input: process.stdin, output: process.stdout, }); function generatePlan(description) { return 项目描述${description} 1. 推荐技术栈 - 前端HTML CSS JavaScript轻量场景 - 后端Node.js Express - 数据库SQLite本地开发 2. 建议的目录结构 project/ ├── public/ │ ├── index.html │ └── style.css ├── src/ │ └── server.js ├── package.json └── README.md 3. 分阶段任务清单 1. 搭建基础页面结构 2. 实现后端接口 3. 接入数据库 4. 测试联调 5. 部署上线 ; } rl.question(请输入项目描述, (answer) { console.log(generatePlan(answer.trim())); rl.close(); });把生成结果保存到index.js然后在终端运行node index.js输入“做一个记账网页应用”程序就会输出技术栈、目录结构和任务清单。4.4 用 Cursor 继续迭代功能现在增加一个新需求保存最近的生成记录。我们先不直接改代码而是使用 Cursor 的 AI 对话功能。在 Cursor 中打开项目按Ctrl L打开对话面板输入请为 index.js 增加一个功能每次都把用户输入的项目描述追加保存到 record.txt 文件中文件不存在时自动创建。同时修改输出格式在输出开头显示“生成时间”。Cursor 会基于当前打开的index.js生成修改建议。确认改动范围无误后点击应用。生成的代码会涉及 Node.js 的fs模块和日期格式化。保存后再次运行node index.js输入一次描述然后检查项目目录下是否生成了record.txt文件并确认内容包含刚才的输入。4.5 用 Codex CLI 做代码走查代码写完后再使用 Codex CLI 进行代码审查。在项目目录启动codex输入请审查当前项目 index.js 代码重点关注输入内容为空时是否报错、文件追加写入是否使用了 try/catch、时间格式是否可读。请给出优化建议并只输出建议列表。Codex 会返回一份审查意见。这一步体现的正是 Vibe Coding 的正确姿势AI 写代码AI 审查代码但最终决定权在开发者手里。你可以选择接受建议也可以忽略不适合当前小项目的方案。4.6 运行验证结果验证阶段主要看三件事基础功能运行node index.js输入做一个笔记应用确认三类输出完整。追加记录连续运行两次检查record.txt中是否包含两条记录。边界情况不输入任何内容直接回车程序是否给出友好提示。如果 AI 没有处理空输入你可以回写让它补充。5. 常见问题与排查思路Vibe Coding 工具链涉及多个组件组合实际使用中会遇到不少报错。下面把高频问题整理成表格方便直接查阅。问题现象常见原因解决思路启动claude报账号未授权第一次使用没有完成浏览器授权重新运行claude按提示完成登录授权提示 organization disabled claude subscription access组织账号未开启 Claude Code 访问权限联系管理员为当前账号开启权限或改用个人账号Codex CLI 提示 model not recognized使用的模型名与当前 Codex 版本不兼容更新 Codex CLI 到最新版本检查模型名是否正确Cursor 中提示 unable to locate codex cli binaryCursor 不知道 Codex CLI 安装在哪个路径在 Cursor 的 Codex 扩展设置中手动指定 codex 可执行文件路径启动 Codex 时 local proxy failed本地代理服务未启动或端口不通检查本地代理服务状态确认环境变量配置正确Cursor 界面全英文想切换中文没有安装中文语言包扩展在扩展商店安装中文语言包并重启编辑器AI 修改了不相关的文件缺少明确文件范围约束提示词中指定“只能修改 src 目录下的文件”AI 生成的代码运行报错生成逻辑与实际环境不匹配把完整报错信息复制回对话中让 AI 基于错误信息修复Claude Code 读取不到 Superpowers 技能Skill 目录路径不对确认 Skill 安装在~/.claude/skills重启 Claude Code关于“unable to locate the codex cli binary”这个报错值得单独展开。不少人在 Cursor 里安装 Codex 扩展后遇到该问题就认为是 Codex 没安装成功其实大概率是路径配置问题。排查时先确认命令行中codex是否能正常启动如果能启动再查看 Cursor 中 Codex 扩展的路径设置把它指向命令行工具的实际安装位置。如果确实找不到可执行文件重新执行全局安装命令即可。“cc switch local proxy failed while handling codex endpoint /responses”这类报错则更多与本地代理配置有关。Codex CLI 支持配置自定义代理端点但当代理服务不可用时请求会失败。最简单的排查方式是暂时恢复官方默认配置确认功能正常后再逐步引入自定义设置。6. 最佳实践与工程建议6.1 提示词是核心生产力Vibe Coding 的质量上限很多时候由提示词决定。好的提示词应该包含角色与目标你想让 AI 扮演什么角色最终交付什么。输入与输出输入数据是什么输出格式是什么。约束条件不允许做什么禁止改动哪些文件。验收标准什么才算完成。示例对比低质量帮我写个登录功能。 较高质量用 Express MySQL 实现一个登录接口接收 username 和 password 密码使用 bcrypt 加密存储登录成功返回 JWT token失败返回统一错误码。 请先列出实现方案确认无误后再生成代码。6.2 小步提交避免大范围重构不要让 AI 一次性修改几十个文件。修改范围越小出问题的概率越低也越容易定位错误。建议每次只让 AI 完成一个完整的小功能并立即运行验证。这个习惯和传统开发的“小步提交”理念一致。6.3 把握权限与安全边界AI 编程工具具备执行命令和修改文件的能力这意味着使用者必须保持安全意识在个人项目或测试环境先验证不要直接在生产环境执行 AI 建议的命令。不要让 AI 读取密钥、密码、Token 等敏感文件。如果 AI 建议执行高风险命令例如删除数据库表、批量修改文件权限先手动确认命令内容。在团队中建议统一管理 AI 工具的访问策略明确哪些目录允许 AI 读写。这一点不是危言耸听。你给 AI 的权限本质上和你自己的终端权限一致AI 只是替你执行命令。命令错了后果由你承担。6.4 让 AI 生成测试但不要迷信测试让 AI 顺手生成单元测试是提高代码质量的有效手段。但 AI 生成的测试往往只覆盖它自己代码中的“理想路径”边界条件可能缺失。你可以要求它补充异常路径比如网络超时、文件不存在、输入为空。测试代码也需要人工审查不能因为“测试通过了”就认为功能一定正确。6.5 建立项目规范文件当项目有一定规模后建议在项目根目录维护一个AGENTS.md或CLAUDE.md类型的规范文件内容可以包括项目目录结构。代码风格约定。禁止使用的依赖。测试命令和构建命令。API 设计约定。Claude Code、Codex、Cursor 等工具都会读取这类规范文件作为上下文这样每次对话 AI 都能理解项目约束不需要你反复强调。6.6 团队协作时的注意事项如果团队多人同时使用 AI 编程工具容易出现冲突。约定统一的提示词模板尤其是涉及数据库变更、缓存清理等高风险操作时。明确谁负责最终代码审查。避免多个成员同时对同一个目录执行 AI 自动修改。对 Skill 文件或规范文件的修改要提交到代码仓库方便追溯。7. 从入门到进阶的学习路线如果你刚接触 Vibe Coding建议按照下面的顺序一步步推进先选一种最顺手的工具熟悉基本对话和代码生成。拿一个极小的项目练手比如本文中的命令行工具感受“描述 → 生成 → 运行 → 修复”的循环。再尝试用 AI 修复报错。这比生成新代码更重要因为真实项目里大部分时间都在处理错误。学会使用 Skill 规则让 AI 按照固定流程输出更稳定的结果。尝试让 AI 写测试、写注释、做重构。最后再引入 Superpowers 这类工作流增强工具把单个 AI 操作升级为相对完整的工作流。有一点需要提醒Vibe Coding 不会替代你对基础编程知识的理解。你可以不会背语法但你需要理解程序运行的基本流程、错误信息的含义、模块之间如何配合。这些基础能力决定了你能不能在 AI 出错时及时纠正它。如果你对前端感兴趣可以尝试用 Vibe Coding 做一个个人主页如果你在后端方向可以做一个带简单登录和增删改查的接口项目如果你做数据分析可以尝试让 AI 帮你完成数据清洗和可视化脚本。每种方向都能加深你对这套工作流的理解。把电脑打开选一个小项目认真跑完一遍“描述需求 → 生成代码 → 运行验证 → 修复问题”的闭环你就能真正体会到 Vibe Coding 带来的效率变化。