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作为跨平台代理客户端并提供两种配置路径。方式 AAI 引导配置推荐复制以下提示词到任意 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.操作系统与方案选择操作系统推荐方案适用人群核心工具链 WindowsWSL2 Ubuntu方案 A追求兼容性、未来可能接触 Linux 服务器WSL2 → nvm → Node.js → Git → Python → tmux WindowsWindows 原生方案 B不想装虚拟机、纯桌面开发Winget → Node.js → Git → Python macOSHomebrew 路径macOS 原生用户Homebrew → Node.js → Git → Python → tmux LinuxAPT 路径Ubuntu/Debian 用户apt → nvm → Node.js → Git → Python → tmux2.核心工具一览无论哪种方案最终安装的工具栈是一致的工具用途安装方式Git版本控制克隆仓库系统包管理器 / wingetNode.js (via nvm)运行 CLI 工具、lint 检查nvm install --ltsPython 3.8prompts-library 等工具依赖系统包管理器 / 官网tmux终端复用AI 蜂群协作基础apt install tmux/brew install tmuxAI CLI 工具Codex / Claude Code / Gemini CLInpm / 官网安装3.AI CLI 工具快速配置环境搭建完成后配置 AI CLI 的核心思路是“全权限 单字母启动”alias ccodex --enable web_search_request -m gpt-5.3-codex-max -c model_reasoning_efforthigh --dangerously-bypass-approvals-and-sandbox alias ccclaude --dangerously-skip-permissions alias ggemini --yolo配置后执行source ~/.bashrc生效之后一个字母即可启动对应的 AI 编程助手。为什么推荐全权限模式Vibe Coding 的核心是“让 AI 干活”。每次操作都手动确认会严重破坏心流。--dangerously-bypass-approvals-and-sandbox等标志跳过确认对话框让 AI 像真正的结对编程伙伴一样自主执行。仅在你不信任的代码库中才应使用保守模式。4.第三步IDE 配置开发工具链就绪后选择并配置你的代码编辑器。项目支持三种主流方案其中VS Code 是最通用的选择Cursor 和 Windsurf 则是 AI 原生的替代品。1.IDE 对比特性VS CodeCursorWindsurf类型通用编辑器AI 原生 IDE基于 VS CodeAI 原生 IDEAI 能力通过扩展实现内置CmdK 编辑 / CmdL 聊天 / CmdI Composer内置Cascade 等费用免费订阅制新用户免费额度扩展兼容最丰富兼容 VS Code 扩展有限适合人群所有人追求深度 AI 集成的开发者想免费体验 AI IDE 的新手2.VS Code 必装扩展无论使用哪种操作系统以下扩展是 Vibe Coding 开发的标配扩展用途Remote - WSLWindows 用户连接 WSL2 环境方案 A 必装GitLensGit 增强可视化Prettier代码格式化ESLintJavaScript/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/opencode2.免费模型提供商提供商模型获取方式Z.AI推荐GLM-4.7API 控制台 注册获取 KeyMiniMaxM2.1API 控制台 注册获取 KeyHugging FaceKimi-K2-Instruct / GLM-4.6Token 创建页 创建 TokenOllama本地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 develop2.安装项目依赖本项目运行make lint需要 Node.js 环境和 markdownlint-cli# 安装 markdownlint-cli全局 npm install -g markdownlint-cli # 验证 lint 是否可用 make lintprompts-library 工具Excel ↔ Markdown 互转需要 Python 依赖pip install pandas openpyxl PyYAML rich InquirerPy3.项目级配置同步项目在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.comHTTP/2 200Gitgit --version版本号 ≥ 2.xNode.jsnode --version版本号 ≥ 16Pythonpython3 --version版本号 ≥ 3.8tmuxtmux -V版本号 ≥ 3.xAI CLIclaude --version或codex --version版本号输出OpenCode免费opencode --version版本号输出Lint 工具make lint无错误输出仓库克隆ls AGENTS.md文件存在全部通过后你的 Vibe Coding 工作站就完全就绪了。6.常见问题排查问题可能原因解决方案git clone超时代理未开启或 TUN 模式未启用开启 FlClash TUN 模式或手动设置export https_proxyhttp://127.0.0.1:7890make lint失败未安装 markdownlint-clinpm install -g markdownlint-clinvm: command not foundnvm 未正确加载执行source ~/.nvm/nvm.sh或检查.bashrc中的 nvm 初始化行prompts-library 报错缺少 Python 依赖pip install pandas openpyxl PyYAML rich InquirerPyAI CLI 无法连接API Key 未配置或网络问题检查 AI CLI 的认证配置确认网络代理已开启备份脚本权限不足Shell 脚本无执行权限chmod x assets/repo/backups/一键备份.sh7.下一步环境搭建只是起点。以下是推荐的阅读路线帮助你从“环境就绪”快速进入“Vibe Coding 实战”Tool Ecosystem Primer— 了解项目中的 AI CLI 工具、MCP 服务器、编辑器扩展等完整工具生态Overview— 回顾项目全貌理解知识资产体系Quick Start— 用最快的方式完成你的第一个 Vibe Coding 项目Repository Architecture Overview— 深入理解仓库的三层知识结构与模块边界如果你是刚接触 Vibe Coding 的新手建议按Overview → Quick Start → 本页 → Tool Ecosystem Primer的顺序阅读形成完整的认知闭环。下一章工具生态之门