u=138559889,285527476&fm=253&fmt=auto&app=120&f=JPEG.webp

Claude Code 是 Anthropic 为 Claude 3 系列模型(Opus/Sonnet/Haiku)集成的原生代码能力,无需额外插件,支持代码生成、调试、解释、优化、重构、跨语言转换等核心功能,适配 Python/Java/JS/Go/C++/SQL/Shell 等几乎所有主流编程语言,网页版 claude.ai 即可直接使用,是新手和开发者高效写代码的工具。

由于Anthropic自家模型(Opus/Sonnet/Haiku) 使用比较麻烦需要翻墙,并且价格比较昂贵所以这个教程使用 Claude Code+ 智普的GLM4.7 。

一、准备工作

1.安装NodeJS

本教程采用的nodejs方式进行安装,安装门槛较低。

1.首选安装Nodejs 版本建议20及以上 (前端的小伙伴可以使用nodejs管理包切换避免影响本机nodejs环境

方式一:官网下载(https://nodejs.org/en/download

方式二: 前端建议使用管理模块来管理不同给的nodejs版本

#Windows (nvm下载地址 https://github.com/coreybutler/nvm-windows/releases)
#MacOS  (安装命令:brew install nvm) 没有brew的自行教程搜Mac安装brew

#下载
nvm install 20
#使用
nvm use 20

安装成功后终端重新打开输入 node -v 查看是否成功

2.安装Claude Code

终端输入以下命令

注意:下面命令Windows系统不需要加sudo

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

安装好后进行验证

claude --version

3.安装GLM4.7嵌入工具

终端输入以下命令,出现提示一路Y

npx @z_ai/coding-helper

首次需要根据步骤操作,我这边安装过了大致说下

1.语言选择中文

2.套餐选择中国版

3.Key输入在智普模型购买的GLM Coding Plan 的秘钥就行

4.编码工具选择Claude Code

5.最后重新加载下配置即可安装成功(别漏了)

然后重新打开个终端去输入 claude 回车进入Claude

如果出现以下页面是说明是否将当前文件夹作为工作目录直接yes即可

出现以下页面说明安装全部完成,你就可以用它帮你敲代码了(上面还是显示的Sonnet或者Opus 4.5 这个不用管他,其实调用的是GLM4.7)

二、基本命令

1.最大权限运行: claude --dangerously-skip-permissions

平时我们使用直接在工作目录输入 claude 正常进入claude 但是这样只要修改文件或者需要权限高一点的操作就会提醒你选择是否操作。但会降低开发效率。

每次修改需要提问:

所以我一般会使用最高权限方式去打开claude,运行方式只要在 claude 后面增加--dangerously-skip-permissions 即可开启

claude --dangerously-skip-permissions

2.初始化项目:/init

  • 核心作用:初始化 Claude 的整体对话状态,清空所有历史上下文、记忆、对话配置,让 Claude 回到「全新初始状态」,无任何之前的对话记忆。

  • 使用场景

    1. 代码开发中切换全新项目(比如从猜数字游戏切换到爬虫项目),无需保留之前的代码记忆;

    2. 多轮修改代码后,Claude 的上下文混乱(比如记混函数名、逻辑),需要彻底重置重写;

    3. 想清除之前的指令配置(比如关闭 /compact、/ide 模式),恢复默认输出。

    4. 检查项目内容包含框架等信息,整理好在根目录的CLAUDE.md

  • 实操方式:在 Claude 对话框中直接输入init,回车发送即可,无需加斜杠 / 前缀。

  • 注意事项:生效后所有历史对话记忆会被彻底清空,无法恢复,适合确定无需保留上下文时使用。

3.输出格式优化指令:/compact(紧凑输出,聚焦代码本身)

/compactClaude 的紧凑输出模式指令,核心作用是优化输出格式,减少冗余的自然语言描述、空行、重复解释,让输出重点聚焦代码块、关键步骤、核心逻辑,是 Claude Code 开发中最常用的优化指令,大幅提升代码查阅和复制效率。

核心作用

开启后,Claude 的输出会变得简洁紧凑

  • 减少对代码的冗余文字解释(仅保留必要的说明);

  • 代码块无多余空行,语法高亮保持不变;

  • 步骤类内容(如项目结构、部署步骤)用简洁列表呈现,无大段废话。

使用场景

  1. 多轮生成 / 修改代码:比如反复优化一个函数、调试一段代码,无需 Claude 每次都大段解释,只看代码即可;

  2. 生成长代码 / 多代码块:比如项目级代码、多文件代码,紧凑输出后翻找、复制代码更方便;

  3. 快速获取代码结果:比如只需 Claude 生成代码,无需额外的运行说明、语法讲解(后续需要再单独问)。

实操方式

两种使用方式,均可生效,按需选择:

  1. 全局开启:直接输入/compact发送,后续所有输出都会保持紧凑模式,直到用init//clear重置对话;

  2. 单次生效:在代码指令开头添加/compact (加空格),仅当前这轮输出紧凑,后续恢复默认,示例:

    plaintext

    /compact 帮我用Python写一个简易爬虫,爬取豆瓣Top250电影名称,带反爬措施
    

注意事项

紧凑模式仅减少冗余文字,不会省略代码的关键部分(如注释、异常处理、依赖说明),代码的完整性和可运行性不受影响。

4.上下文清空指令:/clear

  • 核心作用:清空当前对话的所有上下文记忆,效果和init完全一致,属于斜杠式快捷指令,是 Claude 的标准指令格式。

  • 使用场景:和init完全相同,仅为指令格式差异,部分开发者更习惯用斜杠开头的标准指令。

  • 实操方式:在对话框中直接输入/clear,回车发送即可。

  • 注意事项

    1. 仅清空上下文记忆,不会删除聊天记录(claude.ai 的历史对话列表仍会保留),只是 Claude 不再识别之前的内容;

    2. 代码开发中若只是局部修改代码,无需用此指令(会丢失所有代码记忆),直接说「基于上一轮代码,修改 XX 部分」即可

5.代码专属强化模式:/ide(Claude Code IDE 模式,工程化代码开发)

/ideClaude Code 的核心强化指令,开启后 Claude 会切换为IDE 级代码开发模式(类比本地 VS Code/PyCharm),大幅强化工程化代码能力,是区别于普通 Claude Code 的「进阶代码模式」,专为项目级、多文件、工程化代码开发设计,也是代码开发中最核心的指令。

核心作用

开启/ide模式后,Claude 的代码能力会针对性强化,重点提升以下能力:

  1. 多文件管理:支持按文件目录结构生成代码,自动拆分不同功能到对应文件(如 Django 的 views.py、models.py,Flask 的路由文件、工具文件);

  2. 工程化开发:生成的代码遵循项目开发规范,包含完整的项目结构、依赖说明、部署步骤、配置文件(如 requirements.txt、config.py);

  3. 代码工程化优化:自动做代码解耦、函数拆分、模块划分,避免单一文件写所有逻辑,适配本地 IDE 运行;

  4. 强化项目级逻辑:擅长设计项目架构、核心业务流程、模块之间的调用关系,而非仅生成单一函数 / 脚本。

适用场景(重点)

适合项目级代码开发,而非单一功能 / 脚本开发,典型场景:

  1. 开发完整的代码项目(如 Django 博客、Flask 接口服务、Python 数据分析项目、Java 工具类项目);

  2. 设计项目目录结构 + 生成对应核心代码;

  3. 多文件代码的编写、调试、整合;

  4. 工程化的代码重构、项目迁移。

不适用场景:仅生成单一简单函数 / 脚本(如简易计算器、斐波那契函数),普通 Claude Code 已足够,无需开启 /ide。

实操方式

代码需求指令开头添加/ide (加空格),发送后 Claude 会自动切换为 IDE 模式,示例:

plaintext

/ide 帮我用Python+Flask开发一个简易的用户管理接口服务,包含用户注册、登录、查询功能,按工程化拆分文件,生成完整项目结构和可运行代码,给出部署步骤

输出特点(IDE 模式专属)

开启后 Claude 的输出会有明显的工程化特征:

  1. 先给出项目目录结构(清晰的文件层级);

  2. 按文件逐一生成代码,每个代码块标注文件路径(如app/views.pyapp/models.py);

  3. 附带依赖安装命令(如pip install flask pymysql)、本地运行命令配置说明

  4. 代码自带工程化优化(如异常处理、配置解耦、函数拆分),可直接复制到本地 IDE(VS Code/PyCharm)运行。

6、高频组合使用技巧(Claude Code 开发必备)

单独用单个指令已能提升效率,组合使用能适配更复杂的代码开发场景,推荐 3 个高频组合,直接套用即可:

  1. 全新项目开发init/ide + 项目需求

    先初始化对话,再开启 IDE 模式开发新项目,避免上下文干扰,工程化拉满;

  2. 项目级紧凑输出/ide /compact + 项目需求

    同时开启 IDE 模式和紧凑输出,生成工程化代码的同时,减少冗余解释,重点聚焦代码和项目结构;

  3. 简单代码快速生成/compact + 简单代码需求

    生成单一函数 / 脚本时,紧凑输出,快速获取可复制的代码,无需多余说明

三、Claude Code模式

claude code 默认提供了2种模式,分别是"接受实时编辑模式""规划模式"。刚进入输入shift+tab 可以切换模式


1. accept edits on(接受实时编辑模式)

这是 Claude代码 / 内容精细化修改的核心模式,开启后 Claude 会允许你对它的回复内容(尤其是代码块)做实时选中、修改、补全,Claude 会根据你的编辑操作实时响应、完善内容,是代码微调、局部修改、内容补全的神器。

核心作用:打破「你发指令→Claude 全量生成→你再提修改」的传统流程,支持对 Claude 的回复做「局部实时编辑」,Claude 会识别你的修改操作并快速补全 / 修正。

核心使用场景(代码开发重点)

  1. 代码局部微调:Claude 生成的代码仅需修改少量地方(如函数名、参数、逻辑分支),无需重新发指令,直接编辑代码块即可;

  2. 代码补全:让 Claude 生成了基础代码框架,需要补全某部分逻辑(如添加异常处理、补全循环体),直接选中空白处输入提示,Claude 实时补全;

  3. 内容 / 注释修改:修改代码中的注释、项目说明、部署步骤,实时生效,无需重新生成。

2.plan mode on(规划模式)

这是 Claude 处理复杂需求的「思考模式」,开启后 Claude不会直接生成代码 / 内容,而是先梳理逻辑、拆解步骤、设计架构、规划方案,再等待你确认(或直接继续)生成最终结果,是复杂代码项目、算法设计、工程化开发的必备模式。

  • 核心作用:让 Claude「先想再做」,提前输出清晰的规划方案,避免直接生成的代码 / 内容逻辑混乱、结构不合理,尤其适合你自己还没梳理清需求 / 架构的场景。

  • 规划内容(代码开发重点):针对代码 / 项目需求,Claude 会输出以下规划(按需适配):

    ✅ 项目开发步骤拆解(如「1. 设计目录结构→2. 编写模型层→3. 编写接口层→4. 测试」);

    ✅ 算法实现思路梳理(如快速排序的「分治思想→分区操作→递归实现→边界处理」);

    ✅ 工程化架构设计(如 Flask 项目的「前后端分离→数据库选型→依赖管理→部署流程」);

    ✅ 代码模块划分(如哪些功能拆分为工具函数、哪些为核心业务函数);

    ✅ 潜在问题提前规避(如爬虫的反爬措施、接口的鉴权设计)。

三、 Skills使用

在 Claude(含 Claude Code)中,Skills是 Anthropic 官方为 Claude 内置的专属能力模块 / 功能集,是区别于「模式(plan/edits)」「指令(/ide/init)」的第三类核心能力,本质是为 Claude 补充了标准化、场景化的专业能力,无需复杂指令,一键启用即可让 Claude 拥有对应领域的专属技能,大幅强化特定场景的处理能力(尤其代码开发、文档处理、数据分析)。

简单来说:

  • 「模式」是Claude 的交互状态(怎么和你配合做事:先规划 / 实时编辑 / 默认输出);

  • 「指令」是Claude 的能力强化开关(让代码能力工程化 / 输出更紧凑);

  • 「Skills」是Claude 的专属技能包(让 Claude 拥有某一领域的专业能力:如在线运行代码、解析 PDF、生成可视化图表)。

1.安装skills

安装skills 非常简单,在claude配置目录新建skills 文件夹 把下好的skills 丢进去就行。

一般 Mac 在 /Users/你用户名/.claude 下 (.claude是隐藏的)

当然你不想找了 还有个骚操作就是 让claude 帮你打开

1.随便在个地方打开claude 然后对话 “帮我打开 Claude Code 配置目录 ” 就能帮你打开到配置目录界面。

打开看到以下界面,如果没有skills文件夹 新建一个即可。将下好的skills技能包丢进去就行

如何验证skills是否安装成功?

进入 claude 然后输入 /skills 回车就能看到你安装的skills

2.下载skills

下载skills 的网站有很多,我推荐一个我常用的下载网站(注意下载github估计需要🪜)

》》》》点我进入

下载的skills压缩包解压后丢到之前创建的skills文件夹即可

3.如何使用skills

其实每个skills 技能包都有他的一个教程,每个不一样。一般我们可以指定skills名字或者 触发skills的关键字去激活这个技能包。

例子:使用页面设计技能包 ui-ux-pro-max 来生成一个h5网页

1.进入claude 后 输入提示词:"帮我使用ui-ux-pro-max规范生成一个手机登录注册html5的页面使用css3。风格:这个h5我想用扁平化风格,主色调是蓝色最好和水族相关。特效需要丰富点"

界面会显示出skill,这样就激活了skill技能

4.推荐几个我觉得常用的skills

ui-ux-pro-max (前端设计美化技能)

这是我觉得非常牛逼一个skills,他集合了非常多的风格元素,采用专业的前端设计规范进行封装。用它即可从需求或原型跳过设计直接到高保真页面。

上面示例一句话根据ui-ux-pro-max生成的页面

pptx/docx/xlsx/pdf 四件套

这个比较常用了,比如读取word文档ppt文档,并帮你生成PPT文档Word定义规范等需要用到这个skills。

目前claude code教程到这。后续继续出一个如何通过figma-mcp快速将设计转为高保真页面。