本页是 Vibe Coding CN 项目从零到就绪的完整环境搭建路线图。无论你是 Windows、macOS 还是 Linux 用户,无论你是否有编程经验,本指南都将引导你完成网络配置、开发环境搭建、IDE 配置和 AI CLI 工具接入——最终获得一个能“与 AI 结对编程”的完整工作站。

项目采用一种独特的 “AI 驱动配置”范式:每一步都提供了可直接粘贴到 AI 对话框的提示词,让 AI 一步步指导你完成操作,而非要求你死记硬背命令。这本身就是 Vibe Coding 哲学的第一课——你描述意图,AI 执行操作

1.环境全景架构

在动手之前,理解整个环境栈的层次关系至关重要。Vibe Coding 的环境由四个递进层级组成,每一层都依赖于下一层的就绪状态:

底层是网络连通性,没有它一切都无法开始;顶层是项目特有的 Prompts、Skills 和 Workflows,它们让你的 AI 从通用助手变成领域专家。中间三层是标准的开发工具链,但因为有了 AI CLI 工具的存在,配置过程本身也可以交给 AI 来完成。

2.第一步:网络环境配置

Vibe Coding 依赖 GitHub、Claude、Google 等服务的稳定访问,因此网络环境是一切的前置条件。本项目推荐使用 FlClash 作为跨平台代理客户端,并提供两种配置路径。

方式 A:AI 引导配置(推荐)

复制以下提示词到任意 AI 对话框(ChatGPT、Claude、Gemini 网页版均可),AI 将根据你的操作系统逐步指导你完成 FlClash 的安装、订阅导入、TUN 模式开启和连通性验证:

你是一个耐心的网络环境配置助手。我需要配置网络代理,
以便能够访问 GitHub、Google、Claude 等国外服务。

我的情况:
- 操作系统:[请告诉我你用的是 Windows/macOS/Linux/Android]
- 我已经有一个代理服务订阅链接(机场订阅)

请指导我使用 FlClash 客户端配置网络代理:
1. 如何下载安装 FlClash
2. 如何导入我的订阅链接
3. 如何开启 TUN 模式(虚拟网卡)实现全局代理
4. 如何开启系统代理
5. 如何验证配置是否成功

要求:
- 每个步骤详细说明,配图描述按钮位置
- 每完成一步,问我是否成功,然后再继续下一步

方式 B:手动配置

如果你更习惯自主操作,核心步骤如下:

步骤 操作 关键动作
① 购买订阅 注册服务商并获取订阅链接 复制订阅链接备用
② 下载 FlClash 从 GitHub Releases 下载对应平台安装包 选择 .exe / .dmg / .AppImage / .apk
③ 导入订阅 打开 FlClash → 配置 → 添加 → URL 导入 粘贴订阅链接,等待节点加载
④ 开启代理 开启虚拟网卡 (TUN) + 系统代理 + 全局模式 三项全部开启
⑤ 验证 终端执行 curl -I https://www.google.com 返回 HTTP/2 200 即成功

💡TUN 模式是关键:仅开启系统代理时,部分终端应用可能不走代理。TUN(虚拟网卡)模式通过操作系统网络层拦截所有流量,确保终端中的 gitnpmcurl 等命令也能正常访问外网。如果终端命令超时,第一反应应检查 TUN 是否已开启。

验证通过后,即可进入下一步。

3.第二步:开发环境搭建

网络就绪后,需要安装基础开发工具链。项目为每种操作系统提供了完整的 AI 引导提示词——你只需复制粘贴,AI 会逐步带你走完整个流程。

1.操作系统与方案选择

操作系统 推荐方案 适用人群 核心工具链
🪟 Windows WSL2 + Ubuntu(方案 A) 追求兼容性、未来可能接触 Linux 服务器 WSL2 → nvm → Node.js → Git → Python → tmux
🪟 Windows Windows 原生(方案 B) 不想装虚拟机、纯桌面开发 Winget → Node.js → Git → Python
🍎 macOS Homebrew 路径 macOS 原生用户 Homebrew → Node.js → Git → Python → tmux
🐧 Linux APT 路径 Ubuntu/Debian 用户 apt → nvm → Node.js → Git → Python → tmux

2.核心工具一览

无论哪种方案,最终安装的工具栈是一致的:

