Claude Code 新手入门：从安装到做出第一个网页

先看目标：做出一个能打开的网页

Claude Code 是能读取、修改文件并调用工具的 AI 助手。本文使用终端版（CLI）：在文字窗口里说需求，让它在指定文件夹工作。

学完要做到： 从空文件夹生成阅读清单网页，打开检查，再改一次标题。

准备：受支持的系统与网络，先了解官方账号登录，再按需要选择 Orbis API 接入。

一、下载安装

1. 打开终端，选对应命令

• Windows：开始菜单搜索“PowerShell”，打开普通窗口。
• Mac：按 Command＋空格，搜索“终端”。
• 粘贴对应命令，按回车；命令只在终端运行。

Windows PowerShell：

irm https://claude.ai/install.ps1 | iex

macOS / Linux：

curl -fsSL https://claude.ai/install.sh | bash

安装结束后，新开终端，输入：

claude --version

成功标志： 出现版本号。以上为官方安装方式，会下载并执行脚本；已有安装不要重复叠加。

2. 或者，让已有 agent 帮你安装

把这句发给能执行本机命令的 agent：

根据 https://code.claude.com/docs/en/setup 检查系统和现有安装，用官方方法安装 Claude Code；保留已有配置，不重复安装、不改系统安全策略，登录和系统授权交给我，最后运行 claude --version 验证。

成功标志： 它报告版本号和启动方法。普通网页聊天不能替你执行本机安装。

二、先用官方账号登录

3. 启动 Claude Code，完成官方登录

1. 在“文档”中新建 claude-first 文件夹，在终端用 cd "文件夹完整路径" 进入。
2. 输入 claude。首次使用按提示选择官方账号登录方式；已有 Claude 订阅时选择对应账号路线，使用 Console API 时选择 Console 路线。
3. 在打开的官方网页完成登录与授权，再回到终端。账号须具备对应使用权限，订阅与 API 计费分别查看。
4. 输入 /status 核对账号与工作目录，然后发送“只回复：连接成功”。

仅供官方账号路线辨认。图源：DataCamp，历史 v2.1.9。

成功标志： 回到 Claude Code 后可以正常回答，工作目录是 claude-first。官方步骤见快速开始。

官方方式可用后，可以直接跳到“第一次使用：生成网页”。想通过 Orbis 调用模型，再做下一节；两条路线不需要同时配置。

三、可选：结合 Orbis API 使用

4. 准备模型、线路和 Key

1. 打开 Orbis 的 Claude Haiku 5.5 模型页。
2. 选择 Claude Code · AH 线路，按页面的“获取 Key”流程取得该线路密钥。
3. 在 Orbis“快速接入”选择刚取得的 Key，核对模型与配置。线路页面的可用模型列表为最终依据。

API Key 是应用访问服务的密钥。Orbis Key 绑定线路，改模型名称不会自动换线路；费用与额度按 Orbis 账户和线路计算，与 Claude 订阅分开。

成功标志： 你拿到的是 AH 线路 Key，快速接入页给出的模型 ID 与上表一致。不要把 Key 粘贴进聊天或网页文件。

5. 打开配置文件，先备份再填写

• Windows：文件资源管理器地址栏输入 %USERPROFILE%，进入或新建 .claude 文件夹，用记事本创建 settings.json，另存时选“所有文件”。
• Mac：Finder 按 Command＋Shift＋G，输入 ~/.claude；没有则在个人目录新建 .claude。使用纯文本编辑器保存 settings.json。
• 如果文件已存在，先复制为 settings-before-orbis.json。下面是空文件示例；已有内容只合并 env 内同名项，保留其余设置。

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.orbiorbi.com",
    "ANTHROPIC_MODEL": "claude-haiku-5-5",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "claude-haiku-5-5"
  }
}

成功标志： 文件名不是 settings.json.txt，英文引号与逗号完整。此文件只保存地址和模型，下一步才输入密钥。已有其他 ANTHROPIC_API_KEY、ANTHROPIC_AUTH_TOKEN 或 apiKeyHelper 配置时，先备份并移除不用的认证项，避免同时启用多套凭证。

6. 在终端输入 Key，启动练习

1. 在“文档”中新建 claude-first 文件夹，复制完整路径。
2. 新开终端，用 cd "文件夹完整路径" 进入该目录。
3. 运行对应命令，提示输入 Key 时粘贴自己的 Orbis Key，按回车；输入不会显示。

Windows PowerShell：

$env:ANTHROPIC_AUTH_TOKEN = [System.Net.NetworkCredential]::new('', (Read-Host '粘贴 Orbis Key' -AsSecureString)).Password
claude

Mac 默认终端（Zsh）：

printf '粘贴 Orbis Key：'
read -rs ANTHROPIC_AUTH_TOKEN
printf '\n'
export ANTHROPIC_AUTH_TOKEN
claude

成功标志： 进入任务输入区。临时密钥仅供当前终端及它启动的程序使用；新开终端需要重新输入。cd 是进入文件夹，首次信任目录时要确认路径。

7. 检查实际接入，别只看启动成功

• 输入 /status，检查 Anthropic base URL 是 Orbis 地址，凭证来源为 ANTHROPIC_AUTH_TOKEN，模型为上面的 ID。
• 发送“只回复：连接成功”，再到 Orbis 调用记录核对本次 Key、模型与线路。这次请求会使用 API 额度。
• 然后发送：“用中文告诉我当前目录完整路径和已有文件，不修改。”

看路径与输入区。你的路径应对应 claude-first，模型按自己的 /status 核对。

成功标志： 回复正常、调用记录对应、目录正确。不要让模型自报身份作为路由证据。

8. 已有订阅账号，怎样切换回来

Orbis 凭证生效时使用 API 路线，不需要再登录 Claude 订阅；仅设置地址而不配置凭证，不能保证脱离原订阅路线。官方网关说明

• 回到订阅：退出 Claude，关闭输入 Key 的终端，恢复备份配置；若原先没有配置，只移除本次新增的三个 env 项。
• 新开终端启动 claude，按官方账号流程登录，再用 /status 确认不再使用 Orbis 地址与凭证。

成功标志： 你知道当前使用哪套服务、在哪个平台查看额度。若曾自行持久保存密钥变量，还需清理对应持久设置。

四、第一次使用：生成网页

9. 发出一个足够具体的任务

在 Claude Code 输入区粘贴：

在当前目录创建 index.html，做成“周末阅读清单”网页。只用一个 HTML 文件，样式写在里面，不安装依赖，不引用外部图片或脚本。显示三张卡片：一本想读的书、一篇想读的文章、一个想研究的问题，内容都写“由我填写”。手机也要能看清。完成后给出文件路径，不启动服务器、不发布。

HTML 是浏览器能打开的网页文件。这里限定单文件，方便你找到成果。

看绿色新增内容、文件名和底部确认选项。图源：菜鸟教程，图中是 Python 示例，本文应操作 index.html。

成功标志： 目录中出现 index.html。如有权限请求，核对动作和路径后再允许。

10. 打开网页，检查三个地方

1. 在文件夹中双击 index.html，选择浏览器打开。
2. 检查标题和三张卡片是否齐全。
3. 缩窄浏览器窗口，检查文字是否仍能读清。

成功标志： 看到完整页面。找不到文件时，先让它报告保存路径；聊天中展示代码不等于保存成功。

11. 改一次标题

输入：

把网页标题改成“我的阅读角”，只改这一处，告诉我修改了哪个文件。

然后回到浏览器刷新。

成功标志： 新标题出现，三张卡片保持不变。出错时说清现象，例如“刷新后标题没变”，不要直接要求重写全部。

五、基本操作：先记住这几个命令

12. 查看帮助与继续对话

在 Claude Code 中输入 /，可以查看当前可用命令。

图源：菜鸟教程。看命令左侧名称与右侧说明，列表随版本变化。

成功标志： 退出后能重新进入原对话，接着修改同一网页。官方命令说明

13. 用文件引用缩小任务范围

• 输入 @，从候选列表选 index.html；也可直接写完整文件名。
• 发送：“只解释这个文件中三张卡片的内容在哪里，不修改。”
• 再发：“只把第一张卡片改成《由我填写书名》，保留另外两张。”

成功标志： 回答指向正确文件；刷新后只变一张卡片。@ 帮助定位材料，不代表自动授权任意修改。

14. 中断、纠偏与续接

• 发现它要安装多余软件，按 Esc 中断，然后说“保持单文件，不安装依赖，报告已经做过的改动”。
• 用 /exit 退出；在原目录运行 claude -c 继续。Orbis 临时变量方式要在同一个终端启动，或重新输入变量。
• 任务换成完全不同的项目时，用 /clear 开新对话；原文件不会因此恢复或删除。

成功标志： 能区分“停止工作”“继续旧对话”和“开始新对话”。中断可能发生在已写入文件之后，仍要打开网页检查。

15. 对话长了，整理一次上下文

“上下文”是这轮对话携带的材料和历史。先用 /context 看占用，再输入：

/compact 保留网页路径、单文件约束、已完成修改和待办

接着要求：“复述目前目标和约束，先不修改。”

成功标志： 摘要仍保留关键要求。重要约定写入文件，不只依赖聊天记忆。命令参考

六、进阶：把网页做完，也学会验收

16. 先计划，再给卡片加功能

1. 先在文件管理器复制 index.html，把副本命名为 index-before-button.html。
2. 输入 /plan，再发送下面的需求；旧版没有此命令时，明确要求只出方案不写文件。
3. 看完方案，确认改动范围后再要求执行。

给三张卡片增加“已读”按钮；点击能切换状态，刷新后保留。先说明保存位置、会改哪些地方、怎么测试，不改文件。

成功标志： 先拿到方案；确认执行后，逐一点击三张卡片、刷新、再取消已读。浏览器本地保存不等于跨设备同步。

17. 把长期要求写进 CLAUDE.md

在练习目录输入 /init，检查生成的 CLAUDE.md，保留适合本项目的内容，补上：

# 项目约定
- 用中文解释结果。
- 页面保持一个 HTML 文件，不安装依赖。
- 不引用外部图片和脚本，不发布。
- 修改后列出改动与人工验收步骤。

启动新对话，发送：“读取项目规则，复述约束，再建议一个小改进，先不执行。”

成功标志： 它引用了正确约定。这个文件是工作说明，不存 API Key；已有同名文件先复制备份再合并。

18. 审阅修改，保留能恢复的版本

• 让它“对照 index-before-button.html，列出 index.html 新增和删除的内容；只检查，不修改”。
• 自己在浏览器测试按钮和窄屏，再决定是否保留；要撤回可用备份恢复，先另存当前版本。
• 已会用 Git（文件版本管理）的读者，可以用 /diff 查看差异；普通练习目录先用文件副本即可。

可选的 VS Code 扩展：左边看改动，右边确认。图片不代表 Orbis 配置已生效；扩展认证要按官方网关说明另行设置。

成功标志： 你能指出改动、执行验收，并知道如何回到上一版。AI 自查是补充，不能代替自己打开成品。

遇到问题，先查这张表

只在练习目录操作，不放密钥和隐私材料。安装及功能以官方文档为准；教程结构参考 DataCamp 与菜鸟教程。