硅基铁匠丙午年 · 独立刊物
← 返回全部文章
技术与 AI约 8 分钟

Claude Code 高阶功能攻略

很多人还停留在让 Claude Code 写几段代码。它真正好用的部分，是模式切换、后台任务、Figma MCP、Hook、Skill、SubAgent 和 Plugin 这几套能力。

很多人用 Claude Code，只是打开终端，让它写几段代码、改几个文件。

这当然能用，但只用了很小一部分。 Claude Code 更像一个开发工作台：它能先做计划，再改代码；能接 Figma 设计稿；能把格式化这类后处理交给 Hook；还能把不同任务拆给 Skill 、 SubAgent 和 Plugin 。

下面按“能马上上手”的顺序整理一遍。

先把环境跑通

第一步还是安装和登录。

从 Claude Code 官网复制安装命令，在终端里执行。然后建一个项目目录：

mkdir my_studio
cd my_studio
claude

如果没有自动登录，可以执行：

claude login

接入方式主要有两种：Claude Pro / Max 订阅，或者 API Key 按量计费。 Claude Code 本身不只绑定 Claude 模型，也可以通过环境变量接入其他兼容模型。

三种工作模式

Claude Code 里最常用的快捷键之一是 Shift + Tab，可以在不同工作模式之间循环切换。

可以这样理解：

  • 默认模式：适合日常对话和小修改；
  • 规划模式：适合复杂需求，先让它列计划；
  • 自动模式：适合确认计划后连续改文件。

规划模式里，Shift + Enter 可以输入多行需求。复杂输入也可以按 Ctrl + G，打开 VS Code 标签页编辑。

有一个边界要注意：自动模式通常只自动同意文件写入，终端命令仍然需要确认。--dangerously-skip-permissions 可以跳过权限检测，但名字已经说得很直白，生产环境别随手开。

复杂任务先规划，再执行

比如要把一个待办软件重构成 React + TypeScript + Vite，不要一上来就让它改。

更稳的流程是：

  1. 先描述目标和约束；
  2. 让 Claude Code 生成计划，包括文件清单、目录结构、改动步骤；
  3. 看计划是否合理；
  4. 再选择执行计划，或者继续修改计划。

这样做慢一点，但能避免它一口气改出一堆你看不懂的文件。

运行开发服务时，终端可能会被占住。可以按 Ctrl + B 把任务放到后台，再用：

claude tasks

查看后台任务。需要结束时按 K。

回滚也要知道。连续按两次 ESC，可以进入回滚页面，选择回滚点。它能撤销 Claude Code 写入的文件，但撤不了终端命令生成的东西，比如 node_modules。重要项目还是要用 Git 管住版本。

图片输入和 Figma MCP

Claude Code 可以直接吃图片。

两种方式：

  • 把图片拖进终端；
  • 复制图片文件后按 Ctrl + V 粘贴。

macOS 下这里也要用 Ctrl + V，不是 Command + V。

如果是前端页面，Figma MCP 会更好用。图片只能让模型“看见大概长什么样”，Figma MCP 能拿到组件、间距、字体样式等更具体的信息。

大致流程：

  1. 安装 Figma MCP Server；
  2. 重新打开 Claude Code，用 claude resume 或 claude -c 恢复会话；
  3. 执行 claude mcp，查看并授权 figma 工具；
  4. 复制 Figma 设计稿链接，让 Claude Code 按设计稿修改页面。

复杂设计稿仍然需要人工校对，尤其是动画、交互和响应式细节。但它比单纯传截图更适合做页面还原。

CLAUDE.md：把项目规则写下来

每次都在对话里重复“这个项目用 Vite”“组件命名用 PascalCase”“新增功能要补测试”，很浪费。

可以执行：

claude init

生成 CLAUDE.md。它就是 Claude Code 的项目说明书。也可以用：

claude memory

快速打开。

示例：


## 项目说明
这是一个待办软件项目，使用 React + TypeScript + Vite 构建。

## 注意事项
- 所有新增功能必须添加单元测试
- 代码风格遵循 ESLint 配置
- 组件命名使用 PascalCase

CLAUDE.md 有项目级和用户级两种。项目级跟当前目录走，用户级对当前用户生效。改完以后，最好重启 Claude Code，让新规则重新加载。

Hook：让格式化自动发生

Hook 适合处理“每次改完都要做”的事情，比如自动格式化。

执行：

claude hooks

选择触发时机。常见做法是选择 post-tool-use，匹配 Write 或 Edit，也就是 Claude Code 写入或编辑文件后触发命令。

用 Prettier 自动格式化的命令可以这样写：

jq -r '.file_path' | xargs npx prettier --write

Hook 可以保存到本地项目、共享项目或用户级配置。只在自己机器上用的配置，通常放 settings.local.json，再加入 .gitignore。

Skill：把可复用任务沉淀下来

Skill 适合处理重复出现、但又不值得每次单独开一个 Agent 的任务。

比如每日总结、发布前检查、代码审查清单、周报整理，都可以变成 Skill 。

基本做法：在 ~/.claude/skills/ 下创建一个文件夹，例如 daily-report，里面放 skill.md：

name: daily-report
description: 用于生成每日工作总结，包含今日完成、明日计划、遇到的问题

## 指令
当用户请求生成每日总结时，按照以下格式输出：

### 今日完成
- [列出今天完成的任务]

### 明日计划
- [列出明天的计划]

### 遇到的问题
- [列出遇到的问题及解决方案]

Skill 会共享主对话上下文。适合“和当前项目有关，但不想每次重新解释”的任务。

SubAgent：给大任务开独立上下文

SubAgent 和 Skill 最大的区别，是上下文隔离。

SubAgent 会开启独立对话，有自己的工具、 Skill 和模型设置。它的中间分析不会塞回主对话，只返回最终结果。

适合的场景：

  • 大型代码审查；
  • 独立模块重构方案；
  • 排查一个相对封闭的问题；
  • 不想污染主对话上下文的任务。

创建方式：

claude agent

然后选择创建新 Agent，设置项目级或用户级，描述它要做什么，选择可用工具和模型，再检查生成的 Agent 描述文件。

如果一个任务需要看大量文件，但最后只需要一个结论，SubAgent 会比主对话更干净。

Plugin：一次安装一套能力

Plugin 是更大的打包方式。它可以包含 Skill 、 SubAgent 、 MCP 、 Hook 等多个组成部分。

进入插件管理器：

claude plugin

里面有 discover 、 installed 、 marketplaces 几个入口。

例如安装 Frontend Design 插件后，本质上会装进一个同名 Skill 。之后可以直接让 Claude Code 按这个插件的要求做页面：

按照 Frontend Design 的要求，做一个待办软件，使用 HTML 来实现

插件市场还在早期，质量和安全性要自己判断。不要看到插件就全装，尤其是带命令执行能力的插件。

一张决策表

如果不知道该用什么，可以按这个顺序判断：

任务类型 → 是否需要独立上下文？
  ├── 是 → SubAgent（代码审查、大型重构）
  └── 否 → 是否需要复用指令？
       ├── 是 → Skill（每日总结、代码格式化）
       └── 否 → 主对话直接处理

是否需要设计稿还原？
  ├── 是 → Figma MCP Server
  └── 否 → 直接传图片

是否需要自动后处理？
  ├── 是 → Hook（Prettier 格式化、ESLint 修复）
  └── 否 → 跳过

是否需要一键安装整套能力？
  ├── 是 → Plugin
  └── 否 → 手动配置

最后提醒

Claude Code 的高阶能力不是为了炫技，而是把开发过程拆清楚：哪些事情需要计划，哪些规则应该持久化，哪些后处理可以自动化，哪些任务该交给独立上下文。

从这个角度看，开发者的工作会慢慢从“逐行写代码”，变成“定义任务、设置边界、检查结果”。

这比单纯让 AI 写代码重要得多。

来源：https://x.com/php_martin/status/2065340397652787308