✦ 目录

关卡 4 · 第一次开口

前三关装上了、接通了、立好了规矩。这一关开始真干活
建工地 → 进去启动 → 把要做的事说清楚 → 让它动手 → 浏览器里看成果。

STEP 1 / 5

在"用户目录"里建工地

别把项目堆桌面——桌面很快会乱。建一个项目总仓库,以后所有小项目都往里放。就建在上一关 .claude 所在的那个用户目录里。

打开文件资源管理器(任务栏黄色文件夹,或 Win+E),点顶部地址栏删干净,输这个回车,自动回到你的用户目录:

%USERPROFILE%

空白处右键 → 新建 → 文件夹,命名 sandbox(英文小写)。这就是你的项目总仓库。

到用户目录后右键新建文件夹 sandbox

双击进 sandbox,再右键新建文件夹,命名 my-page。这是这次要做的项目。

在 sandbox 里建第一个项目文件夹 my-page
⚠️ 看图注意:图里显示的是 sandbox 1,因为做教程的电脑里已经有一个 sandbox 了。你这边没有,直接叫 sandbox 就行——别带空格、别加数字
名字用英文小写:等会要在终端"走进"它,中文名、空格容易出岔子。

🆘 实在找不到用户目录?如果 Claude Code 还开着(看得到小螃蟹),就在对话框打这句回车:"帮我打开用户目录",它会弹出窗口,你再照第 ②③ 步建文件夹。

STEP 2 / 5

走进工地,再启动它

关键来了:先"站进" my-page 文件夹里,再启动它。这样它就只在这个文件夹干活,不会乱翻你电脑别处。"站进去"最简单的办法是拖一下,不用手打路径。

打开一个终端:Windows 按开始→输 PowerShell 打开;Mac 用 Command+空格→输 Terminal 回车。
在终端里先打 cd,再敲一个空格这个空格不能少!)。
把刚建的 my-page 文件夹用鼠标直接拖进终端窗口,松手。
先输入 cd 空格,再把 my-page 拖进终端

松手后会自动冒出这个文件夹的完整路径(两头可能带引号 "…",正常)。确认 cd 和路径中间有空格,按回车——终端开头会变成以 my-page 结尾就说明你站进工地了。接着输入 claude 把小螃蟹叫出来:

路径自动出现,回车进入 my-page,再输 claude 启动 启动成功,工作目录末尾是 my-page

启动成功,框最底下一行末尾是 my-page,就对上了

🎯 "它会不会偷看我整台电脑?"不会。你在 my-page 里启动,它默认只看你启动它的那个文件夹(这叫它的"工作目录")。在哪个文件夹启动 = 你亲手给它划的活动范围。这就是为什么非要"先进文件夹、再启动"。

⚠️ 图里模型名是做教程时的 Opus 4.8,你照 DeepSeek 走会显示别的——不影响,看红框里的位置就行

STEP 3 / 5

第一次开口——把需求"说具体"

这一步是整关的核心,但很简单:别只说"做个网页",把你想要什么一条条说清楚。说清楚 = 要做什么 + 你是谁 + 页面放哪几块。
照下面这段填,把方括号 [] 换成你自己的,整段复制粘进输入框、回车:

我想做一个介绍我自己的个人网页,先做成单个 HTML 文件就行,不要复杂功能。 我叫 [你的名字],是 [你的身份,比如:一名英语专业的大学生 / 一个普通上班族]。 页面上我想放这几块: 1. 最上面一句话,介绍我是谁(比如放一句你喜欢的话) 2. 关于我(两三句话,写写你喜欢什么、是个怎样的人) 3. 我会的技能 / 做过的事(列三四条具体的,越具体越好) 4. 联系方式(邮箱或微信,换成你自己的)

下面是做教程时真实填的样子——每一条都写得很具体,这就是它能一次做对的关键:

把需求一条条说具体地填进输入框
注意:上面这段只说清了要放哪些内容完全没提想要什么风格(颜色、排版、整体感觉)。先这样让它直接做——做完你就会明白,这里留了个坑

STEP 4 / 5

它动手 → 你(可能)点个同意

回车后它会先回你一句(比如"下面我直接做页面"),然后开始写 index.html,你能看到它一行行把代码写出来:

它直接开始写 index.html
它写文件时可能弹那个"同不同意"的框(还记得关卡 3 的安全闸门吗)——看清是在你的 my-page 里建 index.html点同意
可能直接就写、没弹框(有的环境默认不拦"建个文件"这种小事),同样正常,不用慌。

写完它会告诉你:页面已经建好,在哪个路径,双击就能打开预览。

它告诉你页面建好了、在哪个路径

STEP 5 / 5

在浏览器里打开你的第一个网页

回到 sandbox\my-page 文件夹(就是你刚才建项目、拖进终端的那个)。里面会出现一个 index.html双击它

my-page 文件夹里出现了 index.html

它会用浏览器打开——你做的第一个网页,就显示在屏幕上了。 🎉

浏览器里打开的第一个网页成果
先恭喜你——这是从 0 到 1 实打实的一步。但你大概也发现了:这页面长成什么样,根本不是你定的,是它自己拿的主意。坑在于你只说清了"放什么内容"、没说"想要什么风格",样式当然就它说了算。
👉 想让页面变成你真正想要的样子,得从一开始就把方案、尤其是风格跟它聊清楚。这就是下一关要学的本事。

双击不是用浏览器打开(弹出记事本之类)?右键 index.html → 打开方式 → 选你的浏览器(Chrome / Edge / Safari 都行)。
页面打开是乱码?回 Claude Code 说"页面中文是乱码,请把网页编码设成 UTF-8 再保存一次"。

关卡 4 · 完成

你的第一个网页,做出来了。🎉

你已经能让它从零做出一个能在浏览器里打开的网页。
下一关:学会"先把方案和风格聊清楚、再让它动手",把它从"它随便给的样子"调成你真正想要的样子