Vibe Coding 环境搭建指南
本页是 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(虚拟网卡)模式通过操作系统网络层拦截所有流量,确保终端中的
git、npm、curl等命令也能正常访问外网。如果终端命令超时,第一反应应检查 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 实战”:
- Tool Ecosystem Primer — 了解项目中的 AI CLI 工具、MCP 服务器、编辑器扩展等完整工具生态
- Overview — 回顾项目全貌,理解知识资产体系
- Quick Start — 用最快的方式完成你的第一个 Vibe Coding 项目
- Repository Architecture Overview — 深入理解仓库的三层知识结构与模块边界
如果你是刚接触 Vibe Coding 的新手,建议按 Overview → Quick Start → 本页 → Tool Ecosystem Primer 的顺序阅读,形成完整的认知闭环。
下一章:工具生态之门
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐

所有评论(0)