驾驭 Vibe Coding · 01.1 / 04
准备阶段：先把 AI 工具跑起来
先选一条能够稳定使用的 AI 工具路径，确认它能正常登录、读取项目并回答基本问题。然后再确认任务边界，把本地项目与浏览器接进同一个工作台。
- GoodVibe 编写
- 更新于 2026 年 8 月
先看一次完整循环，再回来辨认项目、Terminal、浏览器和 Agent 分别在做什么。正式视频将在这里原地播放。
06:40 · 原型占位第一次做 Vibe Coding，最容易把时间耗在工具选择、账号开通和陌生命令上。准备阶段先解决一个问题：让一款所在地区可用的 AI 工具正常登录，能读取项目并回答一个基本问题。
AI 工具可用以后，你会确认这次工作的边界，建立最小项目约定，再把开发服务器和浏览器接起来。页面出现以后，准备阶段就可以结束。
AI 工具能读项目，页面能打开，你也知道这一轮允许修改什么。
AI 工具
先确认 AI 工具真的可用
网页 Agent、编辑器里的 Agent 和命令行 Agent 都能完成这一章。按钮位置和产品套餐会变化，后面反复使用的能力比较稳定：读取项目、修改文件、执行命令和打开浏览器检查结果。
这里的“跑起来”不是看到对话框就算完成。请让 AI 工具读取一个你有权访问的练习项目，指出项目名称、技术栈和一个真实文件路径。能用项目里的证据回答，才说明工具已经接通。
先确认地区与付款支持
账号支持范围会变化。只根据服务商当天的官方页面判断，不沿用旧教程、群聊截图或代注册承诺。
选择一条能稳定使用的路径
网页 Agent、编辑器 Agent 或命令行 Agent 都可以完成本章。先选你所在地区可以合规开通、能够持续登录的一种。
保护账号，先跑通再升级
不要购买共享账号或来历不明的 API Key。本章只要求读取项目、修改文件、打开浏览器和发布，先用可用额度完成一次循环。
确认范围
先选一个低风险、能够看见结果的任务
已经有设计稿或参考、页面范围清楚、可以用 Mock 数据演示的任务，很适合第一次练习。需求仍在变化、权限和付款逻辑复杂，或错误会影响真实用户时，先缩小到一个隔离页面或独立组件。
开始前写下负责的页面、需要保留的现有能力和明确不处理的内容。Agent 会主动补全空白，这份边界能避免一次简单改动扩散到路由、接口或整套组件。
适合开始
活动页、内部工具、独立组件，以及有真实内容或 Mock 数据就能完整演示的页面。
先缩小范围
仍在探索的产品概念、跨多个系统的改造，或当前没有权限检查完整结果的任务。
暂时不要碰
生产数据、付款与权限逻辑、密钥，以及任何无法独立判断后果的外部操作。
项目交接
拿到项目以后先问清四件事
进入现有项目时，不用靠猜测判断技术栈和启动方式。让项目文件给出答案，再向协作者确认业务范围与禁区。一个人练习时也保留这一步，它能暴露缺失的说明和不确定条件。
- 01
确认任务范围
写清负责的页面或组件、主要用户动作，以及这次明确不处理的业务逻辑。
留下 一页范围说明 - 02
读取项目说明
检查 README、package.json、项目规则和现有目录，不凭旧教程猜包管理器与启动命令。
留下 真实启动方式 - 03
找到页面入口
确认当前 URL 对应哪个页面、主要组件放在哪里、样式与数据从哪里进入。
留下 最小项目地图 - 04
记录不确定项
把接口、权限、数据来源和不能自行决定的内容列出来，开发时留作占位或等待确认。
留下 待确认清单
让 Agent 先读项目
请先不要修改代码。
阅读项目规则、README、package.json 和当前页面相关文件，然后告诉我：1. 项目使用哪一种包管理器，安装和启动分别运行什么命令2. 当前 URL 对应的页面入口和主要组件在哪里3. 这次任务最可能涉及哪些文件4. 哪些内容你还不能确定，需要我或协作者确认
请用当前项目里的证据回答，不要根据常见做法猜测。最小约定
把长期规则写进项目
项目规则文件会告诉 Agent 怎样启动、哪些组件需要复用、哪些目录不能随意修改。文件可以叫 AGENTS.md、CLAUDE.md 或工具自己的 Rules；内容保持短而具体，并且能在仓库中核对。
第一次够用的项目约定
# 项目工作约定
## 开始前- 阅读 README 和 package.json，沿用项目现有包管理器- 搜索已有页面、组件和样式，不重复实现同一种能力
## 当前边界- 本轮只处理：<页面或组件>- 数据先使用：<真实接口 / Mock 数据>- 暂不处理：<接口、权限或其他范围>
## 完成后- 列出修改文件与原因- 给出本地浏览器验收路径- 说明仍未确认的内容，不自行补全业务规则本地预览
让 Terminal 持续运行，再打开浏览器
Terminal 是输入命令并查看项目输出的位置。安装依赖通常只在第一次需要，开发服务器则要在制作期间持续运行。终端出现本地 URL 后，在浏览器打开它；代码保存时，页面通常会自动更新。
常见启动过程
# 先确认项目使用的包管理器，再选择对应命令npm installnpm run dev
# 如果项目锁文件是 pnpm-lock.yamlpnpm installpnpm dev
找不到 npm、pnpm 或 node
运行环境还没有正确安装。先核对官方安装方式和终端重启，再重新检查版本。
依赖安装失败
保留完整报错，确认包管理器与锁文件一致；不要混用 npm、pnpm 和 bun 生成新的锁文件。
端口已经被占用
找到仍在运行的旧开发服务器，或使用终端给出的新端口；不要反复启动多个进程。
终端成功，页面却打不开
核对本地 URL、路由和开发服务器是否属于同一个项目，再查看终端与浏览器报错。
学习进度
正在读取你的学习记录…