工具 用途 安装方式
Git 版本控制,克隆仓库 系统包管理器 / winget
Node.js (via nvm) 运行 CLI 工具、lint 检查 nvm install --lts
Python 3.8+ prompts-library 等工具依赖 系统包管理器 / 官网
tmux 终端复用,AI 蜂群协作基础 apt install tmux / brew install tmux
AI CLI 工具 Codex / Claude Code / Gemini CLI npm / 官网安装

3.AI CLI 工具快速配置

环境搭建完成后,配置 AI CLI 的核心思路是 “全权限 + 单字母启动”

alias c='codex --enable web_search_request -m gpt-5.3-codex-max -c model_reasoning_effort="high" --dangerously-bypass-approvals-and-sandbox'
alias cc='claude --dangerously-skip-permissions'
alias g='gemini --yolo'

配置后执行 source ~/.bashrc 生效,之后一个字母即可启动对应的 AI 编程助手。

💡为什么推荐全权限模式? Vibe Coding 的核心是“让 AI 干活”。每次操作都手动确认会严重破坏心流。--dangerously-bypass-approvals-and-sandbox 等标志跳过确认对话框,让 AI 像真正的结对编程伙伴一样自主执行。仅在你不信任的代码库中才应使用保守模式。

4.第三步:IDE 配置

开发工具链就绪后,选择并配置你的代码编辑器。项目支持三种主流方案,其中 VS Code 是最通用的选择,Cursor 和 Windsurf 则是 AI 原生的替代品。

1.IDE 对比

特性 VS Code Cursor Windsurf
类型 通用编辑器 AI 原生 IDE(基于 VS Code) AI 原生 IDE
AI 能力 通过扩展实现 内置(Cmd+K 编辑 / Cmd+L 聊天 / Cmd+I Composer) 内置(Cascade 等)
费用 免费 订阅制 新用户免费额度
扩展兼容 最丰富 兼容 VS Code 扩展 有限
适合人群 所有人 追求深度 AI 集成的开发者 想免费体验 AI IDE 的新手

2.VS Code 必装扩展

无论使用哪种操作系统,以下扩展是 Vibe Coding 开发的标配:

扩展 用途
Remote - WSL Windows 用户连接 WSL2 环境(方案 A 必装)
GitLens Git 增强可视化
Prettier 代码格式化
ESLint JavaScript/TypeScript 代码检查
Local History 本地文件历史回溯

与之前一样,每种操作系统都有对应的 AI 引导提示词可直接使用——复制粘贴到 AI 对话框,AI 会逐步指导你完成 VS Code 或 Cursor / Windsurf 的安装与配置。

5.第四步:OpenCode CLI 配置(免费 AI 编程入口)

如果你暂时没有 AI 订阅服务,OpenCode 是一个完全免费的开源替代方案。它支持 75+ 模型,无需信用卡,是进入 Vibe Coding 世界成本最低的入口。

1.安装方式

# 一键安装(推荐)
curl -fsSL https://opencode.ai/install | bash
 
# 或使用 npm
npm install -g opencode-ai
 
# macOS/Linux Homebrew
brew install anomalyco/tap/opencode
 
# Windows Scoop
scoop bucket add extras && scoop install extras/opencode

2.免费模型提供商

提供商 模型 获取方式
Z.AI(推荐) GLM-4.7 API 控制台 注册获取 Key
MiniMax M2.1 API 控制台 注册获取 Key
Hugging Face Kimi-K2-Instruct / GLM-4.6 Token 创建页 创建 Token
Ollama(本地) Llama 2 等 本地安装 Ollama 后拉取模型

3.OpenCode 核心命令

命令 功能
/connect 添加 API Key
/models 切换模型
/init 初始化项目(生成 AGENTS.md)
/undo / /redo 撤销/重做
Tab 切换 Plan 模式(只规划不执行)

4.OpenCode 的核心思维:让 AI 执行一切

OpenCode 的设计哲学与 Vibe Coding 完全一致——把所有配置任务交给 AI。以下是实际使用场景的示例提示词:

帮我安装 filesystem MCP 服务器,配置到 opencode
克隆 https://github.com/xxx/yyy 项目,阅读 README,帮我完成所有依赖安装和环境配置
检查项目需要哪些环境变量,帮我创建 .env 文件模板并说明每个变量的用途

这种“用自然语言驱动环境配置”的模式,正是 Vibe Coding 从传统开发中解放出来的关键一步。

6.第五步:项目仓库配置

开发环境就绪后,最后一步是将本仓库克隆到本地并完成项目级配置。

1.克隆仓库

