什么是 Vibe Coding？

Vibe Coding（氛围编程）是由 AI 大神 Andrej Karpathy 在 2025年2月 提出的概念。
它的核心理念是：“Fully give in to the vibes, embrace exponentials, and forget that the code even exists.”（完全沉浸在氛围中，拥抱指数级增长，忘记代码的存在。）

在 Vibe Coding 时代，程序员不再是“代码的搬运工”，而是AI 的指挥家。你不再逐行编写代码，而是通过自然语言（Prompt）与 AI 协作，让 AI 处理所有繁琐的实现细节（Implementation），你只负责顶层的逻辑设计、审美把控和“氛围”指引。

概念拓展

• MCP (Model Context Protocol)：
  • 定义：模型上下文协议。这是 2024 年底由 Anthropic 推出的开放标准，被誉为“AI 时代的 USB-C 接口”。
  • 作用：它让 AI 模型（如 Claude, Gemini）能安全、标准地连接到你的本地数据（文件、数据库）和工具（GitHub, Slack, 浏览器）。没有 MCP，AI 只是一个聊天机器人；有了 MCP，AI 就能“看见”并操作你的电脑。
• Agent (智能体)：
  • 定义：不仅仅是回答问题的 AI，而是能执行任务的 AI。
  • 作用：在 Vibe Coding 中，Agent 可以自主运行终端命令、创建文件、运行测试、修复 Bug，直到任务完成。

MCP：全量注入 + JSON-Schema

MCP（Model Context Protocol）即模型上下文协议，采用 Host-Client-Server 三层架构，它让 AI 模型（如 Claude, Gemini）能安全、标准地连接到你的本地数据（文件、数据库）和工具（GitHub, Slack, 浏览器）。

Host (Claude Code)
    ├── Client ←──JSON-RPC──→ context7 Server              
    ├── Client ←──JSON-RPC──→ sequential-thinking Server   
    └── Client ←──JSON-RPC──→ your Server

Host 和 Client 由应用自动管理，开发者/使用者只需关注 Server。再比如 FastMCP 框架会自动处理协议细节。

MCP Server 目录结构（这里以Python为例）^[1]

my-mcp-server/
├── pyproject.toml            # 包定义（必需）
│   ├── name = "mcp-server-xxx"
│   └── version = "1.0.0"
├── src/
│   ├── server.py             # 入口，初始化 FastMCP
│   ├── tools.py              # Tool 定义（单文件，适合 <10 个工具）
│   ├── tools/                # Tool 定义（多文件，按功能拆分）
│   │   ├── __init__.py
│   │   ├── search.py
│   │   └── fetch.py
│   └── resources.py          # Resource 提供者（可选）
└── README.md

tools.py 和 tools/ 二选一，可根据数量决定。

Tool 定义示例

从这里就可以看出，其实和接口非常像，请求->回调数据，实际上多数的mcp也都可以理解成三方接口。

from mcp.server.fastmcp import FastMCP

mcp = FastMCP("weather")

@mcp.tool()
async def get_weather(location: str) -> str:
    """Get weather for a location."""
    return f"Weather in {location}: 72°F, Sunny"

if __name__ == "__main__":
    mcp.run(transport="stdio")

客户端配置结构（mcpServers）

配置示例：

{
  "args": [
    "-y",
    "@upstash/context7-mcp"
  ],
  "command": "npx",
  "type": "stdio"
}

Skill：渐进式披露 + Markdown^{[1] [2]}

Skill 是 Claude Code 的知识/流程包，本质是一个 Markdown 文件夹，用于：

• 注入领域知识（如代码规范、业务逻辑）

• 定义工作流程（如代码审查 SOP、部署流程）

• 封装可复用的脚本和模板

  （这直接导致 Skill 与 MCP 在使用体验上趋于相似）

额外说明

Skill 只能提供指导，无法执行外部 API 调用、网络请求、会话管理等操作，毕竟只是md文件夹，但是能指导cc运行脚本，包括但不限于自带的脚本资源。

目录结构^[3]

