# 零基础装通 Claude Code 造网页点名器
## 概述
本教程面向**完全零基础**的开发者：从未用过命令行、没写过代码也能跟着做完。你将完成三件事——安装并登录 Claude Code、理解它的"对话式编程"循环、最终让它帮你从零生成一个**网页版随机点名器**（HTML 单文件，双击即可在浏览器跑起来）。学完你掌握的不是某个工具的用法，而是"用自然语言指挥 AI 写程序"这套全新工作方式。
## 前置条件
| 条目 | 要求 | 说明 |
|------|------|------|
| 操作系统 | macOS / Windows / Linux 任一 | 三平台均原生支持 |
| 账号 | Claude 订阅（Pro/Max/Team/Enterprise）**或** Console API 充值账号 | 二选一，订阅最省心 |
| 命令行 | 会"打开终端、粘贴命令、回车"即可 | 不需要记忆任何命令 |
| 网络 | 能访问 `claude.ai` | 首次登录需浏览器跳转 |
> **不需要**预先安装 Node.js、Python 或任何编辑器。Claude Code 已改为**原生安装包**，开箱即用，并在后台自动更新。
---
## 第一步：安装 Claude Code（约 2 分钟）
打开终端，按你的系统选**一条**命令粘贴执行。
**macOS / Linux / WSL：**
```bash
curl -fsSL https://claude.ai/install.sh | bash
```
**Windows PowerShell：**
```powershell
irm https://claude.ai/install.ps1 | iex
```
**包管理器（可选）：**
```bash
# macOS 已装 Homebrew
brew install --cask claude-code
# Windows 已装 WinGet
winget install Anthropic.ClaudeCode
```
**预期结果**：命令跑完后，终端会提示安装成功。输入以下命令验证：
```bash
claude --version
```
能看到版本号（如 `2.x.x`）即安装成功。原生安装方式会在后台静默更新，**无需手动升级**；若用 Homebrew/WinGet，则需偶尔执行 `brew upgrade claude-code` 或 `winget upgrade Anthropic.ClaudeCode`。
### 常见问题
| 报错 | 原因与解决 |
|------|-----------|
| `syntax error near unexpected token '<'` 或 `403` | curl 拉取失败，多为网络/代理问题，参考官方"安装排错"页换镜像或加代理 |
| PowerShell 报 `'irm' is not recognized` | 你其实在 CMD 里，改用上面 CMD 专用命令 |
| Windows 提示找不到 Bash 工具 | 推荐装 Git for Windows，Claude Code 会用它执行命令 |
---
## 第二步：登录账号（约 1 分钟）
直接输入：
```bash
claude
```
首次运行会提示登录，自动打开浏览器完成认证（订阅用户跳转到 claude.ai 授权，Console 用户用 API Key）。登录后凭证会存到本地，**以后无需重复登录**。若日后要切换账号，在会话里输入 `/login` 即可。
---
## 第三步：建立你的第一个项目目录
Claude Code 的工作单位是"**一个文件夹**"。我们先建一个干净的项目目录：
```bash
mkdir name-picker
cd name-picker
```
进入目录后再次启动：
```bash
claude
```
此时终端顶部会显示版本、当前模型、工作目录，下方是输入提示符 `>`。**这表示你已经进入 Claude Code 的对话界面**。
> 小贴士：输入 `/` 可呼出所有斜杠命令；按 `Tab` 自动补全；`↑` 调出历史；`Shift+Tab` 循环切换**权限模式**（default → auto-accept → plan）。
---
## 第四步：配置项目记忆 CLAUDE.md（强烈推荐）
`CLAUDE.md` 是放在项目根目录的"项目说明书"，Claude 每次启动都会自动读取它。对零基础者，它最大的价值是**固化你的偏好**，省得每次重复说。
在对话里直接对 Claude 说：
```
帮我创建一个 CLAUDE.md，写明：本项目是一个网页点名器，技术栈只用单个 HTML 文件内嵌 CSS 和 JS，不引入任何外部依赖，代码注释用中文。
```
Claude 会生成类似内容：
```markdown
# 项目说明
- 名称：网页随机点名器
- 目标：单 HTML 文件，双击浏览器即可运行
- 技术约束：原生 HTML/CSS/JS，零依赖
- 风格：注释用中文，代码清晰可读
```
### 常见问题
- **要不要写很多？** 不用。3–5 条核心约束即可，越具体 Claude 越听话。
- **支持多层吗？** 支持。根目录的 `CLAUDE.md` 管全局，子目录里再放一个只对该子目录生效。
---
## 第五步：让 Claude 造出点名器（核心环节）
这是整篇教程的高潮。用大白话描述需求，把"想法"变成"程序"。在对话框输入：
```
请帮我做一个网页版随机点名器，要求：
1. 单个 index.html 文件，双击就能在浏览器打开
2. 顶部有一个大显示区，显示当前滚动的名字
3. 一个"开始点名"按钮，点一下开始快速滚动名字，再点一下停止并定格在随机一人
4. 下方一个文本框，可以一行一个名字地编辑名单
5. 显示最近 5 次点名历史
6. 配色好看一点，紫色渐变背景，卡片式布局
```
**预期过程**：Claude 会先确认理解，然后给出文件修改方案，**并请求你批准**（permission）。零基础者保持 default 模式即可，每次它要写文件都会问"是否允许"。
按提示选 `Yes`（或按 `a` 接受本次会话所有改动）。
Claude Code 修改文件的标准流程：
1. 找到/创建目标文件（这里是新建 `index.html`）
2. 展示它打算写入的完整内容
3. 请求你确认
4. 执行写入
5. 汇报结果
> 关键认知：Claude Code **总是先问再做**，不会偷偷改你的文件。这是它和"全自动脚本"最大的区别，也是零基础者敢放手用的底气。
---
## 第六步：浏览器预览
文件生成后，直接告诉 Claude：
```
帮我在默认浏览器里打开 index.html 预览
```
或手动在文件管理器里双击 `index.html`。你会看到一个紫色渐变背景、白色卡片居中的点名器界面，点按钮即可滚动停名。
---
## 第七步：迭代加功能
第一版跑通后，继续用对话迭代。比如：
```
加一个"清空历史"按钮，放在历史记录旁边；并且当名单为空时点开始，给出友好的提示而不是报错。
```
Claude 会增量修改现有文件，而不是推倒重来。这就是**对话式开发**的魅力——像跟一位同事提需求，他立即改给你看。
---
## 实战案例：完整的网页点名器代码
以下是按上述步骤最终得到的可运行 `index.html`，供对照（你也可以直接保存为文件体验）：
```html
随机点名器
```
把这段代码交给 Claude，让它逐行讲解 `setInterval`、`Math.random`、事件监听是如何配合的，是零基础者**边用边学**最快的方式。
---
## 工作流程图
```mermaid
flowchart TD
A[打开终端] --> B[执行安装命令]
B --> C[claude 首次启动]
C --> D[浏览器登录授权]
D --> E[建项目目录并 cd 进入]
E --> F[创建 CLAUDE.md 固化偏好]
F --> G[用大白话描述需求]
G --> H{Claude 提出修改方案}
H -->|审核并批准| I[文件写入磁盘]
I --> J[浏览器预览效果]
J --> K{满意?}
K -->|否| G
K -->|是| L[继续迭代加功能]
L --> G
```
这条"**描述 → 审批 → 生成 → 预览 → 再描述**"的闭环，就是 Claude Code 的**代理循环（agentic loop）**——理解它，比记住任何命令都重要。
---
## 延伸阅读
- **官方快速上手**：`code.claude.com/docs/en/quickstart` — 最权威的入门路径
- **你的第一天**：`support.claude.com/en/articles/14552382` — 15 分钟从安装到第一次改动
- **最佳实践**：`code.claude.com/docs/en/best-practices` — 学会"如何把需求描述清楚"
- **CLI 命令参考**：`code.claude.com/docs/en/cli-reference` — 所有 `claude` 命令速查
进阶方向：学会 `/init`、`/clear`、权限模式后，可继续探索 CLAUDE.md 进阶写法、自定义 Skills、Hooks 与 MCP，把点名器这种小工具扩展成真正的自动化工作流。
---
## 训练营适用性评估
| 维度 | 评估 |
|------|------|
| 适合的训练营类型 | **零基础 AI 编程启蒙营**、教师/非技术从业者数字素养营、青少年编程入门营 |
| 不适合 | 已有 2 年以上经验的高级工程师训练营（内容过浅） |
| 预计教学时长 | **1.5–2 小时**（含讲解 + 动手 + 迭代） |
| 学员产出 | 每人一个可分享的网页点名器 HTML 文件，可发链接展示 |
| 后续衔接 | 可自然过渡到 Round 2「自定义 Skill 开发」，把"造点名器"的经验沉淀成可复用技能 |
本教程刻意选用**单 HTML 文件**作为首个项目，目的是让零基础学员在 2 小时内获得"我也能做出一个真实可用的程序"的强烈成就感——这是 AI 编程启蒙最关键的第一次正反馈。
---
## 参考来源
1. [Quickstart - Claude Code Docs](https://code.claude.com/docs/en/quickstart) — Anthropic 官方快速上手指南，安装命令与首次会话权威来源
2. [Your first day in Claude Code - Claude Help Center](https://support.claude.com/en/articles/14552382-your-first-day-in-claude-code) — 官方知识库，15 分钟完成安装到首次代码改动
3. [Claude Code Tutorial: Complete Beginner's Guide (2026)](https://skillsplayground.com/guides/claude-code-tutorial/) — 第三方教程博客，覆盖安装到首项目的完整流程
4. [Setting Up a New Claude Code Project: The Complete Guide - Builder.io](https://www.builder.io/blog/setting-up-claude-code-project) — 工程博客，项目初始化与配置实践
5. [Installation and First Launch - SFEIR Institute](https://institute.sfeir.com/en/claude-code/claude-code-installation-and-first-launch/tutorial/) — 培训机构教程，多平台安装与首次启动详解
> [!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 等场景全覆盖。