# 确保网络代理已开启(TUN 模式)
git clone https://github.com/tukuaiai/vibe-coding-cn.git
cd vibe-coding-cn
git checkout develop

2.安装项目依赖

本项目运行 make lint 需要 Node.js 环境和 markdownlint-cli:

# 安装 markdownlint-cli(全局)
npm install -g markdownlint-cli
 
# 验证 lint 是否可用
make lint

prompts-library 工具(Excel ↔ Markdown 互转)需要 Python 依赖:

pip install pandas openpyxl PyYAML rich InquirerPy

3.项目级配置同步

项目在 assets/config/.codex/ 中提供了 Codex CLI 的配置基线,可一键同步到本地:

# 将仓库内的 Codex 配置复制到用户目录
mkdir -p ~/.codex
cp -f assets/config/.codex/config.toml ~/.codex/config.toml
cp -f assets/config/.codex/AGENTS.md ~/.codex/AGENTS.md

配置文件 config.toml 包含模型选择(默认 gpt-5.2)、推理强度(xhigh)、沙箱模式(danger-full-access)、审批策略(never)等关键参数,以及多个 MCP 服务器的模板配置(默认注释关闭,按需启用)。这种“仓库内管理基线 → 复制到本地生效”的模式确保了团队配置的一致性。

4.项目目录结构一览

环境就绪后,你面前的仓库结构如下:

vibe-coding-cn/
├── README.md                        # 项目主文档
├── AGENTS.md                        # AI Agent 行为准则
├── Makefile                         # 自动化命令(lint 等)
├── CONTRIBUTING.md                  # 贡献指南
├── assets/
│   ├── documents/                   # 📚 知识库
│   │   ├── principles/              #    哲学与方法论
│   │   ├── guides/                  #    入门与方法(getting-started + playbook)
│   │   └── case-studies/            #    实战案例
│   ├── prompts/                     # 💬 提示词库(指向云端表格)
│   ├── skills/                      # ⚡ 可复用技能库(20+ Skills)
│   ├── workflow/                    # 🔄 工作流模板(auto-dev-loop 等)
│   ├── config/                      # ⚙️ 工具配置基线(Codex CLI 等)
│   ├── repo/                        # 📦 外部工具与依赖(含 submodule)
│   └── tools/                       # 🔧 自定义脚本(预留)

5.环境验证清单

完成以上所有步骤后,使用以下清单验证你的环境是否就绪:

检查项 验证命令 期望结果
网络连通 curl -I https://github.com HTTP/2 200
Git git --version 版本号 ≥ 2.x
Node.js node --version 版本号 ≥ 16
Python python3 --version 版本号 ≥ 3.8
tmux tmux -V 版本号 ≥ 3.x
AI CLI claude --version 或 codex --version 版本号输出
OpenCode(免费) opencode --version 版本号输出
Lint 工具 make lint 无错误输出
仓库克隆 ls AGENTS.md 文件存在

全部通过后,你的 Vibe Coding 工作站就完全就绪了。

6.常见问题排查

问题 可能原因 解决方案
git clone 超时 代理未开启或 TUN 模式未启用 开启 FlClash TUN 模式,或手动设置 export https_proxy=http://127.0.0.1:7890
make lint 失败 未安装 markdownlint-cli npm install -g markdownlint-cli
nvm: command not found nvm 未正确加载 执行 source ~/.nvm/nvm.sh 或检查 .bashrc 中的 nvm 初始化行
prompts-library 报错 缺少 Python 依赖 pip install pandas openpyxl PyYAML rich InquirerPy
AI CLI 无法连接 API Key 未配置或网络问题 检查 AI CLI 的认证配置,确认网络代理已开启
备份脚本权限不足 Shell 脚本无执行权限 chmod +x assets/repo/backups/一键备份.sh

7.下一步

环境搭建只是起点。以下是推荐的阅读路线,帮助你从“环境就绪”快速进入“Vibe Coding 实战”:

  1. Tool Ecosystem Primer — 了解项目中的 AI CLI 工具、MCP 服务器、编辑器扩展等完整工具生态
  2. Overview — 回顾项目全貌,理解知识资产体系
  3. Quick Start — 用最快的方式完成你的第一个 Vibe Coding 项目
  4. Repository Architecture Overview — 深入理解仓库的三层知识结构与模块边界

如果你是刚接触 Vibe Coding 的新手,建议按 Overview → Quick Start → 本页 → Tool Ecosystem Primer 的顺序阅读,形成完整的认知闭环。

                                                                                                                       下一章:工具生态之门

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