第二部分 · 环境准备

初学者最大的拦路虎，往往不是代码，而是环境跑不起来。这一部分我们只有一个目标：让你的电脑能顺利运行 Claude Code / Codex，并且能创建项目、启动页面、看到结果。

重要原则：这一部分不解释太多原理。你只要照着做，每一步做完都有一个「验收命令」告诉你成没成。做完看到预期结果，就继续下一步；没看到，就把报错原封不动发给 AI。

工具已经替你选好：Claude Code / Codex

这门课全程只用两款工具——Claude Code 和 Codex，目前公认最强的两款 AI 编程助手，用法几乎一样，二选一即可。

市面上还有 Cursor、Cline、Roo Code 等一堆选择，但对初学者来说，在工具之间比来比去纯属浪费精力。这道选择题我们已经替你选好了：选定了就别回头看，把省下来的精力全部投到「做产品」上。

关于这一部分怎么用

Mac 用户：看第 6 章。
Windows 用户：看第 7 章（我们强烈推荐用 WSL，原因里面讲）。
系统依赖装好后，所有人都看第 8 章：认识 Claude Code、装上它、国内网络的话把服务源配好。
然后一起看第 9、10 章，完成「第一次运行」和「第一次让 AI 建项目」。

💡 一个贯穿全课的判断题从这里就开始了：每一步做完，你都要问自己「我看到预期的结果了吗？」看到了打勾，没看到就反馈给 AI。这个习惯，请从环境准备就养成。

6. Mac 环境准备

这一章要解决什么问题

把 Mac 从「一台普通电脑」变成「能做 AI 开发的电脑」。我们要装三样系统级依赖：Homebrew（软件管家）、Node.js（前端要用）、Python（后端要用）。Claude Code 本身怎么装，放到下一节统一讲。

第 1 步：打开终端

按 Command + 空格，输入 Terminal（终端），回车。会弹出一个黑色（或白色）的窗口，这就是你之后主要的「工作台」。别怕它——你只需要往里面粘命令。

第 2 步：安装 Homebrew（软件管家）

Homebrew 是 Mac 上的「应用商店命令版」，用它装其他软件最省心。把下面这行粘进终端，回车，按提示输入开机密码（输入时看不到字是正常的）：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

验收命令：

brew --version

看到类似 Homebrew 4.x.x 就成功了。

第 3 步：安装 Node.js 和 Python

brew install node python

验收命令：

node --version    # 期望看到 v20 或更高
python3 --version # 期望看到 Python 3.11 或更高

如果结果不对，怎么反馈给 AI

任何一步报错，不要自己瞎猜。把终端里红色的报错整段复制，打开 Claude Code（或先用网页版 AI），按这个模板问：

任务目标：我在 Mac 上安装开发环境。
当前状态：我执行了 `brew install node python`。
出现的问题：终端报了下面这段错误（原文粘贴）：
<把报错粘在这里>
期望结果：我希望这个命令能正常装好 node 和 python。
请告诉我原因，并给我可以直接复制执行的解决命令。

本章小结

Mac 系统依赖三件套：Homebrew → Node → Python。每步都有验收命令，绿了就往下走——下一节我们再装 Claude Code 本身。

7. Windows 环境准备

这一章要解决什么问题

让 Windows 也能顺畅做开发。这里有一个非常重要的选择题，而且我替你选好了答案：用 WSL。

为什么强烈推荐 WSL

WSL 是「Windows 里的 Linux」，微软官方出品。为什么用它？因为绝大多数开发教程、AI 工具、报错解决方案，都是围绕 Linux/Mac 的。用 WSL，你遇到的问题网上都有现成答案；不用 WSL，你会遇到一堆只有 Windows 才有的怪问题。

⚠️ 一个必须守住的纪律：装好 WSL 后，所有开发都在 WSL 里做。不要一会儿用 Windows 的 Python、一会儿用 WSL 的 Python，一会儿用 Windows 的 Node、一会儿用 WSL 的 Node——混用是初学者最常见、最难查的坑。认准一个：全部在 WSL 里。

第 1 步：安装 WSL

按 Win 键，搜索 PowerShell，右键「以管理员身份运行」。粘入：

wsl --install

装完重启电脑。重启后会让你给 Linux 设一个用户名和密码，记住它。

验收：开始菜单里能搜到并打开「Ubuntu」，看到一个终端窗口，就成功了。从现在起，所有命令都在这个 Ubuntu 窗口里敲。