skill-name/
├── SKILL.md (必需)
│   ├── YAML frontmatter ──→ 索引层（始终加载，~100 words）
│   │   ├── name: (必需)
│   │   └── description: (必需，唯一触发机制)
│   └── Markdown 正文 ────→ 内容层（触发时加载，建议 <500 行）
└── Bundled Resources (可选) ──→ 内容层（按需加载）
    ├── scripts/      - 可执行脚本（Python/Bash）
    ├── references/   - 参考文档（Claude 判断需要时加载）
    └── assets/       - 输出资源（模板、图片，不加载到上下文）

双层架构说明：

• 索引层：YAML frontmatter 中的 name/description，始终在上下文中
• 内容层：SKILL.md 正文 + 捆绑资源，仅在触发时选择性加载

核心设计原则

description 是唯一触发机制

# ✅ 好的 description（包含触发场景）
description: >
  Comprehensive document creation and editing with tracked changes.
  Use when Claude needs to work with .docx files for:
  (1) Creating new documents, (2) Modifying content,
  (3) Working with tracked changes, (4) Adding comments

# ❌ 差的 description（太模糊）
description: A useful document tool

渐进式披露模式

是不是觉得模式1,3非常相似？我也觉得。不过 skill-creator 还是分成了这三种，就全罗列出来了

模式 1：高层指南 + 引用

# PDF Processing

# Quick start
[核心代码示例]

# Advanced features
- **Form filling**: See [FORMS.md](references/FORMS.md)
- **API reference**: See [REFERENCE.md](references/REFERENCE.md)

Claude 仅在需要时加载 FORMS.md 或 REFERENCE.md。

模式 2：按领域/变体组织

cloud-deploy/
├── SKILL.md (工作流 + 选择指南)
└── references/
    ├── aws.md    ← 用户选 AWS 时才加载
    ├── gcp.md
    └── azure.md

模式 3：条件详情

# Editing documents
For simple edits, modify XML directly.

**For tracked changes**: See [REDLINING.md](references/REDLINING.md)
**For OOXML details**: See [OOXML.md](references/OOXML.md)

工作流程

用户请求 → Claude 扫描所有 Skill 的 description → 匹配 → 加载 SKILL.md 正文 → 按需加载 references → 执行

特点：

• 宽松定义：Markdown 格式，自然语言描述
• 懒加载：渐进式加载
• 可编排：Markdown 可表达流程顺序和条件分支
• 本质：流程/知识包（SOP 手册）

Rule：行为规范 + Markdown

你给 AI 立的“规矩”。通过配置文件，告诉 AI 你的编码偏好（例如：“总是使用 TypeScript”、“不要使用 any 类型”、“代码注释必须用中文”）。

先仔细看完表格中的说明

Claude Code 上下文的完整加载机制

优先级规则

