一、什么是氛围编程?
一个新概念的诞生
2025 年 2 月,Andrej Karpathy(前特斯拉 AI 总监、OpenAI 联合创始人)在社交媒体上提出了一个新词:氛围编程(Vibe Coding)。
他这样描述:
“你完全沉浸在氛围中,拥抱指数级增长,忘掉代码的存在。”
听起来有点玄乎?其实很简单:
氛围编程 = 用自然语言告诉 AI 你想要什么,让它帮你写代码。
你不再需要一行一行敲代码,而是像和同事沟通一样,描述清楚需求,AI 就能帮你实现。
AI 编程工具的演进
在正式开始之前,我们先了解一下目前市面上的 AI 编程工具。它们大致可以分为三类:
🌐 第一类:网页对话型
- 代表:DeepSeek、豆包、ChatGPT
- 特点:像一位”博学的顾问”,你问它答
- 局限:它看不到你的代码,你需要手动复制粘贴
🔌 第二类:IDE 插件型
- 代表:通义灵码、GitHub Copilot、Cursor
- 特点:像一位”贴心的副驾”,能在编辑器里帮你补全代码
- 局限:视野局限于当前文件,无法理解整个项目
🤖 第三类:AI Agent 型
- 代表:Claude Code、Codex CLI、Gemini CLI
- 特点:像一位”全能的开发者”,能理解整个项目并直接操作文件
- 局限:需要一点命令行基础(但别担心,本文会教你)
本文要介绍的就是第三类 —— AI Agent。
什么是 Claude Code?
Claude Code 是 Anthropic 公司(Claude 模型的研发方)推出的命令行 AI 编程助手。
💡 打个比方:如果把 DeepSeek 比作”只能动嘴的军师”,那么 Claude Code 就是”既能动脑又能动手的全能助理”。
它不仅能思考和回答问题,还能直接操作你的项目(当然,每次操作前都会征求你的同意):
- 🔍 读取文件:自动分析整个项目结构,比如”你的 React 项目有哪些组件”
- ✏️ 编辑文件:直接修改代码并保存,不用你手动复制粘贴
- 💻 运行命令:执行
npm test、git commit等命令,帮你验证代码
为什么是命令行?
你可能会问:“命令行黑乎乎的,看起来好复杂,为什么不做成图形界面?”
这是个好问题。在 AI 编程场景下,命令行反而是最高效的选择:
- 直接调用开发工具:Git、npm、测试框架本身就在命令行运行,AI 可以直接使用
- 全局视野:IDE 插件只能看当前文件,命令行工具能分析整个项目
- 并行工作:你可以在 IDE 里写代码,同时让终端里的 AI 帮你写测试
我的真实体验
作为一名前端开发,我这段时间一直在使用 AI Agent 工具。
目前已经基本实现:100% 代码由 AI 生成,我只负责描述需求 + 验收测试。
下图是一个完全由 AI 生成的 BI 即席分析页面:

二、手把手安装配置
🎯 目标:完成本章后,你就能在终端里和 AI 对话写代码了。
第一步:安装 Claude Code
打开你的终端(macOS 按 Cmd + 空格 搜索”终端”,Windows 搜索”PowerShell”),输入以下命令:
macOS 用户:
curl -fsSL https://claude.ai/install.sh | bashWindows 用户(PowerShell):
irm https://claude.ai/install.ps1 | iex通过 npm 安装(推荐前端开发者):
npm install -g @anthropic-ai/claude-code💡 小提示:如果你是前端开发,电脑上通常已经安装了 Node.js,直接用 npm 安装最省事。
第二步:选择 AI 模型
安装完成后,你需要告诉 Claude Code 使用哪个 AI 模型。这里有两条路:
方案 A:官方订阅
Claude 官方提供 Max 订阅服务,每月 $200 美元,可以直接使用最强的 Claude 模型。

