Claude Code 入门教程

来源 https://benx.ai/blog/posts/claude-code-vscode-tutorial-2026-03

本文持续更新，最新版本请查看：飞书原文

系列直播课：Claude code/CodeX 系列直播课

Claude Code 可以理解为一个在电脑里帮你干活的 AI 助手。

你只需要用简单的语言告诉它要做什么，比如「帮我整理这些文件」「改一下这个程序」「分析一下这些数据」，它就能理解你的电脑项目，并自动完成很多操作。

它和普通聊天 AI 的区别是：不只是聊天，而是能直接帮你动手做事，比如整理文件、编程、数据分析…等等。

Claude Code 就像一个会自己操作电脑的 AI 助手，帮你更快完成各种工作。

第一步：准备工作#

1.1 安装 Claude Code#

使用终端、命令行还是挡住了非常多的朋友，这个时候，有个界面很重要！

Claude Code、Codex 官方也都推出了插件，安装即可使用。

第一步：安装必备软件#

Mac：https://git-scm.com/install/mac（在终端执行 xcode-select --install 或 brew install git）

第二步：配置账号#

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

中转方案：

hongmacc https://hongmacc.com/signup?ref=HONGMACC-4A20839E 4api https://4api.top/register?aff=pkS8 AIcodewith https://aicodewith.com/zh/login?tab=register&invitation=Q71I6P Lion CC https://codecodex.ai

名称	链接

国产大模型：

DeepSeek https://api-docs.deepseek.com/zh-cn/guides/anthropic_api 智谱 GLM https://www.bigmodel.cn/claude-code?ic=U5NGPIMKRG Kimi K2 https://zhuanlan.zhihu.com/p/1965040472201335898 MiniMax https://platform.minimaxi.com/docs/guides/text-ai-coding-tools

名称	链接

第三步：配置账号到 Claude Code#

方案一：cc Switch（推荐，图形化操作）

下载 cc Switch：https://github.com/farion1231/cc-switch/releases

打开 cc Switch，点击新建配置：

填写 API 配置信息：

配置完成后，点击「应用到 Claude Code 插件」：

方案二：手动配置

在 ~/.claude/settings.json 中添加：

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "你的API密钥",
    "ANTHROPIC_BASE_URL": "你的中转地址"
  },
  "includeCoAuthoredBy": false
}

配置完成后，重启 VS Code，如果出现以下界面说明配置成功：

Claude Code 核心功能概览#

安装好之后，来认识一下 Claude Code 的核心功能：

输入需求，按回车

@ 引用文件和文件夹

添加文件、文件夹，或者链接

斜杠命令（切换模型、管理 agents、管理 MCP）

切换工作模式（Plan mode / Ask before edit / Edit automatically / Bypass permissions）

历史对话记录

使用 Skills

Skills 资源：

官方 Skills：https://github.com/anthropics/skills
第三方 Skills 市场：https://skillsmp.com/

开启全自动模式

体验 Claude Code#

让 Claude Code 帮你整理文件——打开你的「下载」文件夹，输入「帮我整理一下文件」。

第二步：做你的第一个作品#

2.1 我们要做什么？#

第一个项目做「待办清单」——15 分钟能完成，够实用，够完整。

功能包括：

添加新的待办事项
点击完成（出现删除线）
删除不需要的待办
关闭浏览器再打开，数据还在

2.2 看着代码自己写出来#

在 Claude Code 里输入：

帮我创建一个待办清单网页应用。功能：可以添加待办事项、点击完成会有删除线效果、可以删除待办、数据用 localStorage 持久化存储。用 HTML + CSS + JavaScript 实现，风格简洁现代。

Claude 会自动创建 index.html、style.css、script.js，大概 2-3 分钟完成。

2.3 打开浏览器看效果#

双击 index.html 即可在浏览器中查看效果。

或者在终端运行：python3 -m http.server 8000，然后打开 http://localhost:8000。

第三步：加一个新功能#

做好了基础版，直接在 Claude Code 里说需求就行：

「帮我加一个时间戳，显示每个待办的创建时间」
「加一个优先级标签，可以标记高/中/低」
「加一个全部删除按钮」
「加一个搜索功能」