• 项目规则 > 用户规则（冲突时项目规则覆盖全局）
• 支持子目录组织：~/.claude/rules/frontend/*.md 也会被递归发现

为什么不用Skill？

个人理解：Rule是规范了Agent的边界，而Skill却是对Agent的增强（Agent会自动使用你定义的脚本来执行），Skill并不能完全替代Rule，在Skill的md里定义规范，也可以。但是反之不行。

确实使用 skill 更符合现在的方向，减少使用 tokens 以及上下文占用，但是 skill 的调用如果是自动调用的情况下，不管是 opus 或者 sonnet 都会选择性执行(模型要想偷懒)，触发都是不稳定的，除非显式地在 prompt 中说明调用。

主流 Vibe Coding 工具

Claude Code

安装

macOS, Linux, WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Windows CMD:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

NPM（官方弃用）

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

认证

首次运行：

claude

• 官方认证
  • 它会引导你进行网页认证（需订阅 Claude Pro/Team）。认证完成后，它会自动索引当前目录。
• 第三方API
  • 在下面详细说明

关于第三方认证

在C:\Users\用户名\.claude下创建settings.json文件。配置如下，替换第三方地址和api-key。env对象属性值全部必须写为字符串 而不是布尔值或者其他！

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "api-key",
    "ANTHROPIC_BASE_URL": "地址",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "claude-haiku-4-5-20251001",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "claude-opus-4-5-20251101",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "claude-sonnet-4-5-20250929",
    "ANTHROPIC_MODEL": "claude-sonnet-4-5-20250929",
    "ANTHROPIC_REASONING_MODEL": "claude-sonnet-4-5-20250929",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  }
}

GUI方式

下载

在里面可以配置对应的地址和api-key，通过页面上切换即可。

{
    // .........
    "hasCompletedOnboarding": true
}

设置Rules^[4]

编码编写规范限制

通过Rules的表格，我按照项目规则放一个写作规范~/.claude/rules/java-rules.md

进行测试

经过测试后会发现确实是按照rules中的定义来完成的代码。

设置Skill

skill相关可以按照上文Skill篇详解来手动创建，也可以从GITHUB中找寻一些比较好的Skill。例如在CC-Switch中的发现技能里有一些不错的Skill。

进行测试

进阶配置^[5]

{
  "env": {
    "HTTPS_PROXY": "http://127.0.0.1:7890",
    "HTTP_PROXY": "http://127.0.0.1:7890",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1",
    "CLAUDE_CODE_ATTRIBUTION_HEADER": "0",
    "DISABLE_INSTALLATION_CHECKS": "1",
    "ENABLE_TOOL_SEARCH": "1",
    "ANTHROPIC_AUTH_TOKEN": "sk-xxxx",
    "ANTHROPIC_BASE_URL": "https://api.eastfond.com",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "claude-haiku-4-5-20251001",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "claude-opus-4-6",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "claude-sonnet-4-6",
    "ANTHROPIC_MODEL": "claude-opus-4-6",
    "ANTHROPIC_REASONING_MODEL": "claude-opus-4-6"
  },
  "model": "opus[1m]",
  "cleanupPeriodDays": 720
}

• HTTP_PROXY / HTTPS_PROXY ： 对CC指定代理服务器配置。

• CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC ：该项为复合设置项 同时包揽：

  • DISABLE_AUTOUPDATER 禁用自动升级，如果需要这个，那么就把其他的关闭，这个打开。
  • DISABLE_BUG_COMMAND 禁用显示 /bug 反馈 命令
  • DISABLE_ERROR_REPORTING 禁用错误报告行为
  • DISABLE_TELEMETRY 禁用遥测！实际上这里面最起作用的是【禁用遥测】这一开关项，这个配置开启的话会CC会收集你的一些信息发送给官方服务器，比如调用代码生成的次数、选中的代码片段范围、提交的提示词（Prompt）类型，还有日志等等。但是国内网络懂的都懂不再详说。

• CLAUDE_CODE_ATTRIBUTION_HEADER： 是否追加客户端类型区分文本。默认值是追加，这里需要关闭，因为会导致第三方的请求缓存命中率大打折扣。

  • 该变量导出来控制是否不需要装填 billing header 到请求体中 (默认不写就是会装填 所以写成"0"，因为该值根本对我们根本没有什么作用)
  • 该内容形如 "anthropic-billing-header: cc_version=2.1.15.c7e; cc_entrypoint=cli"

• DISABLE_INSTALLATION_CHECKS： 禁用安装方式检查，最直观的就是略过检查以去除仍在使用所谓遗弃的npm安装方式所被提示的黄色警告文本显示

• ENABLE_TOOL_SEARCH： 启用ToolSearch这一Tool，该Tool的能力是将Tool们全部延后加载 在需要时会自动先调用该工具进行Tool的搜索加载 （因为默认是直接加载到上下文窗口的），用于在使用非官方上游时强制开启 tool_search 功能，默认不设置会自动判别。

• cleanupPeriodDays 用于将默认三十天删除会话记录这一时间覆盖更长，意为不需要删除旧会话。

• model该项同样属于可写可不写 因为REPL交互式TUI中的 /model 选择器会默认的将选择值写到这里 所以锁全局的意义不大（如果常更换模型的话）默认值：default

  • 且此模块设计有别名系统 即 opus 早期版本可能可以指代 claude-opus-4-5-20251101 而并不需要去记忆具体的模型ID 当前版本为4.6 则 opus 会指代 claude-opus-4-6

  • 默认值别名 default 在不同账户情况下 可能会指代给 sonnet别名 或者 opus别名 具体以打开的 列表项显示为准

Codex

安装

npm i -g @openai/codex

认证

首次运行：

codex

• 官方认证
• 第三方配置
  • 这一块可以完全参考Claude那里的
  • 个人经验：claude那里的地址不需要加/v1，但是codex这里必须要加上/v1。

Rule和Skill

Codex可以完全套用Claude上的配置。

Gemini CLI

安装

npm install -g @google/gemini-cli

认证

首次运行：

gemini

• 官方认证
• 第三方配置
  • 这一块可以完全参考Claude那里的

关于Gemini Cli 我个人体验并不好，代码效果比较差，可能前端方面的算是强项，但是对于后端效果和Claude Code差距很大。

Claude Code、Codex、Gemini Cli这三个工具MCP和Skill都可以通过CC-Switch进行配置。

OpenCode & Oh My OpenCode (开源社区之光)

OpenCode 是一个开源的、跨模型的终端编码 Agent，支持接入 OpenAI (Codex/GPT-5)、Claude、Gemini 等多种模型。而 Oh My OpenCode 是它的最强插件（类似于 Oh My Zsh 之于 Zsh），提供了多 Agent 协作功能。

安装 OpenCode

# 使用官方安装脚本 (支持 macOS/Linux/Windows WSL)
curl -fsSL https://opencode.ai/install | bash

或者

npm i -g opencode-ai

安装 Oh My OpenCode (必装插件)

这是 Vibe Coding 的精髓所在，它能让多个 Agent 并行工作。

# 安装插件
bunx oh-my-opencode install

安装过程中会询问你拥有哪些 API Key（Claude, OpenAI, Gemini 等），根据实际情况选择。我这里会用到第三方API，所以我都选择NO

核心功能：Ultrawork (极限工作模式)

Oh My OpenCode 引入了 "Ultrawork" 概念。你只需要输入一个指令，它会启动 7 个专门的 Agent（架构师、前端、后端、测试等）并行工作。

使用方法：
在 OpenCode 终端中输入：

/ulw "帮我做一个类似 Twitter 的克隆版，使用 Next.js，包含登录功能"

或者在 prompt 中包含 ultrawork 关键字。

• Oracle：战略顾问 - 只看不动手的"CTO顾问"，专门分析架构、审查代码、调试疑难，给建议但不改代码。
• Librarian：多仓库研究员 - 专查外部资料的"图书馆员"，搜GitHub代码、读官方文档、找开源实现示例。
• Explore：快速代码库搜索 - 项目内的"Ctrl+Shift+F"，快速定位"这个功能在哪"、"谁调用了这个函数"，可并行多个。
• Multimodal-Looker：媒体分析器 - 有"眼睛"的助手，专门看图片、PDF、设计稿，提取视觉信息转成文字描述。
• Metis：规划前分析顾问 - Prometheus的"前置分析师"，在做计划前先帮你想清楚"你到底要什么"，发现隐藏需求和潜在坑。
• Momus：计划审查者 - Prometheus的"质检员"，专挑计划的阻塞性问题，确保计划可执行、引用有效、没有遗漏
• Sisyphus-Junior：委托任务执行器 - 穿上Category"马甲"的"实习生"，根据任务类型动态调整模型和风格去执行具体工作。

opencode配置文件：opencode.json

配置文件路径参考：

• Linux/macOS: ~/.config/opencode/opencode.json
• Windows: %USERPROFILE%\.config\opencode\opencode.json

插件主配置文件：oh-my-opencode.json

• Linux/macOS: ~/.config/opencode/oh-my-opencode.json
• Windows: %USERPROFILE%\.config\opencode\oh-my-opencode.json

GUI

关于配置文件内容我的建议是不要手动去修改，整个opencode的配置文件很复杂，这里还是建议通过图形化工具来进行配置。

页面上有着比较详细的配置说明，第三方供应商可以直接在页面上配置，以及oh my opencode的相关配置文件。包括Skill的相关也可以通过工具进行配置。