第一次接触 Vibe Coding，如何上手

Vibe Coding 到底在做什么

可以把做网站想成装修一间小屋。你决定用途、给出内容并检查结果；AI 像一位会动手的助手，把你的要求写成 HTML、样式和交互代码。它可能理解错尺寸、用错文字，也可能生成一个“看起来能点”却没有实际功能的按钮。所以你的工作不是只发出第一句指令，还要打开成品，一轮轮指出具体问题。

和普通聊天不同，编程 Agent 会在项目文件夹里创建或改动文件。网页不是只存在于聊天记录里：一旦保存到本地，你下次打开同一文件夹还能继续修改，也能备份、迁移或删除。

先认识五个常见词

这一阶段只需要理解“工作区 → 修改文件 → 打开预览”这条路径。先不购买域名，也不必立刻学习数据库。

第一次练习，先用十分钟走完一圈

1. 说出一个小目标。例如“做一页介绍我和两个项目的网站”。先写清楚谁会看、要看到什么。
2. 准备三段真实内容。名字、两句自我介绍、一个项目链接就足够。没准备的内容请留“待填写”。
3. 建立空文件夹。把它当成这次练习的边界，避免误改照片、作业或其他项目。
4. 让 Agent 先解释计划。确认它知道目录位置，理解只做一页；听不懂的词马上要求解释。
5. 打开本地预览。检查标题、图片、链接和手机宽度，记录第一个不满意的点，再让它修改。

看懂“做完了”和“能用了”的区别

AI 回复“已经完成”只表示它做过一次修改。你仍要亲自确认：页面能打开吗？点击按钮会去正确的位置吗？手机上文字会不会被遮住？如果预览打不开，请让它给出启动命令和报错原因；如果效果不对，指出页面位置和你期待的变化。

开始前，先准备这三样

你不必先学会编程，但至少准备一个明确的题目、一个不会影响日常文件的位置，以及每次都能打开的本地预览。这样看到不对的地方时，才能准确地让 Agent 改回去。

先选一个小目标

不要从“做一个完整 App”开始。第一个项目只解决一个展示问题，例如个人介绍页、作品集首页，或一个待办清单。范围越小，越容易看清 AI 改了什么，也越容易及时纠正。

用豆包建立工作区

1. 先建项目文件夹。Windows 建议在 D:\\Projects\\我的网站，macOS 可以建在 ~/Projects/我的网站。不要把长期项目放在桌面：桌面通常属于系统盘的用户目录，文件一多不方便整理和迁移。
2. 在豆包专业版中打开这个文件夹。新建项目时选择“打开文件夹”或“打开工作区”，让当前文件夹成为项目的唯一工作区。不同版本的按钮名称可能略有差异，核心是不要只在聊天窗口里讨论，而是让工具能看到并管理该目录。
3. 先让它认识目录。输入“列出当前文件夹，并说明准备怎样组织页面、样式和图片”，确认它确实在你刚创建的目录内工作。
4. 只做第一屏。先要导航和首页，再逐步加项目、资料或登录功能。每次改完都在本地预览，满意后再进入下一步。

第一条可复制提示词

把方括号中的内容换成自己的信息。它要求 Agent 先说计划、再逐页做，能减少一上来生成一大堆难以修改的内容。

请帮我做一个只有一页的个人介绍网站，先在当前工作区完成可预览的版本。

我的信息：
- 名字：[填写你的名字]
- 网站名：[填写网站名]
- 身份／方向：[例如：独立创作者、摄影师、产品设计师]

这一页需要展示：我的名字、一段自己写的介绍、最多两个项目（只有标题、简介和链接），以及联系方式。缺少的内容请用“待填写”明确标出，不要编造。

第一版只做静态页面，不加入注册、数据库、支付、后台或部署。视觉要干净、能在手机上阅读，按钮和链接要真的可用。

开始前请用小白能听懂的话告诉我：你会创建哪些文件、每个文件做什么、如何在本地打开预览。完成后请给我预览地址和三项检查方法。

每一轮只做一个可见变化

Vibe Coding 的关键不是一次把提示词写到完美，而是每轮只检查一件事。看到结果后，直接说“这里太挤”“这个标题改成我的话”“手机上按钮点不到”，比重新描述整个项目有效得多。

请只优化当前首页，不要重写其他页面。

先告诉我：
1. 你准备修改哪些文件；
2. 每个文件具体会改什么；
3. 可能影响哪些现有功能。

确认后再开始。完成后请给出本地预览地址，并用三句话说明我应该检查什么。

遇到报错时这样问

不要把一整屏错误截图丢给 Agent 再说“修一下”。复制报错最上方的关键信息、说明你刚做了什么，并要求它先解释原因再修改。这样你会慢慢认识文件和命令，而不是只会重复点“重试”。

本地预览出现了这个问题：
[粘贴第一段报错]

我刚刚做的操作是：[填写操作]

请先用通俗中文说明最可能的原因，列出准备检查的文件。只修复这个问题；不要删除现有功能、不要改动不相关文件。修复后告诉我如何复现验证。

进阶：ZCode 与 DeepSeek

当项目文件变多、需要终端和持续调试时，可以换到本地 Agent 工具，例如 ZCode。它以工作区为中心，适合让 Agent 读取文件、运行命令并连续完成任务。安装后仍然先打开同一个项目文件夹，再开始新的任务。

1. 创建 API Key。登录 DeepSeek 开放平台，在 API Key 管理页创建一把新的密钥；不同 Agent 的“模型／连接”设置名称会不同。
2. 在 Agent 的模型设置里接入。选择兼容 OpenAI API 的提供商时，按 DeepSeek 官方文档填写 Base URL、模型名和 API Key；先用一个小任务验证连接。
3. 把密钥当密码保管。只保存在工具的安全设置或本地环境变量中。不要粘贴到聊天、截图、Git 仓库、README 或前端代码里；怀疑泄露就立即删除旧 Key，再新建一把。

项目整理与安全

最后，把“让 AI 写代码”理解为协作：你提供方向、素材和验收标准；工具负责把具体修改落到工作区。先完成一个小作品，再开始第二个。