从 0 到 1 用 Vibe Coding 写自己的项目

适合人群：会基本电脑操作、想用 AI 编码工具从零做出第一个真实项目的读者。不要求完整的编程基础，但需要愿意动手验证每一步结果。

核验时间：2026-09-18 18:39:34 +08:00。AI 编码工具、模型和定价更新很快，安装方式、价格与功能请以文中链接的官方页面为准。

本文与《Vibe Coding 入门教程》《常见编程语言与应用场景》配套：前者讲 Vibe Coding 的理念与基础流程，后者讲语言选型，本文讲“真正做出一个项目”的完整过程。

你将学会

读完这一章，你能：

• 把一句话想法写成可验收的一页产品说明；
• 用「探索 → 计划 → 切片实现」的节奏推进项目，而不是一次性要一个大应用；
• 每个切片都做验证与回退，出问题时用证据定位而不是「猜修复」；
• 用独立审查收口，写出 README，并按清单决定是否能交付。

先看结论

“从 0 到 1 写自己的项目”不是对 AI 说一句“帮我做个网站”，然后等它交付。它是下面这条流程，每一步都留下可以检查的产物：

一句话想法
  -> 一页产品说明（目标 + 验收标准）
  -> 选工具 / 搭环境
  -> 让 AI 探索现状
  -> 让 AI 出计划（拆成小切片）
  -> 每个切片：实现 -> 验证 -> 提交
  -> 独立审查 -> 修复
  -> README + 交付（必要时发布）+ 复盘

三条纪律贯穿全程：

1. 小步可验证：每次只推进一个“能看见的行为变化”，做完立刻验证，验证通过才提交。
2. 人对结果负责：AI 负责实现和解释，你负责目标和验收；“AI 说完成了”不等于完成。
3. 证据不靠感觉：每个结论都要有 diff（改动对比）、命令输出或实际操作作为证据，不靠“看起来不错”。

工具推荐（详见第二部分）：

• Claude Code（Anthropic）：终端为主的高效编码代理，适合习惯命令行的人。
• Codex（OpenAI）：同一 agent 覆盖 ChatGPT、编辑器与终端，适合已有 ChatGPT 订阅、想要云端与后台自动化的用户。
• Cursor：AI 优先的编辑器，图形界面友好，适合完全新手。
• opencode（开源，国内推荐）：免费开源的编码代理，可接任意模型（含国产模型），有完整中文文档。

选择原则很简单：先用你能最快装上并登录的那一个走完全程。工具会换，工作流不会。

快速导航

总体思路 · 工具选择 · 准备环境 · 一页说明 · 交给 AI · 探索与计划 · 切片实现 · 验证与回退 · 审查与加固 · 交付与发布 · 5 天时间线 · 失败模式 · 常见问题 · 官方入口

一、AI 时代的从 0 到 1 是什么

1. “0”和“1”分别是什么

• 0：一个模糊的想法，比如“我想要一个记账的东西”。
• 1：一个能运行、能被验证、能讲清楚的最小产品：你可以打开它、完成核心操作、刷新不丢数据、遇到错误有提示，并且有一份 README 说明它是什么、怎么用、有什么已知限制。

注意：“1”不等于“功能齐全”。第一个项目的目标是把一条完整链路走通，而不是做一个比肩成熟软件的产品。

2. AI 改变了什么、没改变什么

环节	以前	用 AI 之后	谁来负责
写代码	逐行手写	AI 快速生成，你审查	你（审查）
查资料	搜文档、翻论坛	直接问 AI，让它解释	你（判断对错）
运行调试	自己排查	AI 定位 + 你验证	你（验证）
定目标与验收	你	还是你	你（不可外包）
判断“能不能交付”	你	还是你	你（不可外包）

一句话：AI 大幅降低实现的成本，但没有降低定义问题和验收结果的责任。项目失败的原因，通常不是代码写不出来，而是目标模糊、验收缺失、没人验证。

3. 狭义 Vibe Coding 与工程化 Vibe Coding

一句话：“能跑就行”的原型玩法，和“有人对目标、约束、审查、上线负责”的工程化玩法，是两回事。 本文教你的是工程化版本——保留速度优势，同时保留工程纪律（一页说明、小切片、验证、提交、审查）。

概念辨析见《Vibe Coding 入门教程》；一旦涉及账号、权限、付款、隐私、生产数据或长期维护，就必须走工程化版本。

二、选工具：Claude、Codex、Cursor 与 opencode

0. 三个选择原则