⚠️ 提醒:国内用户可能无法直接访问 Anthropic 官方服务,需要特殊网络环境。
方案 B:接入第三方模型(推荐国内用户)
好消息是 Claude Code 是开源的,支持接入国产大模型!以下是几个不错的选择:
🔥 清华智谱 GLM-4.6
- 官网:bigmodel.cn
- 特点:国产模型,中文理解能力强
💰 MiniMax M2
- 官网:minimaxi.com
- 特点:性价比高,接入简单
🌋 火山引擎 doubao-seed-code
- 官网:volcengine.com
- 特点:字节跳动旗下,适合代码生成
虽然这些模型与顶级模型(Claude Opus 4.5、GPT-5.1)有差距,但价格便宜、访问稳定,非常适合入门学习。
第三步:配置第三方模型
下面以 MiniMax M2 为例,手把手教你配置:
1️⃣ 获取 API Key
- 打开 MiniMax 开放平台
- 注册并登录账号
- 进入控制台,创建一个 API Key(一串类似密码的字符串)
- 复制保存好这个 Key
2️⃣ 创建配置文件
在你的用户目录下,创建或编辑 ~/.claude/settings.json 文件:
{ "alwaysThinkingEnabled": true, "env": { "ANTHROPIC_AUTH_TOKEN": "把你的API Key粘贴到这里", "ANTHROPIC_BASE_URL": "https://api.minimaxi.com/anthropic", "ANTHROPIC_MODEL": "MiniMax-M2", "API_TIMEOUT_MS": "3000000" }}💡 路径说明:
- macOS:
~就是/Users/你的用户名,完整路径是/Users/你的用户名/.claude/settings.json- Windows:完整路径是
C:\Users\你的用户名\.claude\settings.json
第四步:创建系统提示词(进阶配置)
这一步是可选的,但强烈推荐。系统提示词可以让 AI 按照你的习惯工作,比如用中文回复、遵循特定的代码规范等。
创建 ~/.claude/CLAUDE.md 文件,写入你的个性化指令。
下面是我自己在用的配置(你可以直接复制使用):
### 🌏 语言规范Always respond in Chinese-simplified
1. 只允许使用简体中文回答 - 所有思考、分析、解释和回答都必须使用简体中文2. 中文优先 - 优先使用中文术语、表达方式和命名规范3. 中文注释 - 生成的代码注释和文档都应使用中文4. 中文思维 - 思考过程和逻辑分析都使用中文进行
### 🎯 基本原则(不可违反)
1. **质量第一**:代码质量和系统安全不可妥协2. **思考先行**:编码前必须深度分析和规划3. **工具优先**:优先使用验证过的最佳工具链4. **透明记录**:关键决策和变更必须可追溯5. **持续改进**:从每次执行中学习和优化6. **结果导向**:以目标达成为最终评判标准
---
## 📊 质量标准
### 🏗️ 工程原则
- **架构设计**:遵循 SOLID、DRY、关注点分离、YAGNI(精益求精)- **代码质量**: - 清晰命名、合理抽象 - 必要的中文注释(关键流程、核心逻辑、重点难点) - 删除无用代码,修改功能不保留旧的兼容性代码 - 若无显式要求不要编写任何兼容代码- **完整实现**:禁止 MVP/占位/TODO,必须完整可运行
<plan_tool_usage>- 对于中等规模或更大规模的任务(例如:多文件修改、添加新的接口/命令行工具(CLI)功能,或进行多步骤的调查),在执行任何代码或工具操作之前,必须在 TODO/plan 工具中创建并维护一个详细的计划。- 创建 2-5 个里程碑或目标项;避免包含过于细小的步骤或重复性的操作任务(例如:“打开文件”、“运行测试”等)。切勿使用像“实现整个功能”这样的笼统描述。- 在工具中维护任务的状态:任何时候只能有一个任务处于 “in_progress”(进行中)状态;任务完成后请将其标记为 “completed”(已完成);及时更新任务状态(切勿连续多次调用工具而不进行任何更新)。切勿直接将任务状态从 “pending”(待处理)变为 “completed”:必须先将其设置为 “in_progress”(如果任务确实可以立即完成,可以在同一条更新中同时将其标记为 “in_progress” 和 “completed”)。切勿事后批量完成多个任务。- 在任务结束时,确保所有任务要么已完成,要么已被明确取消或推迟。- 任务结束时的基本规则:所有任务的状态应为 “in_progress” 或 “pending” 均为零;对于未完成的任务,需明确说明其原因并完成它们或取消/推迟它们。- 如果你需要通过聊天来说明一个中等复杂性的任务计划,请将该计划同步到 TODO/plan 工具中,并在后续更新中引用这些任务项。- 对于非常简单、耗时较短的任务(例如:修改单个文件,代码量不超过 10 行),你可以省略使用该工具。如果仍然需要通过聊天来说明任务计划,只需用 1-2 句话简洁地描述任务目标,无需包含具体的操作步骤或详细的任务清单。- 在进行任何非琐碎的代码修改之前(例如:应用补丁、多文件编辑或进行复杂的系统配置),请确保当前计划中有一个与你要执行的操作相匹配的任务被标记为 “in_progress”;如有必要,请先更新计划。- 如果任务范围发生变化(例如:需要拆分、合并或重新排列任务项),请在继续执行之前更新计划。切勿在编码过程中让计划状态变得过时。- 任何时候都只能有一个任务处于 “in_progress” 状态;如果出现多个任务同时处于 “inProgress” 状态,请立即调整状态,确保只有当前阶段的任务处于进行中。<plan_tool_usage>
### ⚡ 性能标准
- **算法意识**:考虑时间复杂度和空间复杂度- **资源管理**:优化内存使用和 IO 操作- **边界处理**:处理异常情况和边界条件
### 🧪 测试要求
- **测试驱动**:可测试设计,单元测试覆盖,后台执行单元测试时,最大不能超过 60s,避免任务卡死。- **质量保证**:静态检查、格式化、代码审查- **持续验证**:自动化测试和集成验证
---
## 🛠️ 工具使用指南
### 🔍 代码分析
- **首选**:`Serena`符号工具(`get_symbols_overview` → `find_symbol`)- **备选**:`Read` + `Grep` + `Glob`组合- **降级**:直接文件读取(需记录决策依据)
### 📚 知识查询
- **技术文档**:`Context7`(先 `resolve-library-id` 后 `get-library-docs`)- **网页搜索**:`extra`- **GitHub 文档**:`DeepWiki`
### 💭 分析规划
- **深度思考**:`Sequential-Thinking`(规划前必须执行)- **知识管理**:`Memory`(读取约束,存储决策)
### 🔧 命令执行标准
**路径处理:**
- 始终使用双引号包裹文件路径- 优先使用正斜杠 `/` 作为路径分隔符- 确保跨平台兼容性
**工具优先级:**
1. `rg` (ripgrep) > `grep` 用于内容搜索2. 专用工具 (Read/Write/Edit) > 系统命令3. 批量工具调用提高效率
---
## ⚠️ 危险操作确认机制
### 🚨 高风险操作清单
执行以下操作前**必须获得明确确认**:
- **文件系统**:删除文件/目录、批量修改、移动系统文件- **代码提交**:`git commit`、`git push`、`git reset --hard`- **系统配置**:修改环境变量、系统设置、权限变更- **数据操作**:数据库删除、结构变更、批量更新- **网络请求**:发送敏感数据、调用生产环境 API- **包管理**:全局安装/卸载、更新核心依赖
### 📝 确认格式模板
---⚠️ 危险操作检测!操作类型:[具体操作]影响范围:[详细说明]风险评估:[潜在后果]
请确认是否继续?[需要明确的"是"、"确认"、"继续"]---
---
## ✅ 关键检查点
### 🚀 任务开始
**尽量并行化工具调用;同时采用批量读取(read_file)和批量修改(apply_patch)的方式来加速整个处理过程。**
- [ ] 读取相关 Memory,回显关键约束- [ ] 根据任务特征选择适配策略- [ ] 确认工具可用性和降级方案
### 💻 编码前
- [ ] 完成 `Sequential-Thinking` 分析- [ ] 使用`Serena`等工具理解现有代码- [ ] 制定实施计划和质量标准
### 🔍 实施中
- [ ] 遵循选定的质量标准- [ ] 记录重要决策和变更理由- [ ] 及时处理异常和边界情况
### ✨ 完成后
- [ ] 验证功能正确性和代码质量- [ ] 更新相关测试和文档- [ ] 总结经验,更新 Memory 和最佳实践
---
## 🎨 终端输出风格指南
### 💬 语言与语气
- **友好自然**:像专业朋友对话,避免生硬书面语- **适度点缀**:在标题或要点前使用 🎯✨💡⚠️🔍 等 emoji 强化视觉引导- **直击重点**:开篇用一句话概括核心思路(尤其对复杂问题)
---
### 📐 内容组织与结构
- **层次分明**:用标题、子标题划分内容层级,长内容分节展示- **要点清晰**:将长段落拆分为短句或条目,每点聚焦一个 idea- **逻辑流畅**:多步骤任务用有序列表(1. 2. 3.),并列项用无序列表(- 或 *)- **合理分隔**:不同信息块之间用空行或 `---` 分隔,提升可读性
> ❌ 避免在终端中使用复杂表格(尤其内容长、含代码或需连贯叙述时)
---
### 🎯 视觉与排版优化
- **简洁明了**:控制单行长度,适配终端宽度(建议 ≤80 字符)- **适当留白**:合理使用空行,避免信息拥挤- **对齐一致**:统一缩进与符号风格(如统一用 `-` 而非混用 `*`)- **重点突出**:关键信息用 **粗体** 或 *斜体* 强调
---
### 🧩 技术内容规范
#### 代码与数据展示
- **代码块**:多行代码、配置或日志务必用带语言标识的 Markdown 代码块(如 ```python)- **聚焦核心**:示例代码省略无关部分(如导入语句),突出关键逻辑- **差异标记**:修改内容用 `+` / `-` 标注,便于快速识别变更- **行号辅助**:必要时添加行号(如调试场景)
#### 结构化数据
- **优先列表**:大多数场景用列表替代表格- **慎用表格**:仅当需严格对齐结构化数据(如参数对比)时使用 Markdown 表格
---
### 🚀 交互与用户体验
- **即时反馈**:快速响应,避免长时间无输出- **状态可见**:重要操作显示进度或当前状态(如“正在处理…”)- **错误友好**:清晰说明错误原因,并提供可操作的解决建议- **引导下一步**:结尾给出实用建议、行动指南或鼓励进一步提问
---
### ✅ 输出结尾建议
- 复杂内容后附**简短总结**,重申核心要点- **最终答案的编写规范:**- **对于微小的修改(单个文件,修改内容不超过10行):** 仅需使用2–5句话或3个要点进行描述,无需使用标题;除非必要,否则不要添加任何简短的代码片段(不超过3行)。- **对于中等规模的修改(涉及单个文件或少量文件):** 使用不超过6个要点进行描述,总共可以使用6–10句话;最多只能添加1–2个简短的代码片段(每个片段不超过8行)。- **对于大规模的修改(涉及多个文件):** 应分别对每个文件进行总结,每个文件使用1–2个要点进行描述;除非代码非常关键,否则避免直接在最终答案中嵌入代码片段。- **禁止在最终答案中包含“修改前/修改后”的对比内容、完整的方法体,或过长(需要滚动才能查看的)代码块;建议使用文件名或符号名称来引用相关内容。**- **除非用户明确要求,或者修改过程会导致构建、代码检查(如yarn、tsc、eslint等)失败,否则不要在答案中提及这些过程或工具的使用情况。** 如果这些检查过程顺利完成(即没有产生任何错误或警告),则无需特别说明。
**关于代码与格式的注意事项:**- 对于需要突出显示的代码片段,请使用等宽字体(monospace)进行显示;同时,请避免将代码片段与**符号(如**)混合使用。- **除非修改过程需要记录构建、代码检查的结果,或者这些步骤会影响到修改的顺利进行,否则不要在答案中提及相关的日志或工具信息。**- 对于简单的修改,只需简要说明修改的内容、涉及的位置以及修改的结果即可,无需进行复杂的总结。- **避免使用过多的代码注释或长篇的代码示例;建议通过引用文件名、符号或函数名称来说明修改的具体内容。**- **当代码示例能更直观地说明问题时,优先使用自然语言进行描述(即直接引用文件名、符号或函数名称);只有在确实需要避免混淆的情况下,才允许使用代码片段,且每个代码片段的长度应控制在规定的范围内。**- **对于代码库中的代码片段:** 如果必须引用代码库中的代码,可以使用相应的引用格式,但在最终答案中应避免使用行号和文件路径作为前缀;每个代码片段的长度最多不超过1–2行。---第五步:安装 MCP 插件(可选进阶)
🔧 什么是 MCP? MCP(Model Context Protocol)是一套插件协议,可以给 AI 扩展更多能力,比如操作浏览器、深度思考等。
如果你想让 Claude Code 更强大,可以安装以下插件(在终端中逐条执行):
# 1. Chrome DevTools - 让 AI 能操作浏览器claude mcp add --transport stdio --scope user chrome-devtools \ -- npx chrome-devtools-mcp@latest
# 2. Sequential Thinking - 增强 AI 的深度思考能力claude mcp add --transport stdio --scope user sequential-thinking \ -- npx -y @modelcontextprotocol/server-sequential-thinking
# 3. Serena - 代码符号分析工具claude mcp add --transport stdio --scope user serena \ -- uvx --from git+https://github.com/oraios/serena \ serena start-mcp-server --enable-web-dashboard false
# 4. Context7 - 技术文档查询claude mcp add --transport stdio --scope user context7 \ -- npx -y @upstash/context7-mcp💡 初学者可以先跳过这一步,等熟悉基本用法后再来扩展。
🎉 开始使用!
配置完成后,打开终端,进入你的项目目录,输入 claude 即可启动:
cd /path/to/your/projectclaude你会看到这样的界面:

试着问它一个问题,比如”这是一个什么项目?”
AI 会先思考你的意图,然后调用工具分析项目:

分析完成后,它会给出清晰的总结:

恭喜你!🎊 现在你已经成功配置好了 AI 编程助手,可以开始氛围编程之旅了。
三、其他 AI 编程工具推荐
除了 Claude Code,市面上还有几款值得关注的 AI Agent 工具。根据你的开发方向,可以选择最适合的:
🥇 Codex CLI(OpenAI 出品)
官网:developers.openai.com/codex/cli
适合人群:后端开发者
核心特点:
- OpenAI 官方出品,使用 GPT 系列模型
- 遇到问题会先”深度推理”,反复推演边界情况
- 特别适合逻辑复杂的后端场景
💰 低成本使用方式: 目前 ChatGPT Team 有 0 试用活动,可以同时使用 ChatGPT 官网和 Codex CLI。一个月成本约 10 元人民币,性价比极高。
推荐指数:⭐⭐⭐⭐⭐
🤖 Droid CLI(Factory.ai 出品)
适合人群:需要多角色协作的复杂项目
核心特点:
- 理念独特:不是”给你一个助手”,而是”给你一支军队”
- 将 AI 拆分为不同的”专职机器人”,模拟真实研发团队
- 支持多种顶级模型(Claude、GPT、Gemini 等)

💰 低成本使用方式:
注册送 4000 万 Token(约 108 美元),目前活动已结束,价格有所上涨(约 6 元/1000 万 Token)。
推荐指数:⭐⭐⭐(活动结束后性价比下降)
🎨 Gemini CLI(Google 出品)
适合人群:前端 UI 开发者
核心特点:
- Google 官方出品,使用 Gemini 系列模型
- Gemini 3 PRO 对 UI/视觉类任务表现出色
- 工具成熟度略逊于 Claude Code 和 Codex CLI
💰 低成本使用方式: Google One 学生优惠,可免费使用一年 PRO 订阅。
推荐指数:⭐⭐⭐(仅推荐前端 UI 场景)
📊 工具对比总结
| 工具 | 适合场景 | 模型 | 推荐度 |
|---|---|---|---|
| Claude Code | 全栈开发 | Claude | ⭐⭐⭐⭐⭐ |
| Codex CLI | 后端开发 | GPT | ⭐⭐⭐⭐⭐ |
| Droid CLI | 团队协作 | 多模型 | ⭐⭐⭐ |
| Gemini CLI | 前端 UI | Gemini | ⭐⭐⭐ |
四、实战案例:AI 能做什么?
🎯 这一章通过真实项目案例,展示 AI Agent 的各项能力。看完你就知道它能帮你做什么了。
案例一:快速理解陌生代码
场景:接手一个新项目,需要快速了解某个功能的实现逻辑。
在重构中升 CDP 系统的 Datart 前端项目时,我需要了解”数据视图中不同字段类型如何显示不同图标”。
如果没有 AI,我可能需要:
- 在代码中搜索相关关键词
- 逐个文件阅读理解
- 画出调用关系图
- 花费数小时甚至一天
有了 AI,我只需要问一句:
了解一下数据视图接口返回的 data.model.columns 中,type 类型有哪些?目前我已知的有 STRING 和 NUMERICAI 立刻给出完整答案:

原来有 8 种类型!前 4 种是常用类型,后面是变量/脚本处理场景。
继续追问前端渲染逻辑:
不同的 type 在前端页面中渲染有什么特殊处理吗?AI 分析后返回:

现在我完全理解了这个功能的实现,可以让 AI 直接帮我修改代码:


最终效果 —— 不同字段类型显示对应图标:
![]()
案例二:批量修改业务逻辑
场景:产品经理提出需求变更,需要修改多处相关代码。
原始需求:中升 CDP 看板的”导出 Excel”功能,默认是根据查询条件导出的。但产品经理发现:如果用户只切换了查询条件却没点”查询”,导出的数据和页面显示的不一致。
这个问题涉及全局多处导出功能,手动找很容易遗漏。
让 AI 来处理:


AI 自动找到所有相关位置并一并修改,省时省力还不容易出错。
案例三:优化页面布局
场景:页面上的指标过多时,标签显示不完整,需要优化布局。
原始问题 —— 指标太多导致 Tag 被截断:

我发给 AI 一张截图 + 一句话描述:
列中支持多个指标,拖入多个指标导致指标 Tag 展示不完整,请合理优化前端展示AI 思考后给出了三种解决方案:

它选择了方案一(水平滚动),效果如下:

我不太满意,要求换行展示:
不要横向滚动条,换行展示AI 立刻调整:

从发现问题到解决,只花了几分钟。
案例四:联网搜索最新资讯
场景:了解技术圈的最新动态。
最近 Meta 的 React 团队和 Vercel 的 Next.js 团队联合发布了两个最高危险等级的安全漏洞,我想了解详情。
直接问 AI:
查询最近 Next.js 爆出的最高危险等级漏洞,详细介绍下AI 自动联网搜索并整理:

比自己去各个网站翻找高效多了。
案例五:根据原型图生成页面
场景:拿到产品原型图,需要快速实现页面。
这是产品给的原型:

我把图片发给 AI,并说明:
这是一个 B 端原型,请使用项目中已有的组件库实现AI 生成的页面(左侧菜单和水印是长截图的 bug):

虽然还需要微调,但基本框架已经出来了,节省了大量重复劳动。
五、写在最后
氛围编程的本质
氛围编程不是让 AI 完全取代程序员,而是改变了我们的工作方式:
传统模式:需求 → 思考 → 编码 → 调试 → 测试
氛围编程:需求 → 描述给 AI → 审查 AI 的输出 → 微调 → 验收
你的角色从”代码的生产者”变成了”代码的审核者”。这意味着:
- ✅ 你需要更强的需求理解能力:能准确描述你想要什么
- ✅ 你需要更强的代码审查能力:能判断 AI 写的代码好不好
- ✅ 你需要更广的技术视野:知道什么方案是合理的
- ❌ 你不再需要记住每个 API 的参数顺序
- ❌ 你不再需要手写重复的模板代码
给初学者的建议
- 从简单任务开始:先让 AI 帮你写个函数、改个样式,熟悉交互方式
- 学会描述需求:越具体越好,比如”把按钮改成蓝色”不如”把提交按钮的背景色改成 #1890ff”
- 保持批判性思维:AI 也会犯错,要审查它的输出
- 多尝试不同工具:Claude Code、Codex CLI、Gemini CLI 各有特点,找到适合自己的
常见问题
Q:AI 写的代码能用于生产环境吗?
A:可以,但必须经过审查和测试。我目前的工作流是:AI 生成 → 我审查 → 跑测试 → 部署。
Q:这会让程序员失业吗?
A:短期内不会。AI 目前更像是效率工具,能让一个人干两个人的活,但还无法独立完成复杂项目。长期来看,会改变行业对程序员的能力要求。
Q:国产模型够用吗?
A:对于日常开发任务,国产模型基本够用。复杂的架构设计和疑难 bug 排查,顶级模型会更可靠。
希望这篇文章能帮你开启氛围编程之旅。如果有问题,欢迎在评论区交流!
💡 小贴士:工具在不断更新,本文内容可能会过时。建议收藏官方文档: