关卡 4 · 第一次开口
前三关装上了、接通了、立好了规矩。这一关开始真干活。
建工地 → 进去启动 → 把要做的事说清楚 → 让它动手 → 浏览器里看成果。
STEP 1 / 5
在"用户目录"里建工地
别把项目堆桌面——桌面很快会乱。建一个项目总仓库,以后所有小项目都往里放。就建在上一关 .claude 所在的那个用户目录里。
① 打开文件资源管理器(任务栏黄色文件夹,或 Win+E),点顶部地址栏删干净,输这个回车,自动回到你的用户目录:
② 空白处右键 → 新建 → 文件夹,命名 sandbox(英文小写)。这就是你的项目总仓库。
③ 双击进 sandbox,再右键新建文件夹,命名 my-page。这是这次要做的项目。
sandbox 1,因为做教程的电脑里已经有一个 sandbox 了。你这边没有,直接叫 sandbox 就行——别带空格、别加数字。名字用英文小写:等会要在终端"走进"它,中文名、空格容易出岔子。
🆘 实在找不到用户目录?如果 Claude Code 还开着(看得到小螃蟹),就在对话框打这句回车:"帮我打开用户目录",它会弹出窗口,你再照第 ②③ 步建文件夹。
STEP 2 / 5
走进工地,再启动它
关键来了:先"站进" my-page 文件夹里,再启动它。这样它就只在这个文件夹干活,不会乱翻你电脑别处。"站进去"最简单的办法是拖一下,不用手打路径。
开始→输 PowerShell 打开;Mac 用 Command+空格→输 Terminal 回车。② 在终端里先打
cd,再敲一个空格(这个空格不能少!)。③ 把刚建的 my-page 文件夹用鼠标直接拖进终端窗口,松手。
松手后会自动冒出这个文件夹的完整路径(两头可能带引号 "…",正常)。确认 cd 和路径中间有空格,按回车——终端开头会变成以 my-page 结尾,就说明你站进工地了。接着输入 claude 把小螃蟹叫出来:
启动成功,框最底下一行末尾是 my-page,就对上了
⚠️ 图里模型名是做教程时的 Opus 4.8,你照 DeepSeek 走会显示别的——不影响,看红框里的位置就行。
STEP 3 / 5
第一次开口——把需求"说具体"
这一步是整关的核心,但很简单:别只说"做个网页",把你想要什么一条条说清楚。说清楚 = 要做什么 + 你是谁 + 页面放哪几块。
照下面这段填,把方括号 [] 换成你自己的,整段复制粘进输入框、回车:
下面是做教程时真实填的样子——每一条都写得很具体,这就是它能一次做对的关键:
STEP 4 / 5
它动手 → 你(可能)点个同意
回车后它会先回你一句(比如"下面我直接做页面"),然后开始写 index.html,你能看到它一行行把代码写出来:
my-page 里建 index.html,点同意。也可能直接就写、没弹框(有的环境默认不拦"建个文件"这种小事),同样正常,不用慌。
写完它会告诉你:页面已经建好,在哪个路径,双击就能打开预览。
STEP 5 / 5
在浏览器里打开你的第一个网页
① 回到 sandbox\my-page 文件夹(就是你刚才建项目、拖进终端的那个)。里面会出现一个 index.html,双击它。
② 它会用浏览器打开——你做的第一个网页,就显示在屏幕上了。 🎉
👉 想让页面变成你真正想要的样子,得从一开始就把方案、尤其是风格跟它聊清楚。这就是下一关要学的本事。
双击不是用浏览器打开(弹出记事本之类)?右键 index.html → 打开方式 → 选你的浏览器(Chrome / Edge / Safari 都行)。
页面打开是乱码?回 Claude Code 说"页面中文是乱码,请把网页编码设成 UTF-8 再保存一次"。
关卡 4 · 完成
你的第一个网页,做出来了。🎉
你已经能让它从零做出一个能在浏览器里打开的网页。
下一关:学会"先把方案和风格聊清楚、再让它动手",把它从"它随便给的样子"调成你真正想要的样子。