1. 先一个，后多个。用同一个工具完整走过一遍流程，再考虑尝鲜其他工具。四个同时学只会四个都学不会。
2. 形态优先于品牌。喜欢图形界面就选编辑器类，喜欢终端就选命令行类；形态决定你每天愿不愿意打开它。
3. 网络与付费是现实约束。海外工具可能涉及网络和支付门槛；国内用户可优先考虑 opencode 搭配国产模型。

先认识终端（命令窗口）。下面所有安装命令都在终端里执行，先花一分钟认识它：

• Windows：按 Win 键（或点开始菜单），输入 powershell，打开“Windows PowerShell”，看到类似 PS C:\Users\你的名字> 的提示符就成功了；把命令粘贴进去、按回车执行。
• macOS：打开“终端（Terminal）”应用（聚焦搜索里输入 Terminal）。

以后本文出现“运行某命令”，都是指：在这个窗口里粘贴该命令并按回车。本文全部命令默认在原生 Windows（PowerShell）下执行，不需要 WSL（它是 Windows 上运行 Linux 的子系统，需要单独安装）。

1. Claude Code（Anthropic）

是什么：Anthropic 的 agentic 编码工具，能读取整个代码库、修改文件、运行命令；提供终端 CLI、VS Code / JetBrains 扩展、桌面应用和浏览器等多种形态。

适合谁：习惯终端、想让 AI 直接操作项目文件并运行命令的人；已有 Claude 订阅的用户。

安装（Windows PowerShell）：

irm https://claude.ai/install.ps1 | iex

macOS / Linux / WSL 用户使用：

curl -fsSL https://claude.ai/install.sh | bash

官方推荐原生安装（会自动后台更新），也支持 Homebrew 和 WinGet。多数使用形态需要 Claude 订阅或 Anthropic Console 账户，以官网为准。

特色：CLAUDE.md 项目指令文件、会话管理、计划模式、MCP 工具连接、子代理、定时任务（Routines），以及 GitHub Actions / CI 集成。同一套项目配置在终端、IDE、桌面和网页端通用。

官方入口：Claude Code 文档；产品与定价见 code.claude.com。

2. Codex（OpenAI）

是什么：OpenAI 的编码 agent，官方定位是“同一个 agent，出现在 ChatGPT、编辑器和终端”。形态包括：ChatGPT 应用内、Codex IDE 扩展、Codex CLI、Codex 云端环境。

适合谁：已有 ChatGPT 订阅的用户；想跨设备继续同一任务的人；需要多 agent 并行处理（worktrees / 云端环境）、定时后台任务（issue 分诊、监控）和自动代码审查的团队。

特点：多 agent 工作流；Skills（把你的团队规范和流程教给 Codex，之后每个任务都自动应用）；代码审查（对未提交改动、某个提交或目标分支做审查，不修改工作区）；CLI 支持会话恢复（codex resume）、图片输入、子代理、联网搜索、MCP、云端任务。

安装：以 Codex 开发者文档 提供的安装方式为准；安装后终端运行 codex 进入交互。

官方入口：openai.com/codex。

3. Cursor

是什么：AI 优先的代码编辑器（IDE），把 Agent 模式、Tab 智能补全、局部编辑快捷键（Windows 为 Ctrl+K，macOS 为 Cmd+K）都做进编辑界面；另有云端 agent、CLI 和 Slack 协作。支持在多个厂商的前沿模型中切换。

适合谁：完全新手、喜欢图形界面、想“边看代码边改”的人；也是从传统编辑器过渡到 AI 工作流成本最低的选择。

安装：从 cursor.com/download 下载对应系统的桌面版本。

注意：编辑器体验友好不代表可以跳过验证。它改的是你的真实文件，同样要读 diff、跑检查、实际操作。定价与免费额度以官网定价页为准。

官方入口：cursor.com。

4. opencode（开源，国内推荐）

是什么：开源的 AI 编码代理，提供终端界面（TUI）、桌面应用和 IDE 扩展三种使用方式。自带免费模型额度，也可以连接任意提供商的任意模型——通过 Models.dev 支持 75+ 个 LLM 提供商，包括国产模型和本地模型。不想自己挑模型的话，可以直接用它官方精选并测试过的 Zen 服务。

为什么国内用户优先考虑它：

• 软件本身免费开源，起步成本为零；
• 可接入国产模型 API（DeepSeek、智谱 GLM、Kimi、通义等），网络与支付更省心；
• 隐私优先设计：不存储你的代码和上下文数据；
• 支持用 GitHub Copilot、ChatGPT、Claude 账号登录复用已有订阅；
• 官方文档有完整简体中文版本，且更新频繁。

安装：

# macOS / Linux
curl -fsSL https://opencode.ai/install | bash

# 跨平台（需要 Node.js）
npm install -g opencode-ai

# Windows 备选
choco install opencode     # Chocolatey
scoop install opencode     # Scoop

Windows 用户已在用 WSL 的话可以获得官方推荐的最佳体验；没有 WSL 也没关系，上面的 Chocolatey / Scoop / npm 方式在原生 Windows 下同样可用（本文全流程不要求 WSL）。安装后常用命令：/connect 配置模型提供商，/init 分析项目并生成 AGENTS.md，Tab 键切换计划模式，/undo 撤销修改，/share 分享会话（默认不分享）。

官方入口：opencode.ai（含简体中文）；文档 opencode.ai/docs；国内可访问镜像站点 opencodeai.cn。

5. 一张表决定用哪个

你的情况	推荐
完全新手，想要图形界面，边看边改	Cursor
习惯终端，已有 Claude 订阅	Claude Code
已有 ChatGPT 订阅，想云端+多端接力	Codex
想免费开源起步，接国产模型，隐私优先	opencode
还没想好	用你能在 30 分钟内装上并跑通的那个

工具	形态	项目指令文件	费用模型（以官网为准）
Claude Code	终端 / IDE / 桌面 / 浏览器	CLAUDE.md	订阅或 Console 计费
Codex	ChatGPT / 编辑器 / 终端 / 云端	AGENTS.md	随 ChatGPT 方案
Cursor	编辑器为主 + CLI	.cursor/rules 等	订阅制
opencode	终端 / 桌面 / IDE	AGENTS.md	软件免费；模型费自理（任意提供商）或官方 Zen 服务

“项目指令文件”是什么、怎么写，见第七部分。

三、准备环境（30 分钟）

所有命令都在终端里执行（Windows 下是 PowerShell，打开方式见第二部分开头）。先熟悉六个高频词，后面看到它们就不会卡住：

• 终端 / 命令行：敲命令的窗口，本文指 PowerShell。
• 提交（commit）：给项目拍一张“快照”，以后随时能回到这个点。
• diff：改动对比，显示“哪里被改了”。
• localStorage：浏览器提供的本地存储，数据只保存在你的电脑上。
• 依赖：项目引用的现成第三方代码库。
• 控制台（Console）：浏览器开发者工具（按 F12 打开）里的报错面板。

1. 安装三样基础工具

工具	用途	获取方式
Git	版本管理，你的安全网	git-scm.com 或 winget install Git.Git
Node.js LTS	多数 AI 工具与前端工具的运行基础	nodejs.org
现代终端（可选）	运行命令更舒服	Microsoft Store 搜索“Windows Terminal”安装（Win11 一般已预装）；不装也能用系统自带的 PowerShell

装完后在终端验证：

git --version
node --version

两条命令都能输出版本号即通过。

2. 安装并登录你选的 AI 工具

按第二部分对应小节的命令安装，完成登录或配置 API Key。检查点：在项目目录里启动工具，让它回答“这个目录里目前有哪些文件”——Cursor 里打开这个文件夹；Claude Code / Codex / opencode 在终端里先 cd 进项目目录再运行对应命令。它能正确回答，说明权限和路径都通了。

3. 建项目和第一次提交

mkdir my-first-app
cd my-first-app
git init
git config user.name "你的名字"
git config user.email "你的邮箱"

创建 README.md 写上项目名和一句话简介。创建文本文件有两种简单方式：① 用记事本——右键“新建 → 文本文档”，写好内容后“另存为”，文件名改成 README.md，“保存类型”选“所有文件”；② 直接让你安装的 AI 工具创建（例如对它说“帮我在项目根目录创建 README.md，内容是：……”）。.md 就是纯文本文件，记事本就能编辑。

然后完成第一次提交：

git add README.md
git commit -m "chore: 初始化项目"

4. 密钥管理（从一开始就做对）

规则只有一条：API Key 永远不进代码、不进提示词、不进提交。

• 放在本机环境变量（操作系统里存的小型配置项，不随代码走）或工具自带的登录里，不要写死在源码；
• 项目根目录建一个 .gitignore——它就是一份“哪些文件不要提交”的清单（创建方式同上：记事本另存为，或让 AI 工具创建），至少包含：

.env
node_modules/
*.log

（如果在 macOS 上开发，按需要再加一行 .DS_Store。）

• 每次提交前在 git status 和 git diff 里扫一眼有没有疑似密钥的内容。

5. 准备环境检查点

• git log --oneline 能看到 1 条提交；
• AI 工具能读到你的项目目录并回答文件问题；
• README 存在，.gitignore 已建；
• 你清楚密钥放在哪里，且不在源码里。

四、第 1 步：把想法写成一页产品说明

1. 为什么必须写

AI 不会读心。它默认会“自由发挥”，而自由发挥正是项目中后期失控的根源。一页说明的作用是：把“我想要一个记账的东西”变成AI 和你都能验证的任务。

把下面模板存成项目里的 产品说明.md，每次开新会话先让 AI 读它。

2. 模板

模板（占位符 + 必填区块）见《Vibe Coding 入门教程》的“写一页产品说明”——把 <……> 替换成你的真实内容，整段替换好后再发给 AI。下面给一个填好的例子。

3. 填好的例子：极简记账本

# 目标
构建一个只在本机运行的极简记账本，帮助我记录日常支出。

# 用户场景
我打开页面，记一笔支出（金额、分类、日期、备注），看到列表和当月合计，
能按分类筛选，能修改和删除，数据保存在浏览器本地，可以导出 JSON 备份、也能导入恢复。

# 技术约束
- 纯 HTML/CSS/JavaScript，单页应用，不用框架、不用构建工具
- 数据保存在浏览器 localStorage
- 不做：登录、云同步、多设备、多用户、支付、图表报表
- 不新增第三方依赖

# 验收标准
- 记一笔支出后，列表即时更新
- 刷新页面后数据仍在
- 金额只接受大于 0 的数字；非法输入有提示且不写入数据
- 当月合计随新增/删除正确变化
- 分类筛选正确；切换到"全部"恢复完整列表
- 删除前有确认；确认才删除
- 导出的 JSON 能重新导入；导入非法 JSON 时不覆盖现有数据并给出提示
- 列表为空时有引导文案；窗口变窄时不出现横向滚动条

# 工作方式
1. 先阅读项目文件和本说明。
2. 先给出实现计划，不要立即编码。
3. 我确认后再按小步骤实现，一步一验证。
4. 完成后给出 diff 摘要、验证命令、实际结果和未验证风险。

4. 验收标准的写作要点

• 可观察：不要写“体验流畅”，要写“刷新后数据仍在”。
• 包含失败路径：至少 2 条关于“出错时会怎样”（非法输入、导入失败……）。
• 数量克制：5 至 8 条，能在 5 分钟内逐条验证。
• 逐条可测：写完后自问“我怎么验证这条？”答不上来就重写。

5. 检查点

• 产品说明.md 已存在，验收标准 5 条以上且逐条可验证；
• “不做清单”至少 3 条；
• 你的工具已读过这份说明，并能复述核心目标。

五、第 2 步：把文档交给 AI，再开工

文档写完 ≠ AI 知道。这一步把「你写的说明」变成「它每次都会读的上下文」。

1. 按顺序做四件事

1. 存成文件：把一页说明存成项目根目录的 产品说明.md（有完整 PRD 就存 docs/PRD.md），并提交到 Git——文件才是长期上下文，聊天框里的字会丢。

2. 建项目指令文件：把长期不变的规矩（技术栈、目录约定、数据存哪、不做清单）写进 AGENTS.md，让 AI 每次启动自动读（见入门教程）。

3. 每次开新会话，第一句固定是：

   先读《产品说明.md》和 AGENTS.md，不要改任何文件；读完用三句话复述我的目标、约束和「不做清单」。

   复述不对就别开工——说明它没读懂，先把文档改清楚。

4. 再下发具体任务：用切片提示词下发单个切片（模板见下一节与模板库）。

2. 一页说明和完整 PRD，到底给它哪个

你的项目	给它什么
单次小练习、一次做完	一页产品说明就够
要做一阵子、可能长期维护	完整 PRD 存 docs/PRD.md；再压一页说明当「摘要」

一句话规则：每次会话先读短的（一页说明），需要细节时再让它去翻 PRD。

3. 检查点

• 产品说明.md / docs/PRD.md 已入库；
• AGENTS.md 已建，且写明「不做清单」；
• 新会话第一句固定是「先读文档、别改文件」，且它能正确复述。

六、第 3 步：探索与计划

1. 先探索，再动手

即使项目目录几乎是空的，也要让 AI 先确认“起点状态”，以复制的提示词为例：

请先不要修改任何文件。阅读当前项目目录，回答：
1. 目前有哪些文件，各自的作用是什么？
2. 项目的入口是什么（页面或程序如何启动）？
3. 我可以运行哪些命令来验证改动？（没有就说没有）
4. 如果要实现《产品说明.md》里的目标，哪些文件需要新增或修改？
5. 你发现的任何不确定点或风险。

2. 让 AI 出计划（关键步骤）

