2.4 Claude Code

Claude Code 是个很神奇的产品，它的主要形态是在终端/命令行里跑，在这个 UI 界面无比廉价的时代，它居然出现「返祖」的情况。

但实战效果贼好，导致我基本都弃用了 Cursor，主要用 Claude code 和 Codex。

第一步：准备工作（5分钟）

安装 Claude Code

重要提示：如果按照下面推荐的安装方式，不需要提前安装 Node.js。之前很多教程让你先装 Node.js，很多人就卡在这一步了。现在 Claude Code 提供了更简单的一键安装方式。

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

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

获取 Claude 账号

唯一的门槛，就是搞定一个能在 Claude Code 里用的账号。

推荐使用中转方案或国产大模型平替：

• 追求效果最好 → 选中转
• 追求简单方便 → 选国产大模型

export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic
export ANTHROPIC_AUTH_TOKEN=DEEPSEEK_API_KEY
export API_TIMEOUT_MS=600000
export ANTHROPIC_MODEL=deepseek-chat
export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1

第二步：做第一个作品（10分钟）

为什么做待办清单？

我建议第一个项目做「待办清单」，因为：

• ✅ 够简单：15分钟能完成
• ✅ 够实用：做完了真的能用
• ✅ 够完整：该有的功能都有（增删改查）

最终效果：一个网页，你可以添加任务、标记完成、删除任务，界面干净好看。

创建项目文件夹

还是在刚才的终端里，输入：

mkdir my-todo-app
cd my-todo-app
claude

现在你在 Claude Code 里了，可以开始对话。

先规划再动手（最重要！）

直接让 AI 写代码，容易一团乱。

聪明的做法：先让它给你一个计划，看清楚要做什么，再开始写代码。

我想做一个待办清单网页，要求：
1. 可以添加新任务（输入框+添加按钮）
2. 可以点击任务标记为完成（会有划线效果）
3. 可以删除任务（每个任务旁边有删除按钮）
4. 界面要简洁美观，用现代化的设计

请先给我一个实现计划，包括用什么技术、分几个文件、大概的实现步骤，等我确认后再开始写代码。

好的，我来规划这个待办清单应用：

## 技术选择
- HTML：页面结构
- CSS：样式设计（使用 Flexbox 布局）
- JavaScript：交互逻辑

## 文件结构
1. index.html - 主页面
2. style.css - 样式文件
3. script.js - 功能代码

## 实现步骤
1. 创建 HTML 基础结构（输入框、按钮、任务列表区域）
2. 编写 CSS 样式（现代卡片设计+渐变背景）
3. 实现 JavaScript 功能（添加、完成、删除）
4. 添加本地存储，刷新页面后数据不丢失

准备好了吗？我可以开始实现。

看着代码自己写出来

这是最神奇的部分。

你会看到 Claude 开始自己工作：

1. 创建 index.html 文件，写入 HTML 代码
2. 创建 style.css 文件，写入样式代码
3. 创建 script.js 文件，写入交互逻辑

整个过程你什么都不用做。就像看着一个程序员在你的电脑上工作。

每创建一个文件，Claude 都会告诉你它在做什么：

创建 index.html...
添加了页面基础结构，包括标题、输入区域和任务列表容器

创建 style.css...
使用了现代化的卡片设计，添加了渐变背景和阴影效果

创建 script.js...
实现了添加、完成、删除功能，并加入了本地存储

大概2-3分钟，所有代码就写完了。

打开浏览器看效果

代码写完后，Claude 会告诉你怎么运行。

python3 -m http.server 8000

浏览器会打开，你会看到：

• 顶部有个大标题「我的待办清单」
• 一个输入框，旁边有「添加」按钮
• 下面是任务列表区域

试试添加一个任务：学会用 Claude Code，点击添加。

你的第一个任务出现了！点击任务可以标记完成（会有划线），旁边的删除按钮可以删掉它。

第三步：加一个新功能

现在你可能会想：能不能改改？

当然可以，而且超级简单。

提一个新需求

假设你想给每个任务加上时间戳，显示是什么时候添加的。

直接在 Claude Code 里说：

我想给每个任务加上创建时间，格式是「2025-11-18 15:30」，显示在任务文字的下面，用小字灰色显示

Claude 会自动修改

Claude 会：

1. 告诉你需要改哪些地方
2. 自动修改 script.js 添加时间记录逻辑
3. 自动修改 style.css 添加时间显示的样式

你只需要刷新浏览器，新功能就生效了。

这就是 AI 协作的感觉：你提需求，它写代码，你验收效果。

不满意？继续对话调整。

试试其他功能

你还可以尝试：

• 「加一个优先级标签，重要的任务显示红色」
• 「加一个全部删除按钮」
• 「换一个配色方案，我想要蓝色系」

每次 Claude 都会理解你的意思，自动改代码。

常见问题

Q1：改错了怎么办？

别慌，Claude Code 有「时光机」功能。

/rewind

刚才那个改动我不喜欢，还原回去

Q2：我完全不懂代码，怎么知道 Claude 做的对不对？

答案：你不需要懂代码，你只需要测试功能。

就像你不需要懂汽车发动机，也能知道车能不能开。

测试清单：

• ✅ 添加任务试试，能加上吗？
• ✅ 标记完成试试，有划线吗？
• ✅ 删除试试，真的删掉了吗？
• ✅ 刷新页面，数据还在吗？

功能对了，代码就是对的。

有问题？直接告诉 Claude：「删除按钮点了没反应」，它会自己检查和修复。

Q3：为什么有些教程说要装 Node.js？

Q4：我应该从这个开始学编程吗？

这取决于你的目标。

如果你想快速做出东西（做个工具、验证个想法、自动化工作）：

• ✅ 从 Claude Code 开始是对的
• ✅ 边做边学，有问题就问 Claude
• ✅ 遇到不懂的概念，让 Claude 解释

如果你想成为专业开发者：

• ⚠️ Claude Code 是很好的辅助，但不能替代系统学习
• 📚 建议路径：用 AI 做出第一个项目（建立信心）→ 系统学习基础 → 再用 AI 加速开发

下一步：你可以做什么？

完成了这15分钟的教程，你已经掌握了：

• ✅ 安装和认证 Claude Code
• ✅ 先规划再动手的方法
• ✅ 让 AI 写代码并运行
• ✅ 迭代修改功能
• ✅ 解决常见问题

接下来试试这些

1. 做个你真正需要的工具

• 记账页面？
• 倒计时器？
• 个人简历网站？

2. 挑战：给待办清单加功能

• 加一个「优先级」分类（高/中/低）
• 加一个搜索功能
• 换成你喜欢的配色

3. 学习更多技巧

• 查看 提示词修炼
• 了解如何与 AI 更高效对话

# 启动
claude
 
# 创建项目
mkdir project-name
cd project-name
claude
 
# 常用命令
/help        # 查看帮助
/rewind      # 回退版本
/clear       # 清空对话
/exit        # 退出

做一个[项目类型]，需要：
1. [功能1]
2. [功能2]
3. [功能3]
界面要[风格要求]

请先给我一个实现计划，等我确认后再开始写代码。

下一节：提示词修炼 - 掌握与 AI 对话的艺术