Vibe Coding 完全指南

Karpathy 将其描述为"一种新的编程方式，你完全沉浸在感觉中，拥抱指数级发展，甚至忘记代码的存在。在 vibe coding 中，程序员不需要理解代码如何或为什么工作，只需要告诉AI程序想要什么，让它为你创建产品"

🎯 核心原则

📦 安装流程

第一步：安装 Claude Code

npm install -g @anthropic-ai/claude-code

如果遇到报错可以尝试 https://github.com/LLM-Red-Team/kimi-cc 中提供的一键安装脚本(需要提前获取 API Key 获取方式参考后面的介绍)：

bash -c "$(curl -fsSL https://raw.githubusercontent.com/LLM-Red-Team/kimi-cc/refs/heads/main/install.sh)"

第二步：跳过地区限制

因为 Claude 限制中国地区的使用，在终端运行以下命令可以跳过 Claude 的地区审核：

if [ ! -f ~/.claude.json ]; then
    echo '{ "hasCompletedOnboarding": true }' > ~/.claude.json
fi

第三步：API Key 获取

• Claude API Key 获取：https://www.anthropic.com/api
  Claude 的 API Key 获取难度比较大，同时国内使用容易有封号的风险，可以尝试使用下面的 Kimi API 替代
• Kimi API Key 获取：https://platform.moonshot.cn

第四步：设置 API 环境变量（以 Kimi API 为例）

以下 `sk-xxx` 格式的 API Key 是在以上步骤获取得到的：

export ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic/
export ANTHROPIC_API_KEY=sk-xxx

第五步：启动 Claude Code

直接在终端输入命令 `claude` 即可：

💡 Claude Code 使用技巧

1. 定制 Claude 的工作环境：`/init` 命令

创建 CLAUDE.md 文件是提升 Claude Code 生成质量的第一步。这个特殊文件会在会话开始时自动被 Claude 读取，成为其上下文的一部分，是记录项目特定信息的理想场所。

2. 构建高效的提示工程

提供清晰、具体的指令是获得高质量代码生成的关键。Claude 在明确的指示下表现最佳，特别是在首次尝试时。

3. 利用子代理和并行处理

在复杂任务中使用子代理可以显著提高Claude的性能。特别是在对话或任务的早期阶段，指示Claude使用子代理来验证细节或调查特定问题。

use subagents to verify the API documentation for the payment gateway before coding the integration

4. 采用标准工作流程

Anthropic 工程师普遍采用的探索-规划-编码-提交工作流程非常有效：

1. 探索阶段：让Claude读取相关文件、图像或URL，但明确告诉它不要立即编写代码
2. 规划阶段：要求Claude制定解决特定问题的计划，使用"think"触发词来获取更深入的思考
3. 编码阶段：在确认计划合理后，让Claude实现解决方案
4. 提交阶段：让Claude提交结果并创建拉取请求，同时更新相关文档或变更日志

5. 在 VSCode、Cursor 等 IDE 中使用 Claude Code

参考：https://docs.anthropic.com/zh-TW/docs/claude-code/ide-integrations

🚀 使用案例

案例1：从头开始实现代码

📊 从头实现简易代码

写完的代码发现运行会报错，看 Claude Code 的输出有提示是因为 yfinance 读取股票数据遇到了问题，于是给以下提示词，让 Claude Code 更换一个股票数据库：

能否换个库，不用 yfinance，用其他的库来获取股票数据

但是这里画的图有点问题，图的标题和坐标轴的文字显示异常：

于是继续让 Claude Code 修复该问题：

这里图片中的字没有正常显示，怀疑是中文无法正确显示，修复该问题

🏗️ 从头实现复杂项目代码

案例2：辅助代码库学习

把代码库的架构整体性画一个 mermaid 图，方便第一次接触这个代码的人了解代码库的整体架构，mermaid 图输出结果保存到 megatron_mermaid.md

模型生成的 mermaid 上传到 mermaidchart 中可以看到代码库的高级架构图示：

案例3：在已有代码库基础上修改代码

在给定的 framework 上 fix issue 或者 add new feature 是比起从头写一个 framework 更加真实的需求。

📦 安装流程

第一步：安装 Gemini CLI

npm install -g @google/gemini-cli

第二步：启动和配置

直接在终端输入 `gemini` 即可开启：

主题一般选择默认：

第三步：账号登录

一般个人使用选择 google 账号登录（注意这里登录可能需要科学上网），会自动跳转到 google 的登录界面，登录后即可开始使用：

✨ 功能特点

📦 快速上手

第一步：安装 Qwen Code

npm i -g @qwen-code/qwen-code

第二步：获取 API Key

前往 https://bailian.console.aliyun.com/#/home 获取 API Key

第三步：设置环境变量

export OPENAI_API_KEY="your_api_key_here"
export OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
export OPENAI_MODEL="qwen3-coder-plus"

第四步：启动 Qwen Code

在终端输入 `qwen` 即可启动

🌟 优势特色

🎯 使用方式

第一步：访问 ChatGPT 官网

访问 https://chatgpt.com/ 侧边栏点击 Codex

第二步：开始使用

点击开始使用

第三步：连接到 GitHub

连接到 GitHub，可以选择一个自己的仓库作为初始环境

⚙️ 工作流程

根据我们上一步给定的代码库，这里 Codex 会给出一些任务建议作为启动任务感受一下：

点击开启后会自动开始这三个任务：

点击正在运行的任务可以看到 Agent 是正在如何处理任务的：

任务完成后可以查看完成的结果：

点击以下的"已工作 x 分 x 秒"可以查看完整的工作日志：