根据上一步的探索和《产品说明.md》，请给出实现计划：
1. 拆成尽量小的切片，每个切片只包含一个可观察的行为变化；
2. 每个切片写明：要做的行为、验证方式、涉及文件；
3. 明确列出第一轮"不做"的内容；
4. 指出你不确定的地方，先问我再开工。
先只给计划，不要写代码。

好计划的四个特征：

1. 每个切片都能单独验证（不是“完成整个应用”这种巨型步骤）；
2. 切片顺序合理（先能新增，再能持久化，最后才是筛选、编辑等）；
3. 写清了要碰哪些文件、不碰哪些文件；
4. 长度克制——第一轮 4 至 8 个切片足够。

记账本的好计划示例（AI 输出应达到此水平）：

#	切片	验证方式
1	页面骨架 + 空状态文案	打开页面看到空状态
2	新增支出表单 + 金额校验	输入非法金额被拦截并提示
3	列表显示 + 即时更新	新增后列表立刻多一行
4	localStorage 持久化	刷新页面数据仍在
5	当月合计	手算对比页面合计
6	分类筛选	逐类切换核对
7	编辑与删除（含确认）	改一笔、删一笔，核对合计
8	导出 / 导入 JSON（含非法文件）	导出再导入，数据一致

3. 反例：跳过计划会发生什么

直接说“帮我做一个记账应用”，AI 通常会一次性生成几百行代码：你没有机会在中途检查方向，出错时不知道从哪查，改一处坏三处，最后项目变成“不敢动的黑盒”。切片计划的意义就是把失败限制在单个切片内。

4. 检查点

• AI 给出了切片化的计划，且你确认过顺序；
• 每个切片你都知道怎么验证；
• “第一轮不做清单”已明确。

七、第 4 步：切片实现

1. 每个切片的循环

读当前状态 -> 下发单个切片 -> AI 实现 -> 你验证 -> 通过则提交 -> 下一个切片

规则：

• 一次只做一个切片（最多两个很小的）；
• 没验证通过，不要开始下一个切片；
• 每个切片验证通过后立即提交，形成可回退的点。

2. 实现提示词模板（复制后替换尖括号内容）

占位符替换规则同第四部分；一个填好的例子见本节第 5 小节。

目标：实现切片 <N>：<一个可观察的行为变化>

上下文：
- 相关文件：<路径>
- 当前行为：<现在怎样>
- 期望行为：<应当怎样>
- 验收方式：<怎么验证，包含失败路径>

约束：
- 保持现有结构和风格，不修改无关文件；
- 不新增依赖，除非先说明必要性并获得我确认；
- 不读取或输出密钥、个人数据；
- 面向用户的错误必须有清晰提示，不允许静默失败。

完成条件：
- <验收标准 1>
- <验收标准 2>
- 完成后告诉我应该运行什么命令、以及我该如何手动验证。

工作方式：
先用 1-3 句简述你准备怎么改，然后实现；结束时报告：修改的文件、验证命令、
实际结果、剩余风险和未验证项。

3. 上下文管理：什么时候开新会话

• 同一个切片内：可以在同一会话里连续对话（让它解释、修错）。
• 新切片开始时：开新会话，并附上“先读《产品说明.md》和项目指令文件（见下一节）”。
• 出现这些信号立即换会话：AI 开始忘记约束、重复问已回答过的问题、改错文件、把你的不同意图混在一起。

一句话：长会话不是勋章，是负债。 更完整的上下文管理方法见提示词与上下文工程。

4. 项目指令文件：给 AI 的“常驻说明”

除了每次粘贴《产品说明.md》，你还可以在项目里放一个常驻指令文件（Claude Code 用 CLAUDE.md，Codex 和 opencode 用 AGENTS.md，Cursor 用项目规则），AI 每次启动都会自动读取。opencode 可直接用 /init 生成初版。

入门够用的精简模板（概念、存放路径、写法）见《Vibe Coding 入门教程》的“项目指令文件”一节。如果项目要长期维护或团队协作，用下面这份更完整的工程级模板：

# 项目工程约定

本文件仅记录本项目特有事实，并继承用户全局 `AGENTS.md`、开发规范和架构规范。

## 项目概览
- 项目用途：
- 主要技术栈：
- 包管理器/构建系统：
- 主要入口：

## 目录路由
- `<path>`：职责、优先读取文件、所有权。

## 环境前置条件
- 运行时版本：
- 必需服务：
- 环境变量：仅列名称、用途和获取方式，不填写真实秘密。

## 标准命令
- 安装：
- 开发：
- 格式化：
- Lint：
- 类型检查：
- 单元测试：
- 集成/E2E：
- 构建：
- 数据库迁移：
- 安全检查：
- 代码体量与注释检查：

