从零开始 Vibe Coding：我的 AI 编程入门实战记录
从零开始 Vibe Coding：我的 AI 编程入门实战记录
> 本文记录了我从完全零基础到能够独立使用 AI 工具开发并部署网站的完整学习过程。Vibe Coding 的核心在于用自然语言驱动开发，但想要真正上手，仍需系统性地搭建工具链和理解工作流。
一、环境准备：搭建基础工具链
1. 网络环境配置
部分 AI 编程工具（如 Claude、Cursor 部分功能）需要稳定的国际网络连接，建议提前准备科学上网工具。
> 个人使用推荐：SakuraCat
2. AI 编程 IDE 选择
目前主流的三款工具，任选其一即可上手：
| 工具 | 特点 | 推荐场景 |
|---|---|---|
| Trae（国际版） | 字节出品，免费使用，对中文支持友好 | 初学者首选，零成本入门 |
| Cursor | 业界标杆，功能最成熟，社区生态丰富 | 长期深度使用 |
| CodeBuddy（腾讯） | 国产替代，国内访问稳定 | 网络受限时的备选 |
二、从需求到上线：第一个网页的诞生
1. 开发工作流：结构化 Prompting
经过多次迭代，我总结出了一套适合新手的 需求结构化开发流程：
我的第一个作品：wuxd-ai-coding-drab.vercel.app（需外网访问）
2. 部署前的技术储备
在将网站上线前，需要安装以下基础工具：
| 工具 | 作用 | 安装建议 |
|---|---|---|
| Terminal（终端） | 命令行操作界面 | macOS 自带 Terminal，Windows 推荐 PowerShell 或 Git Bash |
| Node.js | JavaScript 运行环境 | 官网下载 LTS 版本，附带 npm 包管理器 |
| Python | 部分 AI 工具依赖 | 建议 3.9+ 版本 |
| Git | 版本控制与代码上传 | 安装后配置用户名和邮箱 |
| GitHub | 代码托管仓库 | 注册账号，后续用作项目存储 |
3. 部署平台：Vercel 详解Vercel是目前最适合前端项目的部署平台，其核心优势在于Git 推送即部署：
- 代码推送到 GitHub 仓库
- Vercel 自动检测变更并构建
- 构建完成后自动分配域名并上线
适合场景：静态网站、React/Vue/Next.js 项目、快速原型验证。
4. 部署工作流全貌
AI 编程工具生成代码 → 本地测试 → Git 推送至 GitHub → Vercel 自动拉取 → 自动构建部署 → 全球可访问
三、部署平台选择指南
纯前端项目（静态网站/SPA）
| 平台 | 上手难度 | 免费额度 | 核心优势 | 适用场景 |
|---|---|---|---|---|
| Vercel | ⭐ | 100GB/月 | Next.js 原生优化，生态最成熟 | React/Next.js 项目 |
| Netlify | ⭐ | 100GB/月 | 表单处理内置，Git 集成丝滑 | 个人博客、作品集 |
| Cloudflare Pages | ⭐⭐ | 无限请求 | 全球 CDN 极快，边缘计算扩展 | 需要全球访问速度 |
| Firebase Hosting | ⭐⭐ | 10GB/月 | Google 生态，一键对接数据库 | 配合 Firebase 服务使用 |
全栈项目（前端+后端+数据库）
如果 AI 生成了包含用户系统、数据库、API 的完整应用（如 Todo App、AI 工具站）：
| 平台 | 特点 | 推荐指数 |
|---|---|---|
| Render | 部署最简化，支持 Web Service + PostgreSQL | ⭐⭐⭐ 新手首选 |
| Railway | Docker 友好，按量计费灵活 | ⭐⭐⭐ |
| DigitalOcean App Platform | 性能稳定，文档完善 | ⭐⭐ |
| Fly.io | 全球边缘部署，延迟极低 | ⭐⭐ 进阶选择 |
四、国内访问方案：备案与部署策略
阶段一：快速验证（前期）策略：Vercel + 国内域名（不备案）
- 购买国内域名（阿里云/腾讯云）
- 解析到 Vercel（使用 CNAME 记录）
- 通过子域名单点突破（如
project.yourdomain.com）
优势：零等待，即时上线，适合快速试错。
阶段二：正式运营（后期）
当某个项目验证成功，需要长期运营时：
- 购买云服务器：阿里云 ECS / 腾讯云 CVM（入门配置即可）
- 购买域名（若阶段一已购买则跳过）
- ICP 备案：服务器提供商处提交备案申请（约 7-20 天）
- 域名解析：将域名指向国内服务器 IP
- 部署上线：将代码迁移至国内服务器
策略总结：前期用 Vercel 快速堆砌项目验证想法，后期成功项目单独备案迁移。
五、进阶工具：Claude Code 深度使用
为什么需要 Claude Code？
Cursor、Trae 等工具本质是 模型包装商——它们在 Claude、GPT、Gemini 等模型外包裹了一层 IDE 外壳。而Claude Code是 Anthropic 官方推出的命令行编程工具，直接调用 Claude 3.5 Sonnet 等最强编程模型，能力更强、控制更精细。核心使用场景：在 Cursor/Trae 的集成终端中运行，或直接在本机终端使用。
核心工作模式
| 模式 | 命令/操作 | 适用场景 | 风险等级 |
|---|---|---|---|
| Plan Mode | 启动后先审计划 | 复杂功能开发、架构调整 | 低（人工审核后执行） |
| Auto Mode | --dangerous-auto-approve | 简单修改、信任度高的任务 | 高（AI 自动执行所有操作） |
模型配置：CC-Switch 工具
CC-Switch是 Claude Code 的第三方配置切换工具，用于切换不同的 API 供应商（非官方 API，需自行准备 Key）。常见模型特性对比：
| 模型 | 强项 | 适合任务 |
|---|---|---|
| Claude 3.5 Sonnet | 代码生成、Bug 修复、复杂逻辑 | 主力编程模型 |
| GPT-4o | 通用性强、工具生态丰富 | 日常问答、非代码任务 |
| Gemini 1.5 Pro | 超长上下文（200万 token）、多模态 | 处理视频音频、大型文档分析 |
不同阶段的模型切换策略
- 需求分析/PRD 编写：Claude 3.5 Sonnet（逻辑清晰）
- 代码生成/架构设计：Claude 3.5 Sonnet（代码能力最强）
- UI 微调/样式优化：GPT-4o（审美更稳定）
- 文档总结/注释生成：Gemini 1.5 Pro（长文本处理）
六、概念澄清：工具链关系图解
| 工具类型 | 代表产品 | 使用界面 | 核心能力 |
|---|---|---|---|
| AI 编程 IDE | Trae、Cursor | 图形化编辑器 | 代码编辑、文件管理、智能补全 |
| AI 编程助手 | Claude Code | 命令行终端 | 自动执行命令、批量修改、复杂任务编排 |
| 配置切换工具 | CC-Switch | 配置文件 | 降低 API 成本，切换供应商 |
七、API 采购指南：低成本使用策略
官方 API 价格较高，建议通过国内云厂商的代理服务降低成本：
| 渠道 | 优势 | 注意事项 |
|---|---|---|
| 阿里云百炼 | 新用户免费额度充足 | 适合初期试用 |
| 字节火山方舟 | Coding 专用模型优化 | 大模型赛道投入大 |
| Claude 官方 API | 原生体验最佳 | 需国际支付方式 |
| Google Gemini API | 免费 tier 额度 generous | 国内访问需稳定网络 |
- 开发阶段使用国内厂商的免费额度
- 生产环境再考虑官方 API 或高稳定性渠道
- 配合 CC-Switch 根据任务难度切换模型（简单任务用便宜模型）
八、学习路径总结
| 时间 | 目标 | 关键动作 |
|---|---|---|
| Week 1 | 环境搭建 | 安装 Trae → 完成第一个 Hello World 页面 |
| Week 2 | 掌握工作流 | 学习 PRD 写法 → 开发完整功能页 → 部署到 Vercel |
| Week 3 | 进阶工具 | 安装 Claude Code → 用命令行完成简单修改 |
| Week 4 | 全栈尝试 | 配置 API 供应商 → 实现前端+简单后端项目 |
| Month 2 | 国内上线 | 完成备案流程 → 项目迁移 → 持续迭代 |
- 用 Claude Code 重构现有项目代码
- 尝试全栈部署（Render + PostgreSQL）
- 完成第一个备案项目的国内上线
- 探索 AI 辅助的自动化测试流程
附录：常用命令速查
# Git 基础
git init # 初始化仓库
git add . # 添加所有变更
git commit -m "描述" # 提交变更
git push origin main # 推送到 GitHub
# Claude Code 启动（在项目目录下）
claude # 进入 Plan Mode
claude --dangerous-auto-approve # 进入 Auto Mode（谨慎使用）
# Node.js 项目常用
npm install # 安装依赖
npm run dev # 启动开发服务器
npm run build # 构建生产版本