第 2 步：在 WSL(Ubuntu) 里装 Node 和 Python

在 Ubuntu 窗口里依次粘入：

sudo apt update
sudo apt install -y nodejs npm python3 python3-pip python3-venv

验收命令：

node --version
python3 --version

（如果 Node 版本太低，可以让 Claude Code 之后帮你升级到更新版本，这里先不纠结。）

如果结果不对，怎么反馈给 AI

和 Mac 一样：把报错整段复制，用上一章那个模板问 AI，并注明你在 WSL(Ubuntu) 环境。

本章小结

Windows 的正确姿势：装 WSL → 之后所有事都在 WSL(Ubuntu) 里做 → 装 Node/Python。守住「不混用环境」这条纪律，你能省下无数麻烦——下一节我们再装 Claude Code 本身。

8. Claude Code 引入与安装

这一章要解决什么问题

前两节我们把电脑的系统依赖装好了。这一节才是真正的主角：认识 Claude Code，把它装上，能正常连上服务。对大部分初学者来说，这是环境准备里最容易卡住的一步，所以我们把它单独拎出来、多花点篇幅讲清楚。

8.1 Claude Code 是什么

Claude Code 是一个跑在终端里的 AI 编程助手。你不是打开一个网页跟它聊天，而是在项目文件夹里敲一个命令启动它，然后用大白话跟它说你想要什么——它会读你的项目、帮你写代码、改文件、跑命令，做完把结果给你看。

这门课全程只靠它干活：你负责说清楚要什么、看结果对不对，代码它写。这也是为什么它必须在正课开始前就装好、连通——它是你之后每一步的「主力工具」。

8.2 安装 Claude Code

不管你是 Mac 还是 WSL(Ubuntu)，装法都一样。在终端里执行：

npm install -g @anthropic-ai/claude-code

验收命令：

claude --version

能打印出版本号（例如 1.x.x (Claude Code)），就说明装好了。

常见卡点排查：

报错里出现 EACCES / permission denied：多半是 npm 全局安装目录权限问题。不要用 sudo npm install 硬来（容易埋下更多权限坑），把报错整段发给 AI，或搜索「npm 全局安装权限 EACCES」按提示修复 npm 的默认目录配置。
装完提示 claude: command not found：说明这个命令没被加到你终端能找到的路径（PATH）里。先重新打开一个新的终端窗口再试一次；还不行，把 npm config get prefix 的输出和报错一起发给 AI，让它帮你把对应目录加进 PATH。
Windows 用户在「Windows 自带的终端」里装，找不到 claude 命令：确认你是在 WSL(Ubuntu) 窗口里执行的安装命令，而不是 PowerShell——这是第 7 章强调过的「不要混用环境」的具体体现。

8.3 国内网络环境：配置服务源

如果你在国内，直连官方服务可能不稳定，甚至完全连不上。这里我们用 cc-switch 这个小工具来解决——它的作用是帮你把 Claude Code 连接的服务源，切换到一个国内能稳定访问的地址。你不需要理解它背后的原理，把它当成一个「换线路的开关」就行。

如果你在海外或者网络本身很稳，可以跳过这一节，直接去第 9 章。

第 1 步：下载安装 cc-switch

前往 cc-switch 的官方发布页，下载对应你系统（Mac / Windows）的安装包，双击安装。

[截图：cc-switch 官网下载页 / 安装包]

第 2 步：打开 cc-switch，添加一个服务源

安装完成后打开 cc-switch，你会看到一个用来管理「服务源」的界面。点击添加/新增，填入你选定的服务商信息（一般包括一个 API 地址和一个 API Key）。

[截图：cc-switch 添加服务源界面]

💡 这也是一道选择题：国内可用的服务源方案有很多种。但对初学者，方案越少越好。选一个能跑通的，跑通就别再折腾。把精力留给做产品，而不是研究服务生态。

第 3 步：切换并生效

在服务源列表里选中刚添加的这个，点击「启用/切换」，让 Claude Code 使用它。

[截图：cc-switch 切换/启用服务源]

验收：确认 Claude Code 真的连通了

在终端任意目录下执行：

claude

启动后随便打一句话，比如「你好」。能看到 AI 用中文正常回复，就说明服务源配置生效、Claude Code 已经连通了。

如果结果不对，怎么反馈给 AI：如果启动后卡住、报连接错误，把终端里的报错整段复制，回到 cc-switch 里确认服务源的地址/Key 有没有填错；也可以把报错发给能正常联网的 AI（比如网页版），按第 6 章那个反馈模板问它。

本章小结

这一节你做完了三件事：认识了 Claude Code → 装上了它 → （国内网络的话）用 cc-switch 配好了能连通的服务源。下一章我们就用它跟 AI 打第一次招呼。

9. 第一次运行 Claude Code / Codex

这一章要解决什么问题

装好了，得先跟它「打个招呼」，确认它真的能听懂你、帮你干活。

这是什么

Claude Code / Codex 运行在终端里。你在项目文件夹里启动它，然后就像发微信一样，用中文跟它说话。

让它执行的第一个小任务

先建一个练手文件夹并进去，然后启动 Claude Code：

mkdir ai-todo
cd ai-todo
claude

启动后，直接输入一句大白话跟它对话，比如：

你好，请介绍一下你能帮我做什么，并在当前目录创建一个 hello.txt 文件，里面写一句“环境已就绪”。

运行后应该看到什么结果

AI 用中文回复你，介绍了它的能力。
它会请求你允许它创建文件（同意即可）。
当前文件夹里真的多了一个 hello.txt。

验收命令（新开一个终端，或让 AI 帮你确认）：

cat hello.txt   # 应该打印出：环境已就绪

如果结果不对，怎么反馈给 AI

如果它没回复 / 报错连接问题 → 多半是网络，回第 8 章配服务源。
如果它回复了但没建文件 → 直接对它说：「你没有创建 hello.txt，请现在创建它。」
记住：你随时可以用大白话让它重做。这就是判断题——你看结果，不对就打回。

本章小结

你已经和 AI 完成了第一次协作：下达指令 → 它执行 → 你验收文件。这个循环，就是接下来整门课的全部节奏。

10. 第一次让 AI 创建项目

这一章要解决什么问题

上一章我们建了个文件。这一章更进一步：让 AI 帮我们把 AI Todo 项目的骨架搭起来，为下一部分做出真正的页面做准备。

这是什么

「创建项目」= 让 AI 帮你准备好一个规范的文件夹结构，把该有的配置文件、目录都建好。你不用懂里面每个文件是干嘛的，你要验收的是：项目能不能跑起来。

让它执行的小任务

在 ai-todo 文件夹里启动 claude（或 Codex），把下面这个任务提示词发给它。注意它的格式——这就是我们全程要用的模板：

任务目标：
帮我初始化一个最简单的网页项目，作为 AI Todo 助手的起点。

当前状态：
这是一个空文件夹 ai-todo，我完全没有代码基础。

限制条件：
这次只要搭一个最简单的结构，先不要引入 Vue、后端或数据库；
用最容易在浏览器直接打开看效果的方式即可。

期望结果：
项目里有一个可以在浏览器打开的首页，打开后能看到“AI Todo”几个字。

验收标准：
1. 你告诉我用什么命令或方式打开这个页面。
2. 我打开后能在浏览器里看到“AI Todo”标题。
3. 过程中没有报错。

运行后应该看到什么结果

AI 创建了几个文件（大概率有一个 index.html）。
它会告诉你怎么打开，比如让你运行一个本地服务命令，或直接双击某个文件。
你照做后，浏览器里出现「AI Todo」。

如何验收结果是否正确

对照你写的验收标准，逐条打勾：

AI 告诉我怎么打开了吗？
浏览器里看到「AI Todo」了吗？
有没有报错？

三个都打勾，这一部分就通关了。

如果结果不对，怎么反馈给 AI

页面打不开、显示空白、或者不是「AI Todo」，就照实说，例如：

我按你说的打开了页面，但浏览器里是一片空白，没有看到“AI Todo”。
请检查是哪里的问题并修好，然后再告诉我一次正确的打开方式。

本章小结

你已经让 AI 搭出了项目骨架，并在浏览器里看到了第一个结果。环境部分到此全部完成——工具能跑、项目能建、页面能看、报错能反馈，四件事齐活。

这一部分的收尾

回顾一下你已经具备的能力：

✅ 能运行 Claude Code / Codex
✅ 能创建项目
✅ 能在浏览器看到页面
✅ 能把报错反馈给 AI 修复

最关键的是，你已经跑通了那个核心循环：下任务 → AI 执行 → 看结果 → 验收 / 反馈。

下一部分第三部分：先看到结果，我们正式动手，把这个「AI Todo」页面做得像模像样。

最后更新于 2026-07-31

3 · 代码是黑盒第三部分 · 先看到结果