## 架构约束
- 模块与依赖方向：
- 分层职责与允许的依赖：
- 状态、角色、权限和错误码定义位置：
- 配置、URL、超时、阈值和功能开关来源：
- DTO、领域对象和持久化模型映射位置：
- 文件、类、函数体量阈值与注释豁免：
- 数据所有权：
- 公共接口：
- ADR/CONTEXT 位置：

## 修改约束
- 生成文件：
- 禁止或谨慎修改区域：
- 兼容性与迁移要求：

## 语气与角色模式
- 项目是否允许角色化表达：
- 允许触发词：
- 禁止使用角色语气的文档或场景：

## Commit 规范
- 提交格式：
- 默认 type：
- scope 命名：
- 标题长度：
- Body/Footer 要求：
- 提交前必跑检查：
- 禁止提交内容：

## 项目完成标准
- 必需检查：
- CI required checks：
- 代码体量与注释门禁：
- 风险等级专项门禁：
- 人工或浏览器验证：
- 发布前要求：

## 已知基线问题
- 问题、证据、影响、负责人或后续事项。

写法上是“全局约定 + 项目补充”：只记本项目特有的事实，通用规范交给上层文件。小项目不必用满，用本文开头那份精简版（项目概览 / 常用命令 / 约定 / 边界）就够。

这个文件要提交到 Git，它也是你项目资产的一部分。

5. 示例：切片 2 的完整下发

目标：实现切片 2：新增支出表单，金额只接受大于 0 的数字，非法输入有提示且不写入。

上下文：
- 相关文件：index.html、app.js、style.css
- 当前行为：页面只有空状态文案。
- 期望行为：表单包含金额、分类、日期、备注；点击"记一笔"后，合法数据进入内存列表；非法金额显示提示，不写入。
- 验收方式：1) 输入 -5 或 "abc" 被拦截并提示；2) 输入 25.5 成功加入；3) 刷新后暂不要求保留（下一个切片负责持久化）。

约束：
- 不引入任何依赖；
- 错误提示直接显示在表单下方，不要用 alert；
- 保持现有文件结构。

完成条件：
- 上述三条验收方式全部通过；
- 告诉我如何手动验证。

工作方式：
先用 1-3 句说明思路，然后实现；结束时报告修改文件、验证步骤和结果。

6. 检查点

• 每个切片都有独立的实现与验证，没有“顺带多改”；
• 项目根目录有指令文件，且已提交；
• 会话长度可控，没有在超长会话里硬撑。

八、第 5 步：验证与回退

1. 六项检查（每个切片都要做）

每个切片收尾，都过一遍六项检查：读摘要 → 看 diff → 跑检查 → 实际操作 → 安全检查 → 小步提交。

关键是你亲自跑一遍——AI 说“测试通过”但你没见到命令与输出，等于没测。逐条的做法与常见坑见代码质量与审查，清单原文见《Vibe Coding 入门教程》。

提交示例：

git add index.html app.js
git commit -m "feat: 新增支出表单与金额校验"

提交之后进入第九部分的独立审查，审查对象就是这次提交；审查发现问题，修复后再提交一次。

2. 出错了：使用调试模板，而不是“还是不行”

先把错误原文拿到手：在出问题的页面上按 F12（或右键 → 检查）打开开发者工具，切到 Console（控制台）标签，把红色文字完整复制。然后用五段式描述问题：现象 / 预期 / 复现步骤 / 证据 / 要求，最后一句写“先定位根因并给出证据，不要修改文件”。

模板原文与调试模板见《Vibe Coding 入门教程》；完整的排错流程与常见错误速查见调试与排错手册。

把“猜修复”变成“基于证据诊断”。

3. Git：你的安全网

git status                 # 我改了哪些文件
git diff                   # 具体改了什么
git log --oneline          # 历史提交点
git checkout -- <文件>     # 放弃某个文件未提交的修改（谨慎）
git revert <提交>          # 反转某次已提交的改动（安全，会新生成一个提交）

新版 Git 也可以使用 git restore <文件>，作用与 git checkout -- <文件> 相同，且更不容易误操作。

• 验证没通过，先回退或继续修，不要叠着加新功能；
• git reset --hard 会永久丢弃未提交的修改，新手阶段避免使用；
• 每次“AI 改坏了”的最大靠山就是上一个验证通过的提交点。

4. 检查点

• 六项检查全部执行过，不是抽查；
• 每个通过的切片都有对应提交；
• 至少用模板完整处理过一次报错。

九、第 6 步：审查与加固

1. 换一双眼睛：独立审查

刚写完代码的上下文会沿用原来的假设，所以审查最好开新会话（或让工具进入只读审查模式），只给 diff，不给解释：