核心方法论：先跑起来，再迭代。不要追求一次完美，先让东西跑起来，再一步步加功能。

第四步：新手常见问题#

Q1：改错了怎么办？

三种方式恢复：

按 ESC 两次，取消当前操作
输入 /rewind，回退到上一步
直接告诉 Claude：「刚才改错了，帮我还原」

Q2：不懂代码怎么知道做的对不对？

你不需要懂代码，只需要测试功能。功能正确，代码就正确。点击按钮看有没有反应，输入数据看有没有保存，这就是验证。

Q3：提示 request body too large

这是因为发送了太大的文件（比如图片）。解决方法：新开一个对话，不要直接发送大图。

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

取决于你的目标：

如果你只是想做出东西（网站、工具、小游戏），Claude Code 完全够用
如果你想成为专业程序员，建议系统学习编程基础

Q5：cc Switch 配置后还报错？

注意区分 ANTHROPIC_API_KEY 和 ANTHROPIC_AUTH_TOKEN：

中转 API 一般用 ANTHROPIC_AUTH_TOKEN
如果配了 KEY 还报错，换成 TOKEN 试试

正确配置：

Q6：一键安装报错？

如果你按照我下面推荐的安装方式（Mac 的 curl 命令或 Windows 的 PowerShell 命令），不需要提前安装 Node.js。

之前很多教程让你先装 Node.js，很多人就卡在这一步了。现在 Claude Code 提供了更简单的一键安装方式，跳过了这个坑。（2025年12月1日更新：这里 Claude code 增加了地区检测，需要挂梯子才能执行，在命令行里配置代理）

Mac 用户：

打开「终端」（Terminal）- 在启动台里搜索就能找到。终端是一个使用命令让电脑干活的方式，只需要会复制粘贴，按回车，就可以用。
复制这行命令，粘贴进去，回车：

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

Windows 用户：

点击开始菜单，搜索「PowerShell」，右键选择「以管理员身份运行」
推荐复制这行命令，粘贴进去，回车：

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

或者复制这行命令，粘贴进去，回车：

winget install Anthropic.ClaudeCode

安装过程会自动下载，等个 1-2 分钟就好。

安装完成的标志：会提示「Claude Code installed successfully」。

如果你用命令行方式安装遇到报错，可能需要配置代理：

export https_proxy=http://127.0.0.1:你的代理端口

Q7：VS Code 怎么换中文？

安装中文语言包插件：

Claude Code 实战：10 个让效率翻倍的技巧

来源 https://benx.ai/blog/posts/claude-code-10-tips

用了半年 Claude Code,我把官方最佳实践和踩过的坑整理成这份指南。10 个技巧,每个都能立即上手。

一、很多人只用到 Claude Code 30% 的能力#

我最近发现,很多人用 Claude Code,就像用聊天机器人。

问一句,答一句。改代码,再问,再答。完全没发挥出它的真正能力。

我用 Claude Code 小半年了,做了不少项目:

优化工具网站,通过了 AdSense 验证
把常用脚本变成 Agent Skills,效率直接翻倍
DeepSeek OCR 网站,追到热点
使用自动化 Claude Code 写公众号、做网站

这些项目让我意识到,Claude Code 根本不是个聊天工具。它是一整套编程工作流。

今天分享 10 个实用技巧,都是我日常使用、学习、踩坑总结出来的。不讲虚的理论,只讲能上手就能用的。

二、配置优化:让 Claude 记住你的习惯#

技巧 1:CLAUDE.md - 让 Claude 记住你的项目#

问题:每次打开 Claude Code,都要重复说明项目结构、常用命令、代码风格。

解决方案:在项目根目录创建 CLAUDE.md 文件,Claude 启动时会自动加载。

创建方式:进入一个项目文件夹后,执行 /init 命令,它就会扫描整个项目文件夹,生成一个 CLAUDE.md 文件。

我的配置示例(从 ben-pathfinder 项目提取):

# 项目概览
个人作品集网站 - ben-pathfinder

## 技术栈
- React 18 + TypeScript + Vite
- shadcn/ui 组件库
- Tailwind CSS
- Supabase 后端
- Astro 博客子系统(在 /blog 目录)

## 常用命令
npm run dev          # 主站开发
npm run dev:all      # 同时启动主站+博客
cd blog && pnpm dev  # 只启动博客
npm run build        # 生产构建

## 博客发布注意事项(重要!)
- pubDatetime 必须是过去时间,不能是未来(血泪教训)
- 图片必须放在 blog/src/assets/images/
- 引用格式:../../assets/images/xxx.png

效果:我有 29 个网站项目,每个项目打开 Claude Code,它自动知道这是什么项目,用什么技术栈。不用每次重复说明,添加功能,修改内容的时候,AI 不容易出错,基本一把梭哈。

技巧 2:权限自动批准 - 告别重复点击#

问题:每次 Claude 读文件、写代码、运行命令,都要点「允许」。

解决方案:启动时加参数:claude --dangerously-skip-permissions

更方便的方式 - 设置 alias:

alias cc="claude --dangerously-skip-permissions"

以后直接输入 cc 启动。

使用建议:

✅ 个人项目放心用
✅ 熟悉的工作流放心用
❌ 不熟悉的代码谨慎用

技巧 3:自定义 Slash 命令 - 一键触发工作流#

问题:每次部署,都要重复说一遍流程。

步骤:

创建 .claude/commands/ 文件夹
创建 部署.md,写入流程:

---
name: 部署到生产环境
description: 自动化 GitHub 和 Vercel 部署流程
---

## 部署步骤
- [ ] Step 1: 运行 `pnpm run build` 检查构建
- [ ] Step 2: 创建 GitHub 私有仓库(可选,已有仓库则跳过创建)
- [ ] Step 3: Push 代码到 GitHub
- [ ] Step 4: 部署到 Vercel
- [ ] Step 5: 验证部署结果

**重要**:只有 build 成功后才能继续

使用:输入 /部署,自动执行

效果:用这个命令部署了十几个网站,基本不会有问题。

技巧 4:Agent Skills - 给 Claude 配技能包#

这是我最近发现的杀手级功能。

10 月 16 日,Claude 发布 Agent Skills。我花了两天,把两个常用脚本改造成 Skills。

什么是 Agent Skills:给 Claude 配置「专业技能包」。配置一次,长期使用。

核心设计:渐进式披露,分三层加载

Level 1: 元数据(100 token) - Claude 靠这个判断什么时候用
Level 2: 主指令(<5000 token) - 匹配时才读取
Level 3: 详细资源(无限制) - 按需加载

我的真实经历:

Google SEO Skill

Google SEO Guide 内容很多,很复杂、细碎,看了也记不住。所以把 Google 官方文档批量下载下来,制作成 skill,在做新网站,优化网站的时候,让 Claude Code 调用这个 skill 去 review 网站的细节。

如何获取:

官方 12 个 Skills: https://github.com/anthropics/skills
我的开源 Skills: https://github.com/littleben/awesomeAgentskills
精选集: https://agentskills.best

三、效率提升:让每一秒都值得#

技巧 5:/clear vs /compact - 上下文管理#

Claude Code 有 200K tokens 上下文,但用着用着就满了。

两个命令,不同场景:

/clear - 清空对话#

清空所有历史,保留 CLAUDE.md
场景:开始新任务、切换功能模块
最佳实践:结束一个任务之后,不要继续在原对话里提需求,新任务用 /clear。就有点像睡醒以后干活,脑子又快又好使。

/compact - 压缩对话#

压缩历史,保留关键信息
场景:上下文快满,但需要保留讨论

一般在解决比较复杂的问题时,CC 搞半天搞不定,可以考虑新开一局,让「新 AI 脑子」来干活。

技巧 6:Plan Mode - 复杂任务先规划#

问题:直接让 Claude 做复杂任务,做到一半发现方向错了。

怎么触发:

明确说「先给我一个计划」
或者按 Shift+Tab 切换到 Plan 模式,这个模式不会直接写代码,是先做调研和计划,你看完计划后,通过了才开始干活。

我在做新网站,或者增加新功能时,一般都会先开 Plan 模式。

技巧 7:Think Mode - 激活深度思考#

问题:有些问题 Claude 第一反应是错的。

四个层级:

think - 基础思考
think hard - 更深入
think harder - 很深入
ultrathink - 最深入

之前是在提示词的开头或结尾添加 think 关键词,就能触发。现在改成了按 Tab 键切换 think on/off,要增加 Think 的级别,还是可以用关键词。

什么时候用:

遇到难题,第一个方案不 work
需要多方案对比
架构设计决策

别滥用:简单任务用 ultrathink 浪费时间,浪费 token。

技巧 8:快捷键与交互技巧#

这些小技巧每天能节省几分钟。

核心快捷键:

Shift + 拖拽:引用文件
Escape:停止执行(不是 Ctrl + C)
双击 Escape:查看历史消息
弹出单选、多选之类的表单时,最后 submit 是需要用方向键按右切换,然后按回车提交。

常见误区(我都踩过):

❌ 代码跑飞了,按 Ctrl + C → Claude 直接退出
✅ 要按 Escape
❌ 想看 10 分钟前的对话 → 往上翻半天
✅ 双击 Escape,直接跳转
❌ 表单不知道如何按 submit,不小心按了 esc 导致再来一遍

四、实战应用:避免踩坑#

技巧 9:Git 工作流 - 让 Claude 管理代码#

Claude 可以自动完成整个 Git 流程。

能做什么:

创建 GitHub 仓库(公开/私有),安装好 GitHub CLI
写规范的 commit message
Push 代码
创建 Pull Request

我的工作流:

告诉 Claude:「帮我把这个项目提交到 GitHub,创建私有仓库」

Claude 会:

看 git status 和 git diff
参考项目的 commit 历史
生成规范的 commit message
执行 add、commit、push

真实数据:

我现在有几十个网站项目(都在 ./websites/ 目录下),每个项目的 Git 提交都是 Claude 帮忙做的。

Commit message 写得规范、仔细。而且它能准确总结改动,不像我经常写「fix bug」「update」这种废话 commit。所以能动嘴,就不要自己动手。

最佳实践:

在 CLAUDE.md 里写一句:「Commit message 用中文,参考项目历史 commit 风格」

Claude 就懂了。

技巧 10:代码 Review 救命指南 - 血泪教训#

这是我付出最惨代价学到的一课。

labubu 壁纸网站,3 天 8000 UV,一夜之间流量归零。

怎么回事?

我想加多语言,让 Cursor 改代码。改完了,看了眼预览,没问题,直接 accept。

没想到 Cursor 顺手把 header 里的 title、description 改成了中文。

这些标签网页上看不见,但搜索引擎看得见。

我的网站从英文网站变成了中文网站。老外用英文搜,当然搜不到。

流量一夜归零。

教训:

Vibe coding 一时爽,没 review 全归零。

如何避免:

1. 关键代码必须 review#

SEO 相关(title、description、keywords)
数据库操作
支付流程
权限控制

2. 让 Claude 解释改动#

不确定时问:「你刚才改了什么?为什么这样改?」

3. 本地验证#

部署前用 pnpm run build 检查报错

4. 定期检查源代码#

Chrome 开发者工具 → Elements → <head> 标签

检查 title、description、Open Graph 标签是否正确

现在我的做法:

涉及 SEO、支付、权限的改动:

让 Claude 先解释要改什么
改完后列出所有改动
我过一遍关键部分
本地测试 + build 验证
再上线

五、一点点总结#

用 Claude Code 小半年,最大的感受:Claude Code 几乎是万能工具了,不只是写代码。我已经开始用它在写公众号、做 PPT,不断优化改造成一个「AI 系统」。

是的,这篇文章,也主要由 Claude Code 写的,我只是作为「小编」稍微改改稿子,加点配图。

但工具只是工具,把工具的价值最大化的发挥出来,就各显神通了。

一点上手步骤:

还没用 Claude Code 的朋友,先安装上,API 可以先买中转账号,或者用智谱、MiniMax、DeepSeek、Kimi…等等平替
用 Claude Code 做一个简单的网页、游戏
使用 Claude Code 搭建自己的自动化系统

就这些。开搞吧。

Claude Code，4个进阶功能

来源 https://benx.ai/blog/posts/claude-code-4-advanced-features

用 Claude Code 大半年了，从最开始只会输入提示词等它写代码，到现在管理着二十多个网站项目，我发现很多人只用到了它30%的能力。

今天聊4个进阶功能：MCP、Skills、子代理、斜杠命令。

如果觉得概念太多，先把 Skills 学会就够了。

MCP：我只装了一个，Chrome DevTools#

MCP（Model Context Protocol）说白了就是让大模型能调用外部工具。听起来很厉害对吧？Anthropic 官方推出的协议，现在各种聚合网站收录了上万个 MCP 工具。

但老实说，我装 MCP 的成功率大概不超过50%。各种奇奇怪怪的问题，依赖装不上、环境不对、配置出错。更关键的是，MCP 会占用上下文空间，你装得越多，Claude 能用来理解你需求的空间就越少，智能水平反而下降。

所以我的策略是：能不用就不用，必须用的只留一个——Chrome DevTools MCP。

这是 Chrome 官方出的，让 Claude Code 能直接操控浏览器。做网站的时候太好用了。我直接告诉它「帮我检查这个网站有没有报错」，它就会启动一个 Chrome，打开网站，检查控制台，把问题找出来告诉我。

以前做网站调试，我得自己打开浏览器、F12开调试工具、一个个看报错。现在就一句话的事。

但也就这一个了。你看那些 MCP 聚合网站，高德地图、各种 API 接口、数据库连接，看起来挺心动的。我的建议是：先别装。等你真正遇到需要的场景，再去找对应的 MCP，不然装一堆吃灰还影响性能。

Skills：这才是真正的效率神器#

Skills 是我用得最多、最推荐大家学的功能。它解决了一个核心问题：把你经常干的事情做成可复用的技能包。

举个例子。我做网站要配图，之前的流程是：写完文案→打开 AI 图片生成工具→想提示词→生成图片→下载→放到网站目录→调整配置。一个网站六七张配图，来回折腾半小时。

现在呢？我有一个图片生成的 Skill。做网站的时候直接说「帮我生成这个页面的配图」，它会读取网站内容，理解每个区块是讲什么的，生成对应的图片，自动转格式，自动放到正确目录，自动更新配置文件。

最重要的是，图文相符。因为它是基于网站内容的上下文去生成的。比如我有个区块讲「角色一致性」，它生成的配图里角色就真的是一致的。这比我自己想提示词效果好多了。

Skill 本质上就是一个文件夹，里面放着说明文档和执行脚本。说明文档告诉 Claude 这个 Skill 是干嘛的、怎么用，脚本负责实际执行。

为什么比纯让 AI 写代码快？因为脚本运行的时候不消耗 token。AI 只需要理解你的需求、调用脚本、处理输出，中间的执行过程是本地跑的。同样一件事，用 Skill 可能5秒，纯聊天可能要30秒。

三种获取 Skill 的方式#

第一种：用别人做好的。现在有好几个 Skill 聚合网站，收录了上万个别人做的 Skill。文档写作、代码审查、PPT 生成、数据分析……找到喜欢的直接下载安装。

安装方法特别简单：把 Skill 的 GitHub 链接或者下载好的文件夹给 Claude Code，说「帮我安装这个 Skill」，它自己会搞定。

第二种：用 Skill Creator 从零创建。 Anthropic 官方出了一个创建 Skill 的 Skill（没错，套娃了）。你告诉它想做什么功能，它会引导你一步步完成。

我之前演示过一个掷骰子的 Skill，30秒创建完毕。说「帮我用 Skill Creator 创建一个石头剪刀布小游戏」，它就帮你生成好了。

第三种：做完一件事后总结成 Skill。这是我最常用的方式。

比如我给网站做多语言翻译，做完之后发现：诶，这个流程以后肯定还会用。于是跟 Claude 说「帮我把刚才做的这件事做成一个 Skill」。它会把刚才的执行步骤整理打包，下次再做类似的事就能直接调用。

Skill 最大的好处是可以不断迭代。第一版做出来效果一般？没关系，用的时候发现问题直接让 Claude 改。我的图片生成 Skill 已经改了不下10版，现在用起来又快又稳。

一个高级玩法：Skill Seeker#

有一个开源项目叫 Skill Seeker，它能自动爬取任何网站或 GitHub 仓库的内容，然后帮你打包成 Skill。

我用它做了一个 Google SEO 的 Skill。把 Google 官方的 SEO 文档全爬下来，做成技能包。现在验证一个网站 SEO 做得好不好，直接调用这个 Skill，它会按照 Google 的官方标准来检查。

你也可以把你常用的工具文档这样处理。比如某个开源库的 README 和 API 文档，做成 Skill 之后，以后用这个库写代码就方便多了。

子代理：专业的事交给专业的角色#

子代理（Sub Agent）这个概念听起来很高级：给不同的角色分配不同的任务，前端工程师写前端、后端工程师写后端、架构师做架构设计。

本质上是什么呢？就是一段自定义提示词，规定一个角色的职责和能力边界。

创建子代理很简单，输入 /agents 就能看到引导界面。它会问你这个角色叫什么、负责什么、能用哪些工具、用什么模型。填完之后自动生成一个 agents 配置文件。

我创建过一个代码安全审查的子代理，设定它是「有15年经验的 QA 工程师」，专门审查代码有没有安全漏洞。写完一段复杂代码后让它跑一遍，比我自己看效率高多了。

但说实话，这个功能对 Vibe Coding 的选手价值没那么大。如果你是专业开发者，经常需要多角色协作、分工明确地完成大项目，子代理很有用。如果你只是想快速做出东西，直接跟 Claude 聊就够了。

子代理还有个坑：每个子代理写完代码需要及时验证。你如果一口气让三四个子代理各写各的，最后合并的时候发现有 bug，修起来非常痛苦。

所以我的建议是：先别学这个。等你的项目复杂到需要多角色协作的时候再说。

斜杠命令：/init 和 /push 是我的高频命令#

斜杠命令（Slash Command）是我觉得最实用但最被低估的功能。

在 Claude Code 里输入 /，会弹出一堆命令。分两类：系统自带的和自定义的。

系统命令里最重要的两个#

/init —— 这个一定要用。

它会扫描你整个项目，自动生成一个 CLAUDE.md 文档，描述项目是干嘛的、结构是怎样的、有哪些关键文件。

这个文档会被 Claude Code 自动加载。以后打开这个项目，你不用再解释「这是一个什么项目」，它已经知道了。

我管理29个网站项目，每个都有 CLAUDE.md。打开任意一个项目直接开干，不用从头解释。

第一次运行 /init 生成的文档可能很长，我建议手动精简一下。文档越精炼，Claude 的遵循性越好。

/clear —— 上下文太长的时候用。

聊久了上下文会越来越长，Claude 反应变慢、容易忘事。/clear 相当于清空重来，但比关掉再开更方便。

还有个 /compact 是压缩上下文，既不丢失之前聊的内容，又能保持 Claude 的智能水平。我一般先试 /compact，不行再 /clear。

自定义命令才是效率杀手#

系统命令有限，但你可以创建自己的。

我最常用的自定义命令是 /push。一句话：把当前代码推送到 GitHub。

创建过程：告诉 Claude「帮我创建一个自定义命令，主要功能是把代码推送到 GitHub，如果没初始化 git 就先初始化，如果没有远程仓库就创建一个私有仓库」。

创建完之后，写完代码直接 /push，它自动 add、commit、push，还会自动生成 commit message。我十几个网站都是这么部署的。

简单的、重复性的操作做成斜杠命令；复杂的、需要多步骤的做成 Skill。这是我的使用原则。

组合起来用#

做一个新网站：/init 初始化 → 写完调用图片生成 Skill → SEO 检查 Skill 验证 → Chrome DevTools MCP 调试 → /push 推送。

整个流程不用离开 Claude Code 界面。

先把 Skills 学会#

这4个功能里，Skills 投入产出比最高。MCP 装一个够用，子代理等项目复杂了再说，斜杠命令 /init 先用起来。

不管用什么工具，关键代码自己过一眼。之前做网站加多语言功能，AI 改错了 header 里的标题，我没检查直接部署，流量一夜归零。

AI 能帮你写代码，但不能替你承担后果。

=============== End

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - lsgxeva