用 AI 做出你的第一个网页
工具装好了。现在来体验一次"说话→出网页"的完整循环。
这一关你不需要学任何东西，只需要跟着做一遍，感受一下这个过程。
Vibe Coding 的核心循环
在开始之前，先理解这门课的核心工作方式。整个课程，你会反复做这四件事：
描述 → 生成 → 预览 → 调整
- 描述：用自然语言告诉 AI 你想要什么
- 生成：AI 写出代码，直接创建或修改文件
- 预览：在浏览器里看效果
- 调整：哪里不满意，告诉 AI 改哪里
这个循环会贯穿整个课程。你不需要看懂 AI 写的代码，就像你不需要知道厨师怎么炒菜，只需要知道你想吃什么。
什么是 HTML？
你可能听说过 HTML，但不知道它是什么。简单说：
HTML 是网页的骨架。每一个你在浏览器里看到的网页，背后都是一个 HTML 文件。浏览器读取这个文件，然后把它渲染成你看到的样子。
一个最简单的 HTML 文件长这样：
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>Hello World</h1> <p>这是我的第一个网页</p> </body> </html>
你不需要记住这些，AI 会帮你写。但知道"HTML 文件 = 网页"这个概念，后面会更容易理解发生了什么。
第一步：新建一个项目文件夹
在桌面新建一个文件夹，命名为 my-first-site。
为什么要新建文件夹？ 因为 AI 编程助手是基于"工作目录"工作的——它在哪个文件夹里，就在哪个文件夹里创建和修改文件。给每个项目一个独立的文件夹，是一个好习惯。
然后在你的 AI 工具里，把这个文件夹作为工作目录打开：
- Codex / Trae：点击"打开文件夹"或"Open Folder"，选择刚才新建的文件夹
- Claude Code：打开终端，输入
cd ~/Desktop/my-first-site，然后输入claude启动
第二步：让 AI 生成第一个网页
在 AI 对话框里，把下面这段话复制进去，然后发送：
在当前目录创建一个 index.html 文件，做一个全屏欢迎页面： - 正中间大字写"Hello World" - 下面一行小字写"我的第一个网页" - 深色背景，白色文字 - 字体好看，内容居中
等 AI 完成，它会在你的文件夹里生成一个 index.html 文件。
观察 AI 在做什么：你会看到 AI 先思考，然后开始写代码，最后告诉你文件已经创建好了。整个过程可能只需要 10-20 秒。这就是 Vibe Coding 的魔法——你说了一句话，AI 帮你完成了本来需要学习几个小时才能做到的事情。
第三步：在浏览器里打开，看到效果
打开文件管理器（Mac 是 Finder，Windows 是资源管理器），找到 my-first-site 文件夹里的 index.html，双击打开。
浏览器会显示你的第一个网页。
如果看到的是一堆代码文字而不是网页：右键文件 → 打开方式 → 选择 Chrome 或 Safari
第四步：体验"调整"循环
看到网页之后，试着提一个修改需求，感受一下调整的过程：
把背景颜色改成深蓝色，主标题加一个从左到右的渐变色效果（从白色到浅蓝色）。
AI 修改完之后，刷新浏览器（按 F5 或 Command+R），看看效果有没有变化。
这就是完整的 Vibe Coding 循环：描述 → 生成 → 预览 → 调整。
关于"index.html"这个名字
你可能注意到文件名是 index.html 而不是随便什么名字。这是一个约定：当你访问一个网站的根目录时，服务器默认会找 index.html 这个文件。
比如你访问 https://example.com，服务器实际上返回的是 https://example.com/index.html。
所以每个网站的首页，都叫 index.html。这是一个你需要记住的小知识点。
通关条件
完成以下三步即可通关：
- 新建项目文件夹并在 AI 工具中打开
- 让 AI 帮你生成 index.html
- 在浏览器打开 index.html，看到效果
卡住了？
- AI 没有创建文件？检查你是否正确打开了文件夹。可以问 AI："你现在的工作目录是哪里？"
- 双击文件打开的是记事本？右键 → 打开方式 → 选择浏览器
- 页面是空白的？让 AI 检查一下文件内容有没有问题，或者直接说"页面是空白的，帮我检查一下"
- 刷新后没有变化？确认你保存了文件（AI 修改后通常会自动保存，但可以再确认一下）
通关条件
完成以下三步即可通关：
- 新建项目文件夹并在 AI 工具中打开
- 让 AI 帮你生成 index.html
- 在浏览器打开 index.html，看到效果
卡住了？
- AI 没有创建文件？检查你是否正确打开了文件夹。可以问 AI："你现在的工作目录是哪里？"
- 双击文件打开的是记事本？右键 → 打开方式 → 选择浏览器
- 页面是空白的？让 AI 检查一下文件内容有没有问题，或者直接说"页面是空白的，帮我检查一下"
- 刷新后没有变化？确认你保存了文件（AI 修改后通常会自动保存，但可以再确认一下）