请只审查我指定的改动，不要修改任何文件。审查范围二选一：未提交的改动（运行 `git diff`）；最近一次提交（运行 `git show HEAD`）。

重点检查：
- 与验收标准不符的行为；
- 边界与错误处理（空输入、非法输入、重复操作、刷新后状态）；
- 静默失败或"假成功"（界面说保存成功但数据没写）；
- 安全风险（密钥、把用户输入直接插入 HTML、未校验的外部数据）；
- 无关修改、多余依赖、被误删的功能；
- 看起来通过但实际没有断言的测试。

每个问题给出：严重程度（高/中/低）、精确位置（文件+行）、复现证据、影响、最小修复建议。
你认为可改可不改的也单独列出并说明理由。

2. AI 代码常见问题清单

问题	表现	怎么查
假成功	界面提示“已保存”，实际没写	刷新页面、检查存储
静默失败	出错被 catch 后什么都不提示	搜索 catch 看有没有空处理
死代码与重复	同一个逻辑两份实现	看 diff 是否又加了一遍
过度设计	两个文件的项目引入“插件系统”	对照“不做清单”
无效测试	只断言“不报错”或根本没跑	要求展示命令与输出
误删功能	改 A 时删了 B	git diff 逐段读
XSS	用户输入用 innerHTML 直接渲染	搜 innerHTML，改用 textContent

3. 什么时候需要人类专家

• 涉及真实资金、账号体系、他人数据；
• 要公开发布给陌生人使用；
• 用了许可证不明或来源可疑的代码/依赖。

第一个本机项目通常不涉及以上场景——这也是刻意设计“失败低成本”的原因。

4. 检查点

• 至少完成一次独立审查，审查发现的问题已修复或明确记录；
• 安全自查（密钥、innerHTML、网络请求）通过。

十、第 7 步：交付与发布

1. README 模板

# 项目名
一句话：这是什么、给谁用。

## 功能
- ……

## 技术栈与数据存储
- 纯 HTML/CSS/JavaScript；数据保存在浏览器 localStorage 的 `app:` 前缀键下。

## 如何使用
1. 下载或克隆本仓库；
2. 双击打开 index.html（需要本地服务器时运行 `npx serve`，访问它提示的地址）；
3. 第一件事试试：记一笔支出。

## 已知限制 / 非目标
- 不做登录、云同步、多设备；
- 数据只在本机浏览器里，换浏览器不共享。

## 开发说明
- 文件职责：index.html（结构）/ style.css（样式）/ app.js（逻辑）；
- 本项目在 AI 编码工具协助下完成，关键逻辑经过人工验证。

2. 发布前检查清单

• 能向别人解释核心数据流（数据从哪来、存到哪去）；
• 仓库中没有密钥和个人数据；
• 主流程+失败路径人工验收通过；
• 空状态、错误提示都可用；
• README 说明了运行方式、数据位置和已知限制；
• 依赖来源清楚（最好没有依赖）。

3. 发布选项（可选）

方式	适合	注意
只在本机用	自己练习	最简单
打包 zip 分享	给朋友试用	说明数据只存本地
GitHub 仓库	想积累作品集	先检查没有密钥与个人数据
GitHub Pages 等静态托管	纯前端页面公开访问	公开即任何人可见，不要放个人数据

4. 复盘（五分钟）

项目完成后花五分钟写一页 复盘.md，只回答三个问题：

1. 哪个环节最慢？为什么？
2. 哪个错误犯了两次以上？
3. 下一轮先改什么？

5. 第一个项目完成后的迭代

维护一个“需求池”（可以就是一个 Markdown 列表），每次只挑一个需求，重复同样的循环：一页说明 → 计划 → 切片 → 验证 → 提交 → 审查。项目不是一次做完的，是一轮一轮长出来的。

6. 检查点

• README 达到模板要求；
• 发布前检查清单全过；
• 复盘已完成，结论进入下一轮需求池。

十一、完整时间线：5 天做出第一个项目

以每天 60 至 90 分钟、按本文全流程做一个“极简记账本”为例：

天	任务	当天产物（不是“看了多少”）
Day 1	环境 + 项目初始化 + 写《产品说明.md》	仓库有首次提交，说明文件完成
Day 2	探索 + 计划 + 切片 1-2（骨架、表单与校验）	能新增一笔且非法输入被拦截
Day 3	切片 3-5（列表、持久化、合计）	刷新不丢、合计与手算一致
Day 4	切片 6-7（筛选、编辑删除）+ 独立审查	功能完整 + 审查记录清零
Day 5	切片 8（导出导入）+ 润色 + README + 发布 + 复盘	可交付项目 + 一页复盘

说明：

• 时间线用于管理预期，不是考核；不顺利时拉长比跳过验证好；
• 每天结束前确保工作区处于“已验证或已提交”的状态，不要留下半截改动过夜；
• 复盘只需回答：哪个环节最慢？哪个错误犯了两次？下一轮改什么？

十二、常见失败模式与对策

症状	常见原因	对策
“一句话生成整个应用”，几天后修不动	步子太大，没有中间验证点	一页说明 + 切片计划
看起来能用，其实一碰就坏	只测了顺利路径	按验收标准逐条走，包含失败路径
会话越聊越乱，AI 开始忘事	上下文过长、目标漂移	一个切片一个会话，写项目指令文件
改一处坏一处	没有提交点、一次改太多	小步提交，验证通过才继续
无限重构，功能原地踏步	没有“不做清单”和验收标准	回到《产品说明.md》对齐
密钥进了代码	习惯问题	见第三部分第 4 节；提交前扫 diff
“测试通过”但没见命令	把陈述当证据	要求贴命令与输出，亲自复跑
代码越堆越乱	只生成不审查	每轮结束做独立审查与适当整理
你会用提示词，但不会判断	跳过了理解环节	让 AI 解释数据流、出练习题，而不是替你思考

十三、常见问题

1. 完全不会编程，能走完吗？ 能走完第一个本机小项目——这正是 AI 时代最大的变化。但“走完”和“能维护”是两回事：想长期进步，建议同步补 Python / JavaScript 基础、Git 和 HTTP 概念（路线见《AI学习路线与资源.md》）。

2. 大概要花多少钱？ opencode 走“软件免费 + 模型付费”路线，可用内置免费模型零成本起步；Claude Code 为订阅或 Console 按量计费，Codex 随 ChatGPT 方案，Cursor 为订阅制。价格与包含范围以各自官网为准。工具费用之外不要有任何“教程费”——本文和官方文档足够。

3. 国内网络环境下怎么选？ 优先 opencode：开源免费、官方中文文档、可接国产模型（DeepSeek、GLM、Kimi、通义等），也可复用已有的 Copilot / ChatGPT / Claude 订阅登录。

4. Git 要学到什么程度？ 五个命令起步：status、diff、add + commit、log，再加一个 restore <文件>（旧写法 checkout -- <文件>）或 revert 用于回退。会用“提交点”保护自己，就够开始；更深的以后按需学。

5. 项目多大算完成？ 验收标准全部通过 + 你能向别人解释核心数据流 + README 完成 = 完成。不是功能越多越完成。第一个项目刻意设定为“本机、无账号、无支付”。

6. AI 写的代码我能商用吗？ 取决于你使用的工具条款和项目引入的依赖许可证。正式商用前查看工具的官方条款和依赖许可，重要场景咨询专业人士。

7. 中途想换工具怎么办？ 直接换。你的项目资产——Git 历史、《产品说明.md》、AGENTS.md/CLAUDE.md 指令文件——都是通用格式，新工具读同一套文件即可接手。

8. 怎么判断自己在真的进步？ 用四问自查：能复述数据流吗？能预测改哪里会出什么问题吗？能脱离模板写出验收标准吗？下个项目能少查哪一步？全部变“是”，你在进步。

十四、官方入口与延伸阅读

四个工具

• Claude Code 文档 · code.claude.com（产品与定价）
• Codex 产品页 · Codex 开发者文档
• Cursor · 下载页
• opencode · 文档 · 中文镜像站

基础工具

• Git 官网
• Node.js 官网
• GitHub：用 Copilot 学新语言

本文模板速查

模板	位置
一页产品说明	第四部分
交接步骤（怎么给 AI）	第五部分
探索提示词	第六部分
计划提示词	第六部分
实现提示词	第七部分
项目指令文件	第七部分
调试提示词	第八部分
审查提示词	第九部分
README 模板	第十部分
复盘三问	第十部分

同目录文档

• Vibe Coding 入门教程：Vibe Coding 的理念、第一个项目与从想法到发布的基础流程。
• 常见编程语言与应用场景：为项目选择技术栈与语言。

最后建议

• 工具会换、模型会换代，流程不会。一页说明、切片、验证、提交、审查——这套流程在哪个工具里都成立。
• 第一个项目的目标不是惊艳，是完整。完整走完一次（哪怕功能很小），你会获得比十篇教程更多的东西：对流程的肌肉记忆。
• 每个切片都问三个问题：它做了什么行为变化？我怎么知道它真的对了？如果错了，我怎么退回去？三个问题都有答案，再进入下一个切片。

把“模糊想法变成可验证任务”练成习惯，就是从 0 到 1 的真正含义。