Claude Code 非技术新手完整教程（2026 年版）

视频信息

引言

我做这期视频是为了打造现存最全面的、面向非技术用户的 Claude Code 教程。一步步建 6 个项目，沿途解释每个概念。

不写一行代码，就完成：网站、游戏、Chrome 插件、跨工具自动化、带 AI 视觉的移动端应用，最后还会部署上线。

第一阶段：什么是 Claude Code

1.1 定义

Claude Code 是一个 agentic coding tool（智能体编程工具），用自然语言驱动完整开发工作流：

1. 你描述想要什么
2. 它制定计划
3. 生成代码
4. 测试
5. 调试
6. 交付

如果你用过 Lovable、Base44 或者在 ChatGPT/Claude 里直接 build 过东西，体验类似。

1.2 与同类工具的关键差异

区别在于运行位置。Claude Code 直接在你电脑上工作。它能创建文件、编辑文件、本地构建。这给你更多力量、更大控制、规模化更便宜的成本。

1.3 三种使用方式

1.4 订阅与限额

⚠️ 限额机制：每 5 小时滚动重置，外加每周封顶。可在 Settings → Usage 查看。Pro 上重度使用 Opus 可能会比预期更快用完。

第二阶段：第一个项目 —— Cube Tac Toe

2.1 准备工作

• 进入 Code 标签
• 新建文件夹（演示中是 Claude Code Projects/cube-tactoe），这是 Claude 工作、创建文件的地方

2.2 第一个 Prompt + Plan Mode

创建一个可玩的浏览器游戏，把 3x3 的魔方和井字棋结合起来。每回合活跃玩家先在魔方空贴纸上放标记。放标记后，必须做出恰好一次标准的魔方旋转。胜负在旋转完成后判定，而非放置标记后。

⭐ 关键习惯：发送前切到 Plan Mode。Claude 不会直接动手，而是先制定计划、问澄清问题，你审核后再开工。

任何初始 Prompt，我都会先进 Plan Mode。

2.3 计划生成与确认

Claude 提出几个澄清问题：

• 允许哪些类型的旋转 → 自定义答案
• 平局条件 → 用推荐
• X/O 的标识方式 → 用推荐

几分钟后输出完整方案：技术栈、文件布局、几何、移动类型、动画……可在 Prompt 框里改，或直接在 plan 上加注。满意后点 Accept and allow edits。

2.4 构建中观察 Claude

• 自己更新 todo
• 创建文件、运行命令
• 自己开了预览、放标记、测试动作、验证正确性、清理调试代码

它不仅做了计划、自己用工具搭建了游戏、自己测了游戏。这要是放在不久之前，简直无法想象。

2.5 迭代原则：一次只改一件事

如果你一次性塞一堆请求，更可能漏改某些；而且改动之间会相互影响。一次一个改动，坏了就知道是谁干的。

实战迭代清单：

• 鼠标悬停按钮时高亮对应层 + 箭头指向
• 加 AI 对手
• 调整玩法逻辑：你做标记，对手做旋转（且必须包含标记位）
• 游戏结束后还能转
• 胜负出红线
• 把背面隐藏箭头与红线自然遮挡
• 加三档难度
• Medium 还是太难，再调容易点

每次都一句话 Prompt。

第三阶段：上下文管理 & Memory

3.1 上下文窗口的极限

随着对话变长，Claude 会做 compact（压缩）——保留最重要的，但难免丢细节、丢语气，质量会漂移。

3.2 更好的做法：开新会话

新会话只能看到项目文件夹，对话历史没了。两步让交接顺畅：

第一步：生成 claude.md

输入 /init（斜杠命令面板里）。它会扫描项目文件夹、自动生成一份长期参考文档，包括规则、技术栈、架构、API 引用、个人偏好。

第二步：手动总结当前进度

发给 Claude：

总结这个项目的所有重要信息：架构、我们做的决定、当前状态、还剩什么任务，以便我粘到新会话里。

新会话指向同一文件夹、粘贴这段总结。Claude 自动读取 claude.md，加上你贴的进度，无缝继续。

第四阶段：选模型 & 控成本

通用法则：用 Opus 做计划与首建，用 Sonnet 迭代。Max 用户可以全程 Opus。

还有 Low/Medium/High/Max 设置，控制单任务分配的 token 量。

第五阶段：并行多项目实战

5.1 三个并行项目

• LinkedIn Bio 页（AI 神经网络风格）
• Chrome 插件
• 产品落地页

⚠️ 作者建议：先掌握基础再并行。但并行确实能省时间。

5.2 Chrome 插件实战

需求：YouTube 抓字幕时，自动关闭时间戳、复制为纯文本（不带换行）。

流程：

1. Claude 生成扩展文件夹
2. Chrome → Extensions → Developer mode → Load unpacked → 选文件夹
3. 测试发现按钮在错误位置
4. 截图错误，直接拖给 Claude：让它移到字幕原按钮旁

任何”用说不清楚、用看一眼就懂”的错误，截图扔给 Claude 就行。Claude 能读图。

5.3 LinkedIn Bio 页

• 默认计划里 URL 有几个错的 → Revise plan 把对的填进去
• 加头像：把图片放进项目文件夹 → 让 Claude 引用
• 预览 panel 偶尔报错 → 用 Open file 手动选 HTML
• Claude 还自动做了独立的移动端布局，没让它做

5.4 用本地资源的小技巧

把图片、Logo 或任何资源直接拖进项目文件夹，而不是聊天框。

第六阶段：MCP 与 Connectors

6.1 MCP 是什么

你可以把 MCP 想象成”软件的 USB-C”。一个通用连接协议，让不同工具互相插。

Claude 内置了大量 connector（连接器），入口在 Customize → Connectors。

6.2 必装的 Context Seven

Context Seven 拉取 50+ 框架的最新文档：React、Expo、Tailwind、Vercel 等。这些工具一直在变，Claude 训练时间可能旧，网上信息也未必新。Context Seven 保证它永远基于现行文档工作。

6.3 实战：Granola + Asana 自动 Kanban

需求：

• 从 Granola 拉取最近会议记录
• 提取所有 action items
• 从 Asana 拉队友清单
• 拖拽队友到任务上分配
• 一键推回 Asana

实测：四个任务全部正确分配到 Asana。

我故意不选 Gmail 或 Google Calendar 这种常规演示，想展示一个不那么明显的用例，给你更多灵感。

第七阶段：连 API + 移动 AI 应用 Morsel

7.1 为什么自己做个人应用

要么现有 App 接近但不到位，要么不想再付一个订阅，要么不想交那么多隐私数据，要么这种 App 根本不存在。

注意：这是 mobile responsive web app（移动响应式网页），不是真正的原生 App。

7.2 项目目标：克隆 Cal AI

• 拍照识别食物
• 估算卡路里与宏量营养素
• 记录、追踪
• 用 Claude 模型分析图像
• 基于历史给个性化建议

7.3 API Key 安全实践

⚠️ 绝不能把 API Key 粘到 Claude 聊天里。聊天会上网络，按设置可能进训练。

正确做法：放在 .env.local：

• env = environment variables（环境变量）
• local = 仅本机存在
• 它在 .gitignore 里，绝不会随 GitHub 推送泄露

让 Claude 创建该文件，再用面板打开手动填 Key。

7.4 获取 Anthropic API Key

Anthropic Console → 充值 → API Keys → Create new key → 命名 → 复制（只显示一次）。

关键：你的 Claude API Key 和 Claude 订阅是分开账单的。个人使用几美元够用很久。同样的流程也适用 ChatGPT 或 Gemini API。

7.5 调试常见错误

• API not detected → 截图给 Claude
• 图太大 → Claude 加自动缩放
• 反复迭代直到识别准确、能记录、能给建议

最终成品命名为 Morsel。

第八阶段：上线部署（GitHub + Vercel）

8.1 GitHub 是什么

GitHub 是云上代码托管平台。项目放进去后可在任何设备访问、分享、部署。还能做版本控制——任何时间点的快照都能回滚。

8.2 全流程一次性配置

这一段只用做一次，以后新项目只是一条 Prompt。

1. 让 Claude 检查并安装 Git：“check if I have Git installed, if not, install it for me”
2. 让 Claude 引导连接 GitHub
3. 安装 Homebrew（需在终端粘命令、输电脑密码——⚠️ 密码不会显示任何字符，正常输完回车即可）
4. 让 Claude 自己运行命令装 GitHub CLI
5. 手动跑一条认证命令：选 github.com、HTTPS、Web 浏览器登录、复制 code 粘进去、邮箱验证码

完成后：“I can push code, create and clone repos, and open PRs on your behalf”。

之后任何新项目：

给这个项目创建一个新的 GitHub repo，并把当前代码推上去。

一句话完事。

8.3 部署到 Vercel

1. 用 GitHub 账号创建 Vercel 账户
2. Import Git Repository → Continue with GitHub → Install
3. 选 All repositories
4. 在列表里选项目 → Import → Deploy
5. 立刻拿到线上域名

之后每次通过 Claude Code 推送代码到 GitHub，Vercel 会自动检测并重新部署最新版本。

8.4 Morsel 部署需要的额外步骤

• 在 Vercel 手动添加环境变量（API Key，因为 .env.local 不在 repo 里）
• Storage 标签里设置 Neon（数据库）和 Blob（文件存储）

第九阶段：Skills、Plugins、Security Review

9.1 Skills

Skills 是可复用的工作流，像可重复任务的”食谱卡”。有默认内置的、社区的、自己造的。

任何你反复做的多步流程：跟 Claude 走一遍，让它打包成 Skill，下次自动触发。

9.2 Plugins

类似 Skill 但覆盖整个角色或工作流，不是单个任务。同样可在 GitHub 社区找。

9.3 Security Review

上线前必跑：

跑一次安全检查。

Claude 调用内置 Security Review skill，扫描整个代码库找漏洞，输出严重程度分类。

⚠️ 如果项目涉及 API Key、用户数据、支付，必须深入做安全。Morsel 因为带 API Key 所以 repo 保持 private。

9.4 上线前再问一句

在我把这个开放给其他人访问之前，还有什么我应该知道的？

会发现非安全类问题：

• 旧浏览器加载不了
• 触屏功能没实测
• 不能中途重开局

第十阶段：手机使用 PWA 体验

Morsel 是 PWA 风格：

1. 手机浏览器打开网站
2. Share → Add to Home Screen
3. 桌面图标，像 App 一样用
4. 电脑端记录的日志在手机里也能看
5. 手机摄像头直接拍餐 → 识别记录

在不到一小时内做出这样的东西，相当惊艳。

真正的原生 App 步骤完全不同、复杂得多，对大多数人个人使用而言有点”杀鸡用牛刀”。

核心要点速查表

8 个实用启示

1. 初始 Prompt 总走 Plan Mode：让 Claude 先想清楚再动手。
2. 一次一个改动：复杂迭代时最重要的纪律。
3. 截图调试：错误难描述？截图扔进去最快。
4. 资源拖进文件夹而非聊天：图片、Logo、参考文档放在项目目录里。
5. /init 生成 claude.md + 手动总结当前进度：是新会话无缝接力的两件套。
6. .env.local + 不要把 API Key 贴进聊天：默认习惯，永不出错。
7. Context Seven 装上不要拔：自动让 Claude 跟上框架现行版本。
8. GitHub + Vercel 一次配，终身用：以后只需一条 Prompt 推代码上线。

10 个常见误区

1. 认为 Claude Code 必须懂代码：完全可以不写一行代码。
2. 跳过 Plan Mode：直接构建会反复返工。
3. 一次塞五个改动：出问题无法定位。
4. 把 API Key 粘到聊天里：可能进训练或泄露。
5. 以为新会话能继承旧上下文：只能靠 claude.md + 手动总结。
6. 全程用 Opus 不看用量：Pro 会被烧光。
7. 忽视 Security Review：带 API Key、用户数据、支付时尤其要重视。
8. 以为 Vercel 部署后就直接能用：还要补环境变量、存储等步骤。
9. 认为 Claude Code 只是写”游戏 Demo”：MCP + API 能做真业务自动化。
10. 以为必须做原生 App：响应式网页 + Add to Home Screen 对个人足够。

12 个关键要点

1. Claude Code 在本机运行，控制力与成本优势显著。
2. Plan Mode + 单步迭代是最稳的工作流。
3. claude.md 是项目的”长期记忆体”。
4. Compact 会让 Claude 漂移，开新会话更可靠。
5. Opus 用于规划与首建，Sonnet 用于迭代。
6. MCP / Connector 解锁外部应用，Context Seven 必装。
7. 用 .env.local 处理所有密钥，杜绝泄露。
8. Anthropic API Key 与 Claude 订阅独立计费。
9. GitHub + Vercel = 个人项目级别的最强组合。
10. Vercel 检测 GitHub 推送，自动重新部署。
11. Skills/Plugins 把多步流程打包，自动触发。
12. 上线前两连问：“Run security review” + “anything else I should be aware of”。

额外资源

结论

第一个项目最难，我们一口气做了 6 个。希望这期视频能让你真正开始动手。

不要再”看完再开始”。打开 Claude Code，挑一个你天天用却嫌弃的小工具——可能就是 5 美元/月那种小订阅，可能是浏览器里一个反复点的按钮，可能是一个想给家人做的工具——按照视频的节奏走：Plan Mode → 一个 Prompt → 一次一个迭代 → /init → 推 GitHub → Vercel 一键部署。一小时之内你会拥有一个真正属于你的工具，那种掌控感会让你回不去。