第一步：準備工作
1.1 安装 Claude Code
方案一（Claude code 官方推荐方式）
如果你按照我下面推薦的安裝方式（Mac 的 curl 命令或 Windows 的 PowerShell 命令），不需要提前安裝 Node.js。
之前很多教程讓你先裝 Node.js，很多人就卡在這一步了。現在 Claude Code 提供了更簡單的一鍵安裝方式，跳過了這個坑。（2025年12月1日更新：這裡 Claude code 增加了地區檢測，需要科學上網才能執行，在命令列裡配置代理）
Mac 使用者：
- 開啟「終端」（Terminal）- 在啟動臺裡搜尋就能找到。終端是一個使用命令讓電腦幹活的方式，只需要會複製貼上，按回車，就可以用。
- 複製這行命令，貼上進去，回車：
Bashcurl -fsSL https://claude.ai/install.sh | bashWindows 使用者：
- 點選開始選單，搜尋「PowerShell」，右鍵選擇「以管理員身份執行」
- 複製這行命令，貼上進去，回車：
PowerShellirm https://claude.ai/install.ps1 | iex 安裝過程會自動下載，等個 1-2 分鐘就好。 **安裝完成的標誌**：會提示「Claude Code installed successfully」。 ### 方案二（NodeJS 方案）
1. 安裝 Node.jshttps://nodejs.org/zh-cn/download
Mac：點選「macOS 安裝程式(.pkg)」
Windows：点击「Windows 安装程序(.msi)」，更完整的教程，可参考详细步骤
驗證安裝：
Mac
```Plain
在Finder「应用程序->工具文件夹->终端」，打开终端
输入node -v，按回车
如果显示版本号，说明 Node.js 安装成功
再输入：npm -v，按回车
如果显示版本号，说明 npm 也安装成功Windows
按下键盘上的 Win + R 键，输入 "cmd"，然后按回车，打开命令提示符，在命令提示符窗口中输入：
node -v，按回车
如果显示版本号，说明 Node.js 安装成功
再输入：npm -v，按回车
如果显示版本号，说明 npm 也安装成功 - 安裝 Claude code
Claude code 官方（Windows 和 Mac，安裝方式都一樣）
npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com複製以上內容，貼上到終端，按回車安裝。
安裝完，輸入 claude --version ，按回車，如果看到版本號，則說明安裝成功。
### **1.2你需要一个 Claude 账号**唯一的門檻，就是搞定一個能在 Claude code 裡用的賬號。
可以這樣理解 Claude code：它是一個工具，Claude code 和大模型的關係，就像手機和運營商的關係。你的手機可以選電信、聯通、移動，都能打電話上網， Claude code 就相當於手機，大模型就相當於運營商，你可以在 Claude code 使用各種模型，你只需要為大模型付費。
Claude 官方會直接封中國使用者的賬號，所以使用官方賬號門檻很高。
推薦使用中轉方案。
如何選擇？如果追求效果最好，選中轉；
| 方案型別 | 名稱 | 連結 |
|---|---|---|
| 中轉（中轉的意思是，你的請求會傳送到中轉服務商那裡，然後它再請求 Claude 官方，所以你不用擔心封號、梯子之類的問題） | GACcode | https://maynorai.tqfk.xyz/item/17 |
| ClaudeCodeCodexGemini 一個月 | https://maynorai.tqfk.xyz/item/7 | |
| 購買連結： https://maynorai.tqfk.xyz/cat/5 |
詳細安裝教程：
[Claude Code 使用教程](https://ai.feishu.cn/wiki/CVPBwfMFmis0r9k60vaclVArnHf?from=space_home_recent&pre_pathname=%2Fdrive%2Fhome%2F&previous_navigation_time=1765942709298)
### 1.3 降低上手门槛：安装 Claude code for vs code 插件使用終端、命令列還是擋住了非常多的朋友，這個時候，有個介面很重要！
Claude code、Codex 官方也都推出了外掛，安裝即可使用。
第一步：安装 vs code
https://code.visualstudio.com/
在 vs vode 官網下載安裝，免費的
第二步：安装插件
点击链接：https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code，会自动跳转到 vs code 安装。
或者在 vs code 外掛市場搜尋「Claude code」，即可安裝
#### 如何使用安裝完之後，點選 Claude code 圖示，即可使用。
這個時候配置base url 和 api key 比較麻煩，可以用 cc [Switch] 去配置：
cc Switch：https://github.com/farion1231/cc-switch
安裝教程：https://github.com/farion1231/cc-switch/blob/main/README_ZH.md
Windows 版本：[Windows ](https://waytoagi.feishu.cn/wiki/ZKg8wikjzi3SKLkvAXPcavHlnDb)
Mac 版本： [CC-Switch-v3.8.2-macOS](https://waytoagi.feishu.cn/wiki/MRQPwLrFUivnVMkoh31cjX2qncf)
- 在 cc Switch 裡勾選應用到 Claude code 外掛，然後重新啟動 vs code。
#### 开启 Claude code 全自动模式預設狀態下，Claude code 只能在 plan、手動確認、自動編輯三種模式選擇，可以在 cc 外掛裡開啟「Allow Dangerously Skip Permissions」，這樣能開啟全自動模式，cc 能自動執行命令，無需二次確認。下面的選項裡，也可以把全自動模式配置為預設模式。
## **第二步：做你的第一个作品**
### **2.1 我们要做什么？**
我建議第一個專案做「待辦清單」。
為什麼？
- 夠簡單，15 分鐘能完成
- 夠實用，做完了真的能用
- 夠完整，該有的功能都有（增刪改查）
**最終效果是什麼樣？**
一個網頁，你可以：
- 新增任務
- 標記任務完成
- 刪除任務
- 介面乾淨好看
### **2.2 创建项目文件夹**還是在剛才的終端裡，輸入：
mkdir my-todo-app
cd my-todo-app
claude
解釋一下：
- `mkdir my-todo-app`：建立一個叫「my-todo-app」的資料夾
- `cd my-todo-app`：進入這個資料夾
- `claude`：啟動 Claude Code
現在你在 Claude Code 裡了，可以開始對話。
### **2.3 最重要的一步：先规划再动手**直接讓 AI 寫程式碼，容易一團亂。
聰明的做法是先讓它給你一個計劃，看清楚要做什麼，再開始寫程式碼。
複製這段話，發給 Claude：
我想做一个待办清单网页，要求：
1. 可以添加新任务（输入框+添加按钮）
2. 可以点击任务标记为完成（会有划线效果）
3. 可以删除任务（每个任务旁边有删除按钮）
4. 界面要简洁美观，用现代化的设计
请先给我一个实现计划，包括用什么技术、分几个文件、大概的实现步骤，等我确认后再开始写代码。Claude 會回覆類似這樣：
好的，我来规划这个待办清单应用：
## 技术选择
- HTML：页面结构
- CSS：样式设计（使用 Flexbox 布局）
- JavaScript：交互逻辑
## 文件结构
1. index.html - 主页面
2. style.css - 样式文件
3. script.js - 功能代码
## 实现步骤
1. 创建 HTML 基础结构（输入框、按钮、任务列表区域）
2. 编写 CSS 样式（现代卡片设计+渐变背景）
3. 实现 JavaScript 功能（添加、完成、删除）
4. 添加本地存储，刷新页面后数据不丢失
准备好了吗？我可以开始实现。
**你只需要回覆**：「好的，開始吧」
### **2.4 看着代码自己写出来**這是最神奇的部分。
你會看到 Claude 開始自己工作：
- 建立
index.html檔案 - 寫入 HTML 程式碼
- 建立
style.css檔案 - 寫入樣式程式碼
- 建立
script.js檔案 - 寫入互動邏輯
整個過程你什麼都不用做。就像看著一個程式設計師在你的電腦上工作。
每建立一個檔案，Claude 都會告訴你它在做什麼。比如：
创建 index.html...
添加了页面基础结构，包括标题、输入区域和任务列表容器
创建 style.css...
使用了现代化的卡片设计，添加了渐变背景和阴影效果
创建 script.js...
实现了添加、完成、删除功能，并加入了本地存储大概 2-3 分鐘，所有程式碼就寫完了。
2.5 打开浏览器看效果
程式碼寫完後，Claude 會告訴你怎麼執行。通常會說：
已完成！你可以直接用浏览器打开 index.html 查看效果。
或者在终端运行：
python3 -m http.server 8000
然后在浏览器访问 http://localhost:8000Mac 使用者：直接在 Finder 裡找到 my-todo-app 資料夾，雙擊 index.html
Windows 使用者：在檔案資源管理器裡找到這個資料夾，雙擊 index.html
瀏覽器會開啟，你會看到：
- 頂部有個大標題「我的待辦清單」
- 一個輸入框，旁邊有「新增」按鈕
- 下面是任務列表區域
試試新增一個任務：「學會用 Claude Code」，點選新增。
你的第一個任務出現了！
點選任務可以標記完成（會有劃線），旁邊的刪除按鈕可以刪掉它。
恭喜，這就是你用 AI 做出的第一個作品。
第三步：加一个新功能
現在你可能會想：能不能改改？
當然可以，而且超級簡單。
3.1 提一个新需求
假設你想給每個任務加上時間戳，顯示是什麼時候新增的。
直接在 Claude Code 裡說：
我想给每个任务加上创建时间，格式是「2025-11-10 15:30」，显示在任务文字的下面，用小字灰色显示3.2 Claude 会自动修改
Claude 會：
- 告訴你需要改哪些地方
- 自動修改
script.js新增時間記錄邏輯 - 自動修改
style.css新增時間顯示的樣式
你只需要重新整理瀏覽器，新功能就生效了。
這就是 AI 協作的感覺：你提需求，它寫程式碼，你驗收效果。
不滿意？繼續對話調整。
3.3 试试其他功能
你還可以嘗試：
- 「加一個優先順序標籤，重要的任務顯示紅色」
- 「加一個全部刪除按鈕」
- 「換一個配色方案，我想要藍色系」
每次 Claude 都會理解你的意思，自動改程式碼。
第四步：新手常见问题
在過去半年教學員用 Claude Code 的過程中，我發現新手最常問這些問題：
Q1：改错了怎么办？
別慌，Claude Code 有「時光機」功能。
方法一：按 ESC 兩次
快速回退到上一個版本
方法二：輸入命令
/rewind
Claude 會列出歷史版本，你可以選擇回到哪個時間點
**方法三：直接說**
「剛才那個改動我不喜歡，還原回去」
### **Q2：我完全不懂代码，怎么知道 Claude 做的对不对？**
答案：**你不需要懂程式碼，你只需要測試功能**。
就像你不需要懂汽車發動機，也能知道車能不能開。
- 新增任務試試，能加上嗎？
- 標記完成試試，有劃線嗎？
- 刪除試試，真的刪掉了嗎？
- 重新整理頁面，資料還在嗎？
**功能對了，程式碼就是對的。**
有問題？直接告訴 Claude：「刪除按鈕點了沒反應」，它會自己檢查和修復。
### **Q3：为什么有些教程说要装 Node.js？**
這是個好問題，說明你真的在學習。
**簡單回答**：如果你用的是我推薦的安裝方式（curl 或 PowerShell 一鍵安裝），就不需要 Node.js。
**完整解釋**：Claude Code 有多種安裝方式。如果用 NPM 方式（`npm install -g @anthropic-ai/claude-code`），需要先裝 Node.js。但一鍵安裝方式（curl/PowerShell）已經把所有依賴打包好了，直接用就行。
**對新手來說**：跟著我這篇教程的步驟走，別去碰 NPM 安裝，就不會遇到 Node.js 的問題。
### **Q4：我应该从这个开始学编程吗？**
這取決於你的目標。
**如果你想快速做出東西**（做個工具、驗證個想法、自動化工作）：
- 從 Claude Code 開始是對的
- 邊做邊學，有問題就問 Claude
- 遇到不懂的概念，讓 Claude 解釋
**如果你想成為專業開發者**：
- Claude Code 是很好的輔助，但不能替代系統學習
- 建議路徑：用 AI 做出第一個專案（建立信心）→ 系統學習基礎（CS50、FreeCodeCamp）→ 再用 AI 加速開發
很多人就是透過 Claude Code 找到了程式設計的樂趣，然後主動去學了 JavaScript、Python。
因為當你做出東西的時候，學習的動力完全不一樣。
## **下一步：你可以做什么？**完成了這 15 分鐘的教程，你已經掌握了：
- ✅ 安裝和認證 Claude Code
- ✅ 先規劃再動手的方法
- ✅ 讓 AI 寫程式碼並執行
- ✅ 迭代修改功能
- ✅ 解決常見問題
接下來試試這些：
- 做個你真正需要的工具
記賬頁面？
倒計時器？
個人簡歷網站？
挑戰：給待辦清單加功能
加一個「優先順序」分類（高/中/低）
加一個搜尋功能
換成你喜歡的配色
最后说两句
那個 11 歲小女孩最後跟我說：「原來程式設計沒那麼難，就像跟一個很厲害的朋友聊天。」
她說對了。
2025 年的 AI 程式設計工具，本質上是降低了「想法」到「實現」的門檻。
以前你得先學幾個月程式碼才能做出東西，現在你可以先做出東西，再慢慢理解背後的原理。
這不是說傳統學習不重要，而是學習的路徑變了。
先用 AI 做出第一個作品，建立信心和興趣，然後再去系統學習底層知識。
這個順序，反而讓很多人堅持下來了。
所以，別擔心自己「不會程式設計」。
開啟 Claude Code，用 15 分鐘試一試，你可能會發現一個新世界。
启动
claude
创建项目
mkdir project-name
cd project-name
claude
常用命令
/help # 檢視幫助
/rewind # 回退版本
/clear # 清空對話
/exit # 退出
推荐提示词模板
做一个[项目类型]，需要：
1. [功能1]
2. [功能2]
3. [功能3]
界面要[风格要求]
请先给我一个实现计划，等我确认后再开始写代码。