## 概述
本教程面向从未接触过 Claude Code 的零基础学习者，带你从安装环境开始，一步步用一句话提示词生成一个可在浏览器里玩的贪吃蛇网页游戏。完成后你将掌握 Claude Code 的安装、登录、对话、文件读写与项目组织全流程，并拥有一份自己生成的可运行 HTML 小游戏。全程无需手写复杂代码，适合编程小白、转行学习者与训练营入门第一课。
## 前置条件
在开始之前，请确认你的电脑满足以下条件：
| 条目 | 要求 | 说明 |
|------|------|------|
| 操作系统 | Windows / macOS / Linux 任一 | 三端均可 |
| 终端 | 系统自带终端或 PowerShell、iTerm | 用来输入命令 |
| Node.js | 18 及以上版本 | Claude Code 的运行基础 |
| 网络 | 能访问 npm 与 Anthropic | 安装与登录需要联网 |
| 浏览器 | Chrome / Edge / Firefox 任一 | 用来打开生成的游戏 |
如果你还没有 Node.js，去官网下载"长期支持版（LTS）"安装即可。安装完成后，打开终端，输入：
```bash
node -v
npm -v
```
只要两条命令都能返回一个版本号（如 `v20.11.0` 和 `10.2.4`），就说明环境就绪。
> 小贴士：如果你同时维护多个项目、Node 版本经常切换，推荐安装 `nvm`（macOS/Linux）或 `fnm`（Windows）来管理 Node 版本，避免版本冲突。
## 正文：从安装到游戏跑通
### 第一步：安装 Claude Code
在终端里执行一条命令即可全局安装：
```bash
npm install -g @anthropic-ai/claude-code
```
**预期结果**：命令执行完毕后，终端会显示一串安装日志，最后一行通常类似 `added 1 package in 12s`。接着输入：
```bash
claude --version
```
能看到版本号（如 `1.x.x`）就代表安装成功。
**常见问题**：
- **权限报错（macOS/Linux）**：如果出现 `EACCES` 权限错误，说明全局安装目录没有写权限。两种解法：一是用 `sudo`（`sudo npm install -g @anthropic-ai/claude-code`），二是把 npm 全局目录改到用户目录下（推荐后者，长期更省心）。
- **命令找不到**：装完后输入 `claude` 提示 `command not found`，多半是 npm 全局 bin 目录没加入系统环境变量 PATH。可执行 `npm config get prefix` 找到全局路径，再把对应的 `bin` 子目录加入 PATH。
- **公司网络装不上**：切换到稳定的家庭网络，或给 npm 配置国内镜像后再试。
### 第二步：登录认证
在任意目录下直接输入：
```bash
claude
```
首次启动时，Claude Code 会引导你完成登录。主流方式有两种：
1. **订阅登录（Claude Pro / Max）**：在终端里会显示一个链接和一串验证码，用浏览器打开链接、粘贴验证码即可绑定账号。适合已经订阅 Claude 的用户。
2. **API 密钥**：如果你用的是 Anthropic API key，可以通过环境变量配置：
```bash
# macOS / Linux
export ANTHROPIC_API_KEY="你的密钥"
# Windows PowerShell
$env:ANTHROPIC_API_KEY="你的密钥"
```
**预期结果**：登录成功后，终端会出现一个交互式输入框，光标闪烁等待你提问，界面通常显示类似 `>` 提示符与当前所在目录。
**常见问题**：
- **验证码过期**：链接里的验证码有时效，如果停留太久会失效，重新运行 `claude` 再获取一次即可。
- **密钥无效**：确认密钥没有多余空格、没有把公私钥搞混，并且账号里有可用额度。
### 第三步：建立项目文件夹
养成"一个项目一个文件夹"的好习惯。在终端执行：
```bash
mkdir snake-game
cd snake-game
```
进入文件夹后，再次启动 Claude Code：
```bash
claude
```
注意：Claude Code 启动时会"看"到当前目录下的文件，作为它工作的上下文。所以**在哪个文件夹启动，它就在哪个文件夹干活**。
### 第四步：写一条清晰的提示词
很多人第一次用 AI 写代码效果不好，根因是提示词太模糊。一个能产出高质量结果的提示词应该包含：**目标、技术栈、功能点、风格要求**。
在交互框里输入下面这段：
```
帮我在当前目录创建一个 index.html 文件，实现一个贪吃蛇游戏。要求：
1. 单文件实现，HTML + CSS + JavaScript 全部写在一个文件里
2. 20×20 的方格棋盘，蛇是绿色方块，食物是红色方块
3. 用键盘方向键控制方向，吃到食物加分加长，撞墙或撞自己游戏结束
4. 顶部显示当前分数和最高分（用 localStorage 保存）
5. 有"开始/暂停"按钮和重新开始功能
6. 整体配色干净现代，棋盘居中显示
```
按下回车后，Claude Code 会开始思考并写代码。
**预期结果**：你会看到它在终端里"边想边做"——先是分析需求，然后调用工具创建 `index.html`，最后输出一段它做了什么的说明。终端里通常会出现形如 `Created index.html` 的提示。
**常见问题**：
- **它问我要不要执行某个操作**：Claude Code 默认在写入文件前会征求同意。输入 `y` 回车同意；如果想让它后续不再每次都问，可以后续配置权限。
- **生成的代码不完整**：可能是提示词不够具体。直接在同一对话里追加："请把完整的代码全部写出，不要省略任何部分。"
### 第五步：检查生成的文件
让 Claude Code 自己打开看看：
```
帮我打开 index.html 看看里面的内容
```
或者在终端退出 Claude Code（按两次 `Ctrl+C` 或输入 `/exit`）后直接用编辑器打开 `snake-game/index.html`。你会得到一份结构清晰的单文件代码，大致长这样（节选关键骨架）：
```html
贪吃蛇
得分：0 最高分：0
```
### 第六步：在浏览器里运行
不需要搭服务器，直接双击 `index.html` 文件，或把它拖进浏览器窗口，游戏立刻就能玩。用方向键控制绿色小蛇吃红色食物，分数会实时累加，最高分会被浏览器记住。
**常见问题**：
- **页面空白**：按 `F12` 打开浏览器开发者工具的 Console 面板，看有没有红色报错；多半是某个变量名拼错，把报错信息复制给 Claude Code 让它修。
- **手机上不能用**：贪吃蛇依赖键盘，手机没有方向键。可以追加一句提示词："请加上触屏滑动控制方向，让手机也能玩。"
### 第七步：迭代升级
第一次跑通后，继续在同一对话里追加需求，让它逐步增强游戏：
```
请给游戏增加：
1. 难度选择（慢/中/快，对应不同的刷新速度）
2. 吃到食物时有音效（用 Web Audio API，不要外部音频文件）
3. 游戏结束时不弹 alert，改为页面中央显示半透明结算面板
4. 蛇头和蛇身颜色稍微区分一下
```
**预期结果**：Claude Code 会读取现有的 `index.html`，在原有基础上做增量修改，而不是推倒重写。这正是它"记住上下文"的优势——你不用把整份代码再贴一遍。
## 实战案例：完整的第一次项目流程
把上面的步骤串起来，一个零基础学习者的完整操作链如下：
```bash
# 1. 安装
npm install -g @anthropic-ai/claude-code
claude --version
# 2. 登录（首次启动自动引导）
claude
# 3. 建项目
mkdir snake-game && cd snake-game
claude
# 4. 在交互框输入需求提示词（见第四步）
# 5. 同意写入文件
# 6. 追加迭代需求（见第七步）
# 7. 双击 index.html 即玩
```
进阶一点，可以让 Claude Code 帮你把项目纳入版本管理（如果你已安装 git）：
```
帮我把这个项目初始化为 git 仓库，写一个合适的 .gitignore 和 README.md，并做第一次提交
```
这样你就拥有了一个规范的、可分享的小项目。
## 工作流程图
下面这张图展示了从安装到游戏跑通的完整工作流：
```mermaid
flowchart TD
A[确认 Node.js 环境] --> B[npm 全局安装 Claude Code]
B --> C[终端运行 claude 登录认证]
C --> D{登录方式}
D -->|订阅账号| E[浏览器粘贴验证码]
D -->|API 密钥| F[设置环境变量]
E --> G[创建项目文件夹并进入]
F --> G
G --> H[在文件夹内启动 claude]
H --> I[输入清晰的需求提示词]
I --> J[Claude 读取目录 / 创建 index.html]
J --> K[同意写入文件]
K --> L[浏览器打开 index.html]
L --> M{游戏正常?}
M -->|是| N[追加迭代: 音效/难度/结算面板]
M -->|否| O[复制报错让 Claude 修复]
O --> L
N --> P[git 初始化并提交]
P --> Q[项目完成]
```
## 常用命令速查
| 命令 / 操作 | 作用 |
|-------------|------|
| `claude` | 在当前目录启动交互式会话 |
| `claude --version` | 查看版本 |
| `/exit` 或两次 `Ctrl+C` | 退出会话 |
| `/clear` | 清空当前对话上下文 |
| `/help` | 查看所有可用命令 |
| `Ctrl+C` 一次 | 中断当前正在进行的生成 |
## 写好提示词的三个原则
1. **目标具体**：不要说"做个小游戏"，要说"做一个 20×20 棋盘的贪吃蛇"。
2. **列清功能点**：用编号清单逐条写出，便于 AI 一一对应实现。
3. **约束边界**：明确"单文件实现""不要外部依赖"这类限制，避免它给你拆出一堆文件夹。
## 延伸阅读
- **官方快速上手**：`https://code.claude.com/docs/en/quickstart` — Anthropic 官方出品的入门文档，权威且持续更新。
- **CLAUDE.md 项目记忆**：学会在项目根目录放一个 `CLAUDE.md` 文件，把项目规则、技术栈约定写进去，Claude Code 每次启动都会自动读取，省去反复说明。
- **权限管理**：了解 `/config` 与权限配置，决定哪些命令可以让它自动执行、哪些必须每次确认，在安全与效率之间找到平衡。
- **Plan 模式**：对于复杂需求，先让它进入计划模式做方案再动手，避免大改动失控。
## 训练营适用性评估
| 维度 | 评估 |
|------|------|
| 适用训练营 | 编程入门训练营、AI 编程入门营、转行 IT 训练营、青少年编程启蒙营 |
| 学员基础 | 零基础可学，会基本终端操作即可 |
| 教学时长 | 约 60–90 分钟（含讲解、动手、答疑） |
| 硬件要求 | 每人一台能联网、已装 Node.js 的电脑 |
| 学习产出 | 一份可运行、可分享的贪吃蛇网页游戏，建立"我也能用 AI 做出东西"的信心 |
| 衔接后续 | 学完后可平滑过渡到 Skill 开发、MCP 服务器、自动化 Agent 等进阶主题 |
本教程特别适合作为训练营的"破冰第一课"：成果即时可见、成就感强、且不涉及复杂工程结构，能有效降低入门恐惧，为后续深入打下正向预期。
## 参考来源
1. [Quickstart - Claude Code Docs](https://code.claude.com/docs/en/quickstart) — Anthropic 官方快速上手指南，安装、登录与首个任务权威流程。
2. [Claude Code Tutorial for Beginners 2026 (DEV Community)](https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma) — 从安装到构建首个项目的完整 2026 入门教程。
3. [How to Use Claude Code (Beginner Guide) - builder.io](https://www.builder.io/blog/how-to-use-claude-code) — 强调提示词质量与正确使用姿势的实战指南。
4. [Claude Code Tutorial for Beginners - Complete 2026 Guide](https://codewithmukesh.com/blog/claude-code-for-beginners/) — 涵盖安装、CLAUDE.md、命令与最佳实践的完整指南。
5. [Claude Code Beginners: First Project in 30 Min](https://www.lowcode.agency/blog/claude-code-first-project-tutorial) — 30 分钟完成首个项目的分步教程，适合快速上手参考。
> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。
