怎么用这份教程
- 你不需要“学完再开始”：照着做完第 1 节，你就能跑出第一个结果。
- 每一节都给你一份「可直接复制」的提示词，让 AI 变成你的编程教练。
- 把验证写清楚：每次只做一个能在 10 分钟内验证的小任务（能跑、能看见、能确认）。
- 遇到卡点就贴回去：报错信息 + 复现步骤 + 相关代码 = 最高效的学习路径。
1️⃣ 环境搭建 & 工具安装（从 0 到能跑起来）
这一节的目标很简单：把你的环境准备到「可以复制粘贴命令 → 跑出结果 → 知道怎么验证」。 我更推荐 Codex + GPT-5.2，其次是 Claude Code + Opus 4.5。
先选你的路径（决定你要装哪些东西）
安装指导提示词（让 AI 手把手带你装好）
安装命令和下载入口经常变化。本页给你最稳的方式：把你的系统/偏好说清楚，让 AI 输出最新的链接与命令，并告诉你每一步怎么验证。
官方下载入口（你可以直接点开）
跟着做：把“终端 + 本地预览”跑通
1) 打开终端（Terminal）
- 按
⌘ + Space打开 Spotlight，输入Terminal，回车。 - 看到一个黑/白色窗口，能输入命令并回车执行。
- 按
Win键，搜索Windows Terminal或PowerShell，回车。 - 看到一个窗口，能输入命令并回车执行。
- 在应用列表里搜索
Terminal（或Konsole/GNOME Terminal）打开。
2) 验证基础工具是否可用
把下面命令逐行复制到终端执行，看到版本号即可。
git --version
python --version
node --version
npm --versiongit --version
python3 --version
node --version
npm --versiongit --version
python3 --version
node --version
npm --version如果某一行提示 “command not found”，回到上面的下载入口把对应工具装好即可。
2.5) 如果缺少工具：怎么装（按需展开）
新手建议优先走“下载并安装”的方式（最少踩坑）。如果你更喜欢命令行安装，也可以把你的系统告诉 AI，让它给最新的命令（上面已提供安装提示词）。
macOS
- Git：通常跟随 Xcode Command Line Tools 安装。
xcode-select --install- Python / Node.js：优先使用官网安装包（见右侧下载入口）。
- 可选：如果你已经有 Homebrew，可以用
brew install python node。
Windows
- 最省事路线：装
GitHub Desktop（它会一起解决 Git），再装 Python 与 VS Code。 - CLI Git（可选）：用官网安装包（见右侧下载入口），或在 PowerShell 里用
winget。
winget install -e --id Git.Git- Python：优先官网安装包；安装时勾选 “Add Python to PATH”。
- Node.js：优先官网安装包（LTS）。
Linux（以 Debian/Ubuntu 为例）
sudo apt-get update
sudo apt-get install -y git python3Node.js 在不同发行版上版本差异较大，建议走官网或让 AI 根据你的发行版给出最稳的安装方式。
3) 建一个文件夹，并在本地跑起来一个网页
目标：你能打开一个本地网址，看到网页正常显示。
mkdir vibe-demo
cd vibe-demo
"<h1>Hello Vibe Coding</h1>" | Out-File -Encoding utf8 index.html
py -m http.server 8000然后在浏览器打开 http://localhost:8000
mkdir vibe-demo
cd vibe-demo
printf '%s\n' '<h1>Hello Vibe Coding</h1>' > index.html
python3 -m http.server 8000然后在浏览器打开 http://localhost:8000
mkdir vibe-demo
cd vibe-demo
printf '%s\n' '<h1>Hello Vibe Coding</h1>' > index.html
python3 -m http.server 8000然后在浏览器打开 http://localhost:8000
4) 可选：如果你想用 CLI（Codex / Claude Code）
这一步不是必需，但它会让你进入“AI 直接改代码 + 跑命令”的高效率状态。 由于不同产品的安装与登录命令会变化，建议用上面的「安装指导提示词」让 AI 输出最新步骤。
- 前置：确保
node与npm可用（见第 2 步验证）。 - 安装后：在终端运行
codex --help或claude --help验证。 - 建议：先用 Web/IDE 跑通闭环，再上 CLI。
一键复制：开场提示词（适用于任何工具）
Hi AI，我从来没有编程过，但我想通过 Vibe Coding 做一个小产品。
请你用“手把手”的方式带我开始：每次只做一个可以在 10 分钟内验证的小任务。
你需要：
1) 先问我 3-5 个关键澄清问题（目标、输入、输出、验证方式、约束）
2) 然后给出第一步任务（MVP 的最小切片）+ 明确验证方法（我应该看到什么输出/页面变化）
3) 给出我需要复制粘贴的命令和代码（尽量少步骤）
4) 如果需要联网，请优先给不联网的本地验证方案- 你知道如何打开终端，并能复制粘贴命令运行。
- 你能在本地启动一个网页并通过
http://localhost:8000访问。 - 你有一个可用的编辑器（VS Code 或 Cursor），能打开文件夹修改文件。
2️⃣ 整理需求：把脑子里的想法变成 PRD
你不需要“懂产品经理”才能写 PRD。你只要把想法尽量具体地写出来，然后让 AI 帮你整理成结构化文档。
输入你的想法
可复制的 PRD 提示词
把下面内容完整复制给 AI，让它帮你输出一份结构清晰的需求文档。
3️⃣ 拆解任务：找到 10 分钟内可验证的第一步
输入/粘贴你的 PRD（或上一节 AI 输出）
可复制的「第一步任务」提示词
不要在同一个对话窗口聊太久：对话越长，模型越容易“跑偏”。每完成一个小任务，就开一个新对话，把最新代码/结论贴进去继续。
4️⃣ 持续迭代：每次都要有明确的验证方法
填写你当前的状态
可复制的「下一步迭代」提示词
5️⃣ 修复 Bug：把问题描述“可调试化”
绝大多数 bug 并不需要“更聪明的你”，而需要“更清晰的输入”。把期望、实际、报错、环境写清楚，AI 才能有效帮你定位问题。
把你的 bug 写清楚
可复制的 Debug 提示词
6️⃣ 学点软件工程基础：让你更能“持续做下去”
选择你的阶段
一键复制：学习计划提示词
让 AI 给你一个“够用就好”的学习路线，不求全，只求能继续推进你的项目。
7️⃣ 开发工具和 GitHub：把修改变成“可控的进度”
最小 Git 工作流（够用就好）
新手推荐：GitHub Desktop（几乎 0 命令行）
- 安装
GitHub Desktop，登录你的 GitHub 账号。 - File → Add Local Repository：把你的项目文件夹加进去。
- 在左侧填提交信息 → Commit → Publish repository。
- 之后每次改完：Commit 一次，再 Push 一次（就像“存档”）。
Hi AI，我是零基础。我想用 GitHub Desktop 管理代码并推送到 GitHub，请你手把手教我：
1) 我需要先准备哪些账号/软件
2) 如何把本地文件夹变成一个 Git 仓库（在 GitHub Desktop 里点击哪里）
3) 如何第一次发布到 GitHub（Publish repository）
4) 日常最小工作流（我改完代码后按什么顺序点）
5) 常见报错/冲突怎么解决（尽量用图形界面方式）# 只要记住这四条就能开始：
git status
git add -A
git commit -m "feat: 完成第一个可运行版本"
git pushHi AI，我从来没有用过 Git。请你一步步教我把当前项目提交到 GitHub：
1) 我需要安装/准备什么
2) 从 git init 开始到推送到 GitHub 的完整命令
3) 每一步我应该看到什么输出，遇到常见报错怎么办
4) 给我一个“新手不容易踩坑”的最小工作流提交信息生成器（可选）
8️⃣ 服务器或 Cloudflare：先用 Pages，把复杂度锁在门外
Cloudflare Pages 部署清单（静态站）
- 打开是 404：通常是 Root directory 选错了（应为
page/vibecodingtutorial）。 - 页面空白：打开浏览器控制台看报错，检查
script.js/style.css是否路径正确。 - 需要构建吗：纯静态站点不需要，Build command 留空即可。
- Output directory：对本项目填
.（当前目录）。
cd page/vibecodingtutorial
python3 -m http.server 8000然后访问 http://localhost:8000
一键复制：Cloudflare 部署提示词（可选）
当你想要更进一步（例如：加一个 API / 数据库）时，把这个 prompt 给 AI。
9️⃣ 积累 Vibe Coding 经验：让正反馈滚起来
你在做的不是“写代码”，而是在建立正反馈
- 每次只做一个能验证的小切片：能跑、能看见、能确认。
- 把 prompt 当成资产：保存、复用、迭代。
- 遇到问题就写清楚：期望/实际/报错/环境/最小复现。
- 当项目变大，再补工程基础：结构、测试、部署。