Vibe Coding 入门：从接入工具到交付第一个小功能

想用 AI 写代码，第一步不必是搭建复杂的工具链。选一个工具，做一个能验证的小功能，就足够开始。

这里把 Vibe Coding 理解为：用自然语言描述需求，让 AI 辅助阅读、修改和调试代码。它降低了动手门槛，但没有替你承担验收责任。页面能打开，不代表数据不会丢；工具说“完成”，也不代表测试真的通过。

先分清工具、模型和账户

模型负责理解和生成，编程工具负责把它接到项目文件、终端等环境，账户决定你能使用什么，以及怎样计费。

尤其不要把聊天订阅和 API 额度混为一谈。Codex 支持用 ChatGPT 账户登录，也支持 API key；后者按 API 使用量计费，不是消耗订阅包含的使用额度。登录方式和具体权益以官方认证说明及你的账户页面为准。

Claude Code 也有订阅账户、Console 等不同接入方式。先确认自己使用哪条路径，再看对应的用量和账单，不能因为已经付过聊天订阅费，就认定所有调用都免费。参考认证说明和费用说明。

新手先选一个工具即可。暂时不接第三方中转、不装一串插件，也不同时开多个代理。

接入：先能登录，再能看懂项目

如果选 Codex，按官方仓库的安装说明安装，进入准备练习的项目目录，运行 codex login 完成登录，再运行 codex。

如果选 Claude Code，按官方快速入门安装，在项目目录运行 claude，首次启动时按提示登录。

不要复制陌生教程里的密钥、安装脚本或“关闭所有确认”的配置。看到工具请求执行命令时，先看它要操作哪个目录、会不会删除文件或安装东西。不理解就让它解释，而不是一路同意。

连接成功后，先给它一个只读任务：

请阅读这个项目，说明入口文件、启动方式、测试命令和主要目录。先不要修改文件；找不到的信息明确说不知道。

这一步是在确认它真的理解了你的项目，而不是按想象另起一套结构。

第一个练习：做一个阅读清单

建议从不涉及支付、登录和真实个人资料的小页面开始。例如，一个只在当前浏览器保存的阅读清单：输入书名、添加条目、标记已读、删除条目。

开始前运行 git status，确认原有修改没有混在里面。如果项目已有 Git 历史，可以用 git switch -c feat/reading-list 建一个练习分支。Git 的提交是可追溯的保存点；分支让这次改动更容易与主线区分。

把需求写成可检查的条件，比一句“做漂亮一点”更有用：

在现有项目里增加阅读清单，沿用已有技术和样式，不更换框架、不接数据库。输入空白书名时不能新增；条目可以标记已读和删除；刷新页面后仍保留数据。使用 localStorage，并说明它只保存在当前浏览器，不提供跨设备同步。先列出计划和涉及文件，等我确认后再改。完成后报告实际运行的测试、结果，以及未验证的部分。

一次只做这一件事。先把新增和显示跑通，再加保存与删除，最后调整样式。复杂改动拆小，更容易判断是哪一步出了问题。Claude Code 官方最佳实践也强调先探索、规划，再实现，并提供明确的验证方式。

验收：别只看“已完成”三个字

打开页面，亲自走一遍：

输入正常书名，确认新增成功。
输入空格，确认没有生成空条目。
标记已读、删除一项，再刷新，确认状态符合预期。
缩小窗口，检查按钮和文字是否还能正常使用。
查看控制台是否有报错，运行项目已有的测试和构建命令。

再运行 git diff 看改动：有没有顺手改了无关配置？有没有删掉原来的功能？不认识的代码，让 AI 解释“为什么需要改”，而不只是重复代码在做什么。

如果测试跑不了，就记录“未验证”和原因，不要写成“通过”。确认后只暂存本次需要的文件，再提交一个小的、说明清楚的 commit。

留好退路，也守住密钥

遇到问题先停止追加需求，保留报错和复现步骤。对于已经提交、尤其已共享的改动，git revert <提交编号> 可以新增一次反向提交，而不是抹掉历史；使用前应确认工作区状态和目标提交。具体行为见Git 官方文档。不要把 git reset --hard 当作通用修复按钮，它可能丢掉未提交的工作。

练习页面不需要 API key。如果以后要接模型 API，密钥应放在服务端受控环境，不能写进会发给浏览器的前端代码，也不要粘贴进文章、截图或公开仓库。

.gitignore 不是撤回按钮。密钥一旦泄露，应先撤销或轮换，再处理历史记录；仅删除当前文件并不够。GitHub 的处理指南明确把撤销或轮换凭据放在第一步。

入门的目标不是让 AI 一次生成一个“大项目”，而是完成一个小循环：需求说清楚，改动看得懂，结果测得出，出错退得回。把这个循环练熟，比收集更多工具更有用。

工具入口与登录说明核对于 2026-10-24；套餐、额度及界面可能变化，请以官方文档和账户显示为准。