Vibe Coding 入门教程

这一章回答一个问题：第一次接触 Vibe Coding，应该怎么开始？

不要求编程基础。你会先搞清这个词到底指什么，然后选一个失败成本最低的小项目，走一遍“从想法到发布”的基础流程。

本章与实战章的分工：这一章讲怎么想、怎么开始——概念、工具与装备、需求与最小心智模型，读完能看懂 AI 在干什么；《从 0 到 1 用 Vibe Coding 写自己的项目》 讲照着做——完整实操、切片实现、验证与回退。两章会有少量重合（比如都讲工具和一页说明），这是刻意的：这里求“看懂”，那里求“做出来”。

你将学会

读完这一章，你能：

• 说清「狭义 Vibe Coding」和「工程化 AI 辅助开发」的区别；
• 为第一个项目划出「只做什么 / 不做什么」；
• 认出四大 AI 编码工具，并选定（或知道怎么选）一个；
• 分清提示词、Skills、项目指令文件三者的加载时机；
• 把想法整理成一页产品说明，并用循环做出第一个版本。

新手名词速查（遇到看不懂的词，先点开这里）

名词	一句话解释
仓库（repo）	存放项目所有文件和历史版本的地方
提交（commit）	给项目存一次档，之后随时能回退到这一版
diff	两个版本之间“改了什么”的对照
终端 / 命令行	靠打字输入命令来操作电脑的窗口（不是用鼠标点的界面）
上下文	AI 这次对话能“记住”的内容；太长要压缩，换任务要清空
依赖	项目用到的、别人写好的代码包
构建（build）	把源码打包成能运行 / 能上线的成品
测试 / lint	自动检查代码跑得对不对、格式规不规范
localStorage	浏览器自带的本地存储，数据存在你自己电脑上
切片	一个能独立跑起来、能单独验证的小功能

一、先澄清这个词

“Vibe Coding”一词来自 Andrej Karpathy 在 2025 年 2 月发布的帖子；原始语境描述的是一种高度依赖模型、不断运行和回馈错误、甚至不细读代码的轻量实验方式，并将适用场景限定在非严肃的周末项目一类。Andrej Karpathy 原始帖子

因此要区分两件事：

• 狭义 Vibe Coding：快速表达想法、运行、观察、继续描述，适合一次性原型和低风险探索。
• 工程化 AI 辅助开发：人负责目标、约束、架构、审查和上线责任，Agent 负责探索、实现和验证；适合要维护或交付的软件。

入门可以从 Vibe Coding 获得快速反馈，但一旦涉及账号、权限、付款、隐私、生产数据或长期维护，就必须切换到工程化流程。

二、选择第一个项目

推荐：一个仅在本机运行的“学习打卡板”。

第一版只做：

• 新增学习任务。
• 标记完成。
• 按 AI 基础、Agent、Vibe Coding 三类筛选。
• 数据存浏览器本地存储。
• 可导出 JSON 备份。

明确不做：

• 登录注册。
• 云数据库。
• 支付。
• 社交分享。
• 收集个人敏感数据。

原因不是这些功能永远不能做，而是第一个项目应让失败保持低成本。GitHub 对 coding agent 的官方建议也是先从范围清晰的简单任务开始，并把生产关键、安全、身份、敏感信息和模糊的大型任务留给更严格的人类主导流程。GitHub Copilot Coding Agent Best Practices

三、为项目选择编程语言与技术

项目方向定了，接下来决定用什么技术把它做出来。不用纠结太久，先记住三条原则：

1. 先看项目跑在哪里：网页、手机、桌面还是服务器？平台决定候选语言——浏览器里做界面就是 HTML/CSS/JavaScript（复杂界面再配上 Vue、React 这类框架），本机小工具可以用 Python，跨平台应用才需要考虑 Dart、C# 这类选择。
2. 跟着最好的资料走：学习阶段，教程用什么技术你就用什么，避免一边做项目一边学冷门技术。
3. 先跑通，再升级：起步方案越小越好——可以是纯 HTML/CSS/JavaScript，也可以直接用 Vue / React；工具链和工程化等到真正需要时再加。

常见项目案例与技术选型

项目案例	起步方案	进阶方案
学习打卡板、待办清单	纯 HTML/CSS/JavaScript，或直接用 Vue / React	组件库、路由、状态管理
个人博客、文档站	Markdown + 静态站点生成器（如 VitePress）	自定义主题、评论、统计
数据整理与批处理小工具	Python + 命令行脚本	FastAPI 包成 Web 服务
微信小程序	原生小程序框架，或 Taro（React 语法）	后端 API、云开发
带账号和数据的网站	Vue / React + Node.js 或 Python 后端	数据库、部署、监控

企业级项目案例与技术选型

除了个人小项目，企业里常见的项目长这样（技术方向对应常见编程语言与应用场景的 Java / Go / Python 等语言路线）：

项目案例	常见技术栈
电商 / SaaS 类全栈系统（管理后台 + 服务端 API）	TypeScript（Vue / React）前端 + Java（Spring Boot）/ C#（.NET）/ Node.js 后端 + MySQL / PostgreSQL
高并发微服务系统（订单、支付、交易）	Java（Spring Cloud）/ Go + Docker、Kubernetes + 网关、消息队列与可观测性组件
运维 / DevOps 平台（CI/CD、监控告警）	Shell + Python / Go；Kubernetes、Terraform（HCL）、CI/CD 流水线、Prometheus + Grafana
AI Agent 应用（智能客服、研究助理）	Python（LangChain / LangGraph 等框架 + 大模型 API）+ 向量数据库 + 前端集成；核心技术：工具调用、RAG、评估
数据工程（数据仓库、实时数据管道）	SQL + Python，再进一步用 Spark / Flink（Java / Scala）等计算引擎

企业级项目通常由团队分工完成，不必一个人全包；建议先用上面的入门案例把完整流程练熟，再按自己的目标方向逐个模块深入。

Web 前端目前最主流的两个框架是 Vue（上手平缓、中文资料丰富）和 React（生态最大、选择最多）。不管用哪一个，最终都会编译成 HTML/CSS/JavaScript 运行在浏览器里——所以“先做出来”比“先选对”更重要，框架用哪个都可以让 AI 带你上手。

如果拿不准，直接把约束丢给 AI，让它给出推荐和理由：

我要做一个<项目描述>，运行在<平台>，我目前会<你已有的技能>。
请推荐一个最小可行的技术方案并说明理由，明确哪些东西第一版不需要用。
不要引入我没有要求过的框架和依赖。

各语言的用途、生态与选型要点已整理成一份完整速查：常见编程语言与应用场景——先选对方向，再动手。

四、认识你的 AI 编码工具：四大工具与常用命令

技术方案定了，接下来挑工具——这是接下来要天天打交道的“伙伴”。流行的 AI 编码工具有四个，形态不同但用法相通；如果你不想折腾，还有一个“装好即用”的选择。掌握基本交互和常用命令，就可以开写了。

四大工具的形态

工具	形态	一句话特点
Claude Code	终端（命令行）	复杂任务处理能力强，工程界口碑好
Codex	ChatGPT / 编辑器 / 终端	OpenAI 出品，支持云端任务与多端接力
Cursor	编辑器（IDE）	图形界面友好，适合喜欢鼠标的人
opencode	终端 / 桌面 / IDE	开源免费，可接国产模型，中文文档完善

初次学习：直接推荐「陶渊明 harness」

上面四个工具能力都很强，但第一次上手，最省事的是一个“装好即用”的桌面工作台——本站作者出品的 陶渊明 harness：

• 不用碰命令行：图形界面，装完就能开聊，对零基础友好。
• 内置 agents 与开箱即用的技能：覆盖需求分析、PRD、原型、代码规范等（正好对应下一节的 Skills）。
• 省去工具链折腾：想“装好即用”、不折腾配置的读者，从它开始最顺。

下载与安装（以发行页为准）：

1. 打开发行页：github.com/Thorleying/tyuanming-releases/releases；
2. 下载最新版安装包 tyuanming-harness_*_x64-setup.exe（目前提供 Windows 版）；
3. 双击运行安装，完成后打开应用即可开始；客户端支持在线更新（优先 GitHub，国内网络自动回退 Gitee 镜像）。

想用上面四个主流工具，安装、对比与适用场景见从 0 到 1 用 Vibe Coding 写自己的项目。

基本交互（四个工具都一样）

• 直接说人话：用中文描述你要什么，例如“帮我加一个按分类筛选的功能”。
• 用 @ 引用文件：输入 @ 可以从项目里选文件，把准确的上下文递给 AI。
• 先看再动：不确定时先让它只读不动——“先读一下项目结构并告诉我，先不要改文件”。

常用斜杠命令

斜杠命令（以 / 开头的指令）是快速控制 AI 的入口。不记得也没关系——直接输入 / 就会弹出完整列表；也可以直接用中文说需求（“压缩一下上下文”“撤销刚才的修改”），它同样听得懂。

操作	触发方式示例
生成项目指令文件（AGENTS.md / CLAUDE.md）	/init（opencode、Claude Code）
清空上下文、开始新任务	/clear（Claude Code 等）
压缩过长的上下文	/compact（Claude Code 等）
撤销 / 重做修改	/undo、/redo（opencode）；/rewind（Claude Code）
恢复历史会话	/resume（Claude Code）；codex resume（Codex）
查看改动对比	/diff（Claude Code、Codex）
审查代码（只审不改）	/code-review（Claude Code）；Codex 内置代码审查
调整权限与审批边界	/permissions（Codex）
先出计划、不动代码	计划模式：Tab 键切换（opencode）；Claude Code 也有计划模式
分享 / 导出会话	/share、/export（opencode）
查看全部命令	输入 / 看列表；迷路时试 /help

四个习惯：目标、计划、记录、审查

命令是入口，习惯才是方法。每次开工前和收工前，把下面四件事过一遍。

1. 开工先给目标（目标格式）：不要只说“帮我加个筛选功能”，按三行格式说清：

   目标：给支出列表加“按分类筛选”，支持多选
   约束：只改列表相关文件，不新增依赖
   完成标准：选中分类后列表即时过滤；清除后恢复全部

   单个任务三行就够；整个项目的目标用后文“写一页产品说明”那份模板。目标讲得越清楚，来回返工越少。

2. 大改动先计划（plan）：先让 AI 出方案、你确认后再让它动手（计划模式见上表）。计划里每一步都应能独立验证、能独立回退；一步要干半天以上的，先拆小再开工。

3. 干完留下记录：每次收工让 AI 用三行汇总——改了什么、怎么验证的、下次从哪继续，写进仓库（比如 进度记录.md）；会话本身也留痕：/resume 找回历史、/undo、/rewind 回退错误修改、/share 分享。换任务时先 /clear 开新会话，别让旧话题污染新任务。

4. 接受前先审查（review）：AI 说“完成了”不等于完成。让它只审不改地过一遍当前改动（Claude Code 可用 /code-review，Codex 有内置代码审查），重要改动换一个新会话再审一次，最后按“六项检查”亲手过一遍再接受。

工具选好了——接下来把它装进电脑，下一节准备环境。

五、准备环境

选定工具后，动手前先把环境装好。至少准备：

• 一个支持 Agent 模式的编码工具（就是上一节你选定的那个）。
• Git。
• Node.js 或 Python，按项目技术栈二选一。
• 浏览器开发者工具。
• 一个空目录和初始化后的 Git 仓库。

工具不必追逐“最强榜单”——功能、价格和模型更新很快，选定一个、装好它、跑通全流程就够了。GitHub Copilot IDE Quickstart 展示了从提问、解释代码到 Agent 修改和验证文件的基本过程，可作为界面型工具入门参考。GitHub Copilot IDE Quickstart

环境就绪。开工之前，再花十分钟把几样“装备”配齐：提示词、Skills、Agents 与项目指令文件——它们决定你把工具用到什么水平。

六、提示词、Skills 与 Agents：区别、用法与推荐

工具会用了，还有一个问题：为什么同样一个工具，有人用起来像“外挂”，有人用起来像“聊天机器人”？差距主要来自几样东西——提示词、Skills 与 Agents（外加一份“项目指令文件”，下一节单独讲）。这一节先把它们分清楚，再给出一份值得上手的推荐。想学更深的方法，见提示词与上下文工程。

1. 提示词（Prompt）：你说的每一句话

提示词就是你在对话框里发给 AI 的指令，也是这几样里门槛最低、见效最快的一个。写法在前面已经给过（目标格式、一页说明），核心一句话：说清目标、上下文、约束和完成标准。

一个对照，感受一下差距：

这样说	效果
“帮我优化一下代码”	AI 只能猜你想要什么
“把 utils/parse.ts 的日期解析改成支持 YYYY/MM/DD；不新增依赖；改完跑一遍单测并贴出结果”	目标、范围、完成标准齐全，一次到位

提示词的特征是一次性：它活在当前会话里，换个会话就没了。所以如果一个交代你需要重复说第三遍，就该考虑把它沉淀下来——这就是下一小节要说的 Skills。

2. Skills：教 AI 一门“常备手艺”

如果你发现自己反复交代同一套流程（比如每次都叮嘱“提交前先跑测试”“写组件要遵守项目样式规范”），与其每次重打一遍，不如写成一份 Skill：一份描述“这类任务该怎么做”的文件（通常包含说明和步骤，必要时带模板与脚本）。之后它就成了 AI 的常备手艺，需要时随取随用。

提示词 vs Skills 的区别：

对比	提示词	Skills
形态	会话里的一句话	一份可复用的“手艺说明书”
寿命	一次性，关掉会话就没了	长期保存，随时可调用
成本	每次都要重新说	平时不占上下文，用到才加载
适合	临时任务、一次性需求	反复出现的多步流程
触发	你主动说，AI 才做	遇到相关任务时 AI 自动取用，也可以手动调用

容易和 Skills 混淆的还有一样东西——项目指令文件（AGENTS.md / CLAUDE.md）：指令文件是“每次自动读的规矩”，Skills 是“用到才取的说明书”。它值得单独展开，见下一节。

常见技能、各自的作用、去哪找、怎么写自己的技能：见技能库——完整推荐清单（含作用说明）、各工具存放路径与最小 SKILL.md 写法都在那一页。

3. Agents：能自己干活的“分身”

Agent 是能自主完成多步工作的智能体：读文件、改代码、跑命令、自我检查。你可以直接把它当“同事”对话，也可以把它派出去专门干一件事（子代理 / 分身），自己同时推进别的。

三个值得一用的场景：

• 只读研究：先摸清代码库、调研方案，不污染主对话的上下文；
• 并行推进：几件互不依赖的工作同时开工；
• 隔离长任务：耗时任务放进独立上下文，做完回来汇报结果。

推荐：

• 四大工具都内置了代理能力：Claude Code 的子代理、Codex 的 subagents、Cursor 和 opencode 的 Agents。
• 陶渊明 harness（本站作者出品）：同样内置多种 agents，可以派子代理并行干活（安装见“认识你的 AI 编码工具”一节）。

4. 怎么配合：一条开工流水线

一句口诀：指令文件定规矩，提示词说清这一次，Skills 沉淀老手艺，Agents 负责跑腿和并行。

开工时的组合示例：

1. 用“目标格式”写清任务，让 AI 先探索现状、给出计划（用“目标格式”，见“认识你的 AI 编码工具”）；
2. 用需求类 Skill 把想法整理成清单和验收标准；
3. 实现交给主 Agent，研究与审查丢给子代理并行处理；
4. 收工按“四个习惯”做记录、提交与审查。

装备配齐了——接下来先想清楚要做什么，下一节从梳理需求开始。

七、项目指令文件（AGENTS.md / CLAUDE.md）：AI 每次自动读的规矩

Skills 是“用到才取”，项目指令文件正好相反——它是 AI 每次开工都会自动读的“项目规矩”。把技术栈、目录约定、常用命令、代码风格、禁止事项写进去，就不必每个会话重复交代。

一句话说清它的作用：写一次，之后 AI 每次问答都会自动读到它、并照着做。 你不再需要每轮重复叮嘱“记得先跑测试”“别动 dist/ 目录”——规矩已经写进文件，AI 每次开工前都会先读一遍。这正是它和“说完就忘”的一次性提示词最大的区别：提示词管这一次，指令文件管每一次。

放在哪里：

文件 / 目录	位置	说明
AGENTS.md	项目根目录（可在子目录再放）	跨工具通用，主流工具都读；子目录版本“就近优先”
CLAUDE.md	项目根 / ~/.claude/CLAUDE.md	Claude Code（后者为个人全局，跨项目生效）
.cursor/rules/*.mdc	项目内	Cursor 项目规则，可用 globs 限定适用文件
.github/copilot-instructions.md	项目内	GitHub Copilot

AGENTS.md 是一份开放标准，由 Linux 基金会下的 Agentic AI Foundation 维护，Codex、Cursor、opencode、Copilot、Gemini CLI 等 20 多个工具都支持——写一份，多工具通用。位置约定也统一：放在仓库根目录；monorepo 里可以在每个子包各放一份，工具会读离当前改动文件最近的那份。

写什么： 项目概览、目录路由、标准命令、修改约束等——凡是你希望“新同事”一开始就知道的，都适合放进去。下面是一份精简模板：

一份可以直接抄的精简模板（存成仓库根目录的 AGENTS.md；Claude Code 也可用 CLAUDE.md，冒号后按项目实际填写）：

# 项目工程约定

## 项目概览
- 项目用途：<一句话说明这是什么>
- 主要技术栈：
- 主要入口：

## 标准命令
- 开发：
- 构建：
- 测试：

## 目录路由
- `<path>`：职责。

## 修改约束
- 生成文件（勿手改）：
- 禁止或谨慎修改区域：

小项目留这四节就够。工程化项目（团队协作、需要长期维护、有 CI）才需要更完整的版本——环境前置条件、架构约束、Commit 规范、完成标准、已知基线问题等，完整工程模板见从 0 到 1 用 Vibe Coding 写自己的项目。写法上是“全局约定 + 项目补充”：只记本项目特有的事实，通用规范交给上层文件。

怎么生成： 不必手写。多数工具支持 /init，它会扫描项目并生成一份 AGENTS.md 草稿，你再按需修改。

它和 Skills 的分工：

对比	项目指令文件	Skills
加载	每次会话自动读	用到才加载
内容	长期不变的“规矩”：约定、风格、命令	成体系的“做法”：流程、模板、脚本
适合	项目约定、代码风格、禁止事项	反复出现的多步流程

开放标准与位置说明：agents.md

八、写代码之前：梳理需求、PRD 与原型图

工具和装备都备齐了，动手之前还有一件最关键的事：想清楚要做什么。项目往往不是“写崩”的，而是一开始就想错了：做着做着发现核心功能没想清、界面来回推翻。所以让 AI 动手之前，先花 30 分钟做好三件事。

1. 梳理需求：把“我想要”改成“谁、在什么场景、做什么”

以“学习打卡板”为例，先回答这几个问题：

• 谁用？——只有我自己。
• 解决什么？——记录每天的学习任务，能看到进度。
• 最少需要哪几个动作？——新增任务、标记完成、按分类查看。
• 哪里可能出错？——输入空任务、数据存在哪、换浏览器还在不在。
• 第一版明确不做什么？——登录、云同步、分享。

产出：几条“用户能做什么”的句子 + 一份“不做清单”。

2. 写 PRD：把需求落成可验收的文档

PRD（产品需求文档）不需要多正式，一到两页就够，最少包含四块：

• 目标：给谁解决什么问题。
• 功能清单：每个功能一句话，标注优先级（必须有 / 可以后加）。
• 验收标准：每条功能怎么算“做完”，必须可以验证（比如“刷新后数据还在”）。
• 边界与不做：明确不做什么、什么情况算失败。

拿不准时，可以直接让 AI 起草：“我要做<项目>，用户是<谁>，帮我整理成一页 PRD，逐条写验收标准，然后列出我还没想清楚的问题来问我。”——让 AI 追问，比自己憋着强。

3. 画原型图：先看骨架，再写代码

原型图（线框图）就是把每个页面画成“骨架”：哪里是输入框、哪里是列表、按钮放哪、页面之间怎么跳转。不需要专业设计软件——纸笔、白板都行，也可以让 AI 生成一版低保真草图，你看着指哪改哪。

产出：一份“页面清单”。学习打卡板的第一版就两个界面：主列表页（输入框 + 任务列表 + 筛选）和空状态。

做完这三件事，你手里就有了：需求清单、一页 PRD、页面原型。交给 AI 时不用整份丢进去——浓缩成一页产品说明即可（后文有模板）。项目越小流程越轻，但顺序不变：先想清楚，再让 AI 写。想更系统地练需求能力，见从想法到需求。

九、写一页产品说明，不要直接说“帮我做个网站”

“想清楚要做什么”的成果在这里浓缩成一页——按需增删区块、保持一页以内，然后交给编码 Agent：

# 目标
构建一个本地运行的学习打卡板，帮助我管理 AI 学习任务。

# 用户场景
我可以新增任务、标记完成、按分类筛选，并导出 JSON 备份；所有操作支持键盘完成。

# 页面与交互（原型说明）
- 主列表页：顶部输入框 + “添加”按钮；下方任务列表（每行 = 复选框 + 任务文字 + 删除按钮）；顶部显示已完成 / 未完成数量。
- 筛选栏：“全部 / AI 基础 / Agent / Vibe Coding”四个按钮。
- 空状态：没有任务时显示引导文案。
- 导入导出：“导出”下载 JSON 文件；“导入”选择文件并校验。

# 技术约束
- 使用当前项目已有技术栈；如果项目为空，先推荐最小方案并解释理由。
- 第一版不使用登录、后端、云数据库或第三方分析。
- 数据只保存在浏览器 localStorage，键名以 app: 开头；每条任务包含标题、分类、是否完成和创建时间。
- 不新增依赖，除非先说明必要性。

# 非目标
- 不做登录注册、云同步、多设备、社交分享、图表报表。

# 验收标准
- 空状态清楚；没有任务时不显示空白列表。
- 新增任务后刷新页面，数据仍存在。
- 三种分类筛选正确；切到“全部”恢复完整列表。
- 输入为空或过长时给出提示，且不写入数据。
- 导出的 JSON 可以被重新导入；非法 JSON 不覆盖现有数据，并给出错误提示。
- 键盘可完成主要操作；窄屏无横向溢出。

# 工作方式
1. 先阅读项目文件和现有说明；对目标有疑问先问我，不要自行假设。
2. 先给出实现计划和将修改的文件，不要立即编码。
3. 我确认方向后再按小步骤实现，每一步独立可验证。
4. 每一步运行最相关的测试或检查。
5. 完成后给出 diff 摘要、验证命令、结果和未验证风险。

如果手里有原型草图，也可以把截图一起发给支持图片输入的 Agent，配合文字说明效果更好。

OpenAI 的 Codex 最佳实践建议一个任务提示至少说明目标、上下文、约束和“完成定义”；GitHub 也建议任务包含清楚的问题、验收标准和相关文件方向。OpenAI Codex Best Practices；GitHub Copilot Coding Agent Best Practices

十、使用“探索 -> 计划 -> 实现 -> 验证”循环

先拿到一个能看见的成果：5 分钟跑通

正式进入循环前，先跑通一个最小版本，亲眼看到结果——这比任何方法论都提神。

1. 在项目目录里打开你的 AI 工具，说：

   用单个 index.html 文件做一个最简的学习打卡板：能新增任务、能标记完成，数据存 localStorage；不要引入任何依赖或构建步骤。

2. AI 生成 index.html 后，在文件管理器里双击它，浏览器就会打开，直接能用。
3. 新增一条任务，刷新页面——数据还在，就说明跑通了。

单文件 HTML 不需要 Node、不需要构建，是最低门槛的“第一次成功”。跑通后再往下看循环，心里就有底了。

探索

让 Agent 回答：

• 项目入口在哪里？
• 数据如何流动？
• 已有构建和测试命令是什么？
• 哪些文件需要修改，哪些不应修改？
• 当前基线能否正常构建和运行？

计划

计划必须映射到验收标准。每一步应当可独立运行和检查，而不是“完成整个应用”。

实现

一次只做一个纵向切片（切片 = 一个能独立跑起来、能单独验证的小功能），例如“新增任务并持久化”，随后立即运行；再做“筛选”，最后做“导入导出”。

验证

每个切片至少检查：

• 自动化测试或最小可复现命令。
• 浏览器实际交互。
• git diff 是否只包含预期修改。
• 控制台是否有错误。
• 刷新、空输入、重复操作和非法输入等边界。

Claude Code 官方最佳实践同样推荐先探索、再计划、再编码，并要求始终提供可验证反馈，例如测试、脚本或截图；小而明确的修改才适合跳过正式计划。Claude Code Best Practices

十一、错误出现时，不要只粘贴一句“还是不行”

使用这个调试模板：

# 现象
点击“导入”后页面没有变化。

# 预期
合法 JSON 导入后显示任务列表；非法 JSON 显示错误且保留旧数据。

# 复现步骤
1. 打开首页。
2. 新增一个任务。
3. 选择附件 sample.json。
4. 点击导入。

# 证据
- 浏览器控制台错误：粘贴完整错误文本
- 相关测试输出：粘贴失败部分
- 最近一次正常提交：给出 commit id

# 要求
先定位根因并给出证据，不要修改文件；确认原因后再提出最小修复和回归测试。

这会把“猜修复”变成“基于证据诊断”。更完整的排错流程与常见错误速查见调试与排错手册。

十二、每次接受修改前做六项检查

1. 读摘要：Agent 改了什么，为什么？
2. 看 diff：有没有无关重构、删除或新依赖？
3. 跑检查：测试、lint、类型检查、构建是否真实执行并通过？
4. 实际操作：按验收标准亲自走一遍主流程和失败流程。
5. 安全检查：有没有密钥、任意命令执行、未校验输入或过宽权限？
6. 小步提交：一个可说明的行为对应一个可回退的提交。

GitHub 明确提醒 AI 编码工具会犯错，使用者需要理解建议、审查功能与安全、并用测试、lint、代码扫描等工具验证。GitHub Copilot Best Practices

逐条的做法与常见坑见代码质量与审查。

十三、让 AI 教你，而不是替你跳过理解

完成一个切片后，追加四个问题：

1. 用初学者能懂的方式解释这次数据流。
2. 指出三个最重要的函数，以及各自的输入、输出和副作用。
3. 删除哪个测试会让一个真实缺陷不再被发现？为什么？
4. 给我一个小练习，让我亲手修改功能；先不要给答案。

GitHub 的“用 Copilot 学新语言”教程建议把工具当训练助手，要求解释代码，并且不要使用自己没有把握理解的代码；其学习配置教程甚至建议初学阶段关闭行内补全，以避免把生成速度误当成理解。Learning a New Language with Copilot；Setting Up Copilot for Learning

十四、什么时候可以发布

只有满足以下条件才考虑把原型公开：

• 你能解释关键代码和数据流。
• 仓库中没有密钥和个人数据。
• 构建、测试和主要人工验收通过。
• 错误和空状态可用。
• 依赖来源清楚，没有不必要的大量依赖。
• README 说明运行方式、已知限制和数据存储位置。
• 涉及用户数据、身份、付款或外部写操作时，已进行专门安全设计和审查。

狭义 Vibe Coding 的“能跑就行”只能作为原型完成标准，不能作为生产完成标准。

小结：读到这里，你应该能

对照自查一下，都能做到再进实战章也不迟：

• 用一句话说清“狭义 Vibe Coding”和“工程化 AI 辅助开发”的区别；
• 为自己的第一个项目列出“只做什么 / 不做什么”；
• 说出四大 AI 编码工具各自的形态，并选定（或知道怎么选）其中一个；
• 让 AI 写出一份 AGENTS.md（项目指令文件），并说清它和提示词的区别；
• 把一句想法整理成一页产品说明（含验收标准）；
• 按“探索 → 计划 → 实现 → 验证”走完一个纵向切片；
• 出问题时用调试模板给出“现象 / 预期 / 复现 / 证据”，而不是只说“还是不行”；
• 接受改动前过一遍六项检查。

哪一条做不到，翻回去补那一节即可。

下一步

掌握了这一章的基础流程之后，去从 0 到 1 用 Vibe Coding 写自己的项目 走一遍完整实战 —— 包含工具选择（Claude Code / Codex / Cursor / opencode）、切片实现、验证与回退、独立审查与交付。