第二章：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 模式开启和连通性验证：​

​

代码块​

Plain Text

你是一个耐心的网络环境配置助手。我需要配置网络代理，​

以便能够访问 GitHub、Google、Claude 等国外服务。​

我的情况：​

操作系统：[请告诉我你用的是 Windows/macOS/Linux/Android]​

我已经有一个代理服务订阅链接（机场订阅）​

请指导我使用 FlClash 客户端配置网络代理：​

如何下载安装 FlClash​

如何导入我的订阅链接​

如何开启 TUN 模式（虚拟网卡）实现全局代理​

​

​

方式 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'​

一键获取完整项目代码​

bash​

配置后执行 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​

一键获取完整项目代码​

bash​

​

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 文件模板并说明每个变量的用途​

一键获取完整项目代码​

bash​

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

​

6.第五步：项目仓库配置​

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

​

1.克隆仓库​

确保网络代理已开启（TUN 模式）​

git clone https://github.com/tukuaiai/vibe-coding-cn.git​

cd vibe-coding-cn​

git checkout develop​

一键获取完整项目代码​

bash​

2.安装项目依赖​

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

​

安装 markdownlint-cli（全局）​

npm install -g markdownlint-cli​

​

验证 lint 是否可用​

make lint​

一键获取完整项目代码​

bash​

prompts-library 工具（Excel ↔ Markdown 互转）需要 Python 依赖：​

​

pip install pandas openpyxl PyYAML rich InquirerPy​

一键获取完整项目代码​

bash​

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​

一键获取完整项目代码​

bash​

配置文件 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/ # 🔧 自定义脚本（预留）​

一键获取完整项目代码​

bash​

​

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 的顺序阅读，形成完整的认知闭环。​

​