本文是 《Claude Code 从入门到高级实战》系列 第 2 篇（共 4 篇）。上一篇讲解了安装、登录授权、权限模式与第一个实战任务；本篇深入任务执行核心：终端命令、Plan Mode、后台任务、Rewind 回滚、图片与 Figma MCP、会话恢复与上下文管理。
第二部分：复杂任务处理与终端控制
5. 执行终端命令：理解 Bash 工具
Claude Code 的核心能力之一，是把语言指令转换成对开发工具的调用。例如：
先执行
git status和pnpm test，分析所有失败项。未经确认不要安装新依赖，也不要修改 lockfile。
Claude 会根据当前环境、可用工具与权限规则决定如何调用命令。
5.1 Bash Tool 与直接在终端运行命令的区别
| 方式 | 谁执行 | 主要用途 |
|---|---|---|
终端里输入 pnpm test |
你的 Shell | 人工直接运行 |
| 在 Claude 会话中说"运行 pnpm test" | Claude 调用工具 | 让 Claude 读取并分析结果 |
Claude 会话中输入 !pnpm test |
Claude Code Shell Mode | 直接把命令送给 Shell，结果进入会话 |
! 前缀是 Claude Code 的 Shell Mode，不是 PowerShell 的语法。若你在 Claude Code 外的 PowerShell 直接输入 !pnpm test，不是同一机制。
5.2 Windows 终端差异
Claude Code 的工具执行可能使用 Git Bash、PowerShell 或其他配置的 Shell。不能假设在 Windows 下所有 Bash 示例都能逐字运行。
例如：
powershell
# PowerShell
Get-ChildItem src -Recurse -File
Get-Content package.json
bash
# Git Bash / WSL / Linux
find src -type f
cat package.json建议在提示词里明确运行环境：
我在 Windows 11 的 PowerShell 里操作。请优先使用跨平台 Node 命令或适用于 PowerShell 的写法；如需 Bash，请先说明原因和使用的 Shell。
5.3 给工具调用设置边界
text
允许：读取文件、git status、git diff、pnpm lint、pnpm test。
需要先询问：安装依赖、修改 package.json、修改 lockfile、网络下载。
禁止：git push --force、删除数据库、修改 .env、部署生产环境。这些文字只是行为指引。需要强制限制 的操作，应在 .claude/settings.json 使用 permissions.deny，并在关键路径结合 Hook 或系统级权限控制。
一个示意配置：
json
{
"permissions": {
"allow": [
"Bash(git status)",
"Bash(git diff *)",
"Bash(pnpm lint)",
"Bash(pnpm test)"
],
"deny": [
"Read(./.env)",
"Bash(git push --force *)"
]
}
}规则要依照当前版本的权限匹配语法测试，不能仅通过阅读配置就认为已经覆盖所有变体、复合命令或替代工具路径。
6. Plan Mode：复杂任务先规划再实施
对于"前端项目从 Vue Router 改造为模块化权限路由""重构登录认证和权限""把传统单体改为 Monorepo"等任务，直接执行往往会出现：
- 修改范围比预期大；
- Claude 在不了解依赖关系前就改代码；
- 测试与验收标准不清晰；
- 实现过程中不断偏离最初需求。
Plan Mode 的目的，是把研究与决策放到实际修改之前。
6.1 进入 Plan Mode
text
/plan或者：
powershell
claude --permission-mode plan6.2 推荐的需求提示词
先进入规划阶段，不修改文件。目标：将后台的角色/菜单/按钮权限整合为统一的 RBAC 模块。请阅读路由、Pinia Store、权限指令、动态菜单、登录态管理与相关测试。输出：① 当前架构与调用链；② 目标架构；③ 受影响文件；④ 数据结构和 API 兼容性；⑤ 分阶段任务及依赖；⑥ 风险与回滚策略；⑦ 每阶段验收标准。遇到不明确的业务规则先列问题。
6.3 一份可执行计划应该包含什么？
| 项目 | 要求 |
|---|---|
| 问题定义 | 当前缺陷与预期行为可重现 |
| 边界 | 明确做什么、不做什么 |
| 依赖关系 | 哪个模块必须先完成 |
| 代码范围 | 涉及目录、类型、接口和测试 |
| 验收标准 | 可执行测试和业务场景 |
| 风险 | 数据迁移、兼容性、安全、性能 |
| 回退 | Git 分支、提交或必要的数据备份 |
6.4 从规划进入实现
建议采用分阶段节奏：
#mermaid-svg-MncUSpbh4Izwxvjb{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-MncUSpbh4Izwxvjb .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-MncUSpbh4Izwxvjb .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-MncUSpbh4Izwxvjb .error-icon{fill:#552222;}#mermaid-svg-MncUSpbh4Izwxvjb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-MncUSpbh4Izwxvjb .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-MncUSpbh4Izwxvjb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-MncUSpbh4Izwxvjb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-MncUSpbh4Izwxvjb .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-MncUSpbh4Izwxvjb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-MncUSpbh4Izwxvjb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-MncUSpbh4Izwxvjb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-MncUSpbh4Izwxvjb .marker.cross{stroke:#333333;}#mermaid-svg-MncUSpbh4Izwxvjb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-MncUSpbh4Izwxvjb p{margin:0;}#mermaid-svg-MncUSpbh4Izwxvjb .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-MncUSpbh4Izwxvjb .cluster-label text{fill:#333;}#mermaid-svg-MncUSpbh4Izwxvjb .cluster-label span{color:#333;}#mermaid-svg-MncUSpbh4Izwxvjb .cluster-label span p{background-color:transparent;}#mermaid-svg-MncUSpbh4Izwxvjb .label text,#mermaid-svg-MncUSpbh4Izwxvjb span{fill:#333;color:#333;}#mermaid-svg-MncUSpbh4Izwxvjb .node rect,#mermaid-svg-MncUSpbh4Izwxvjb .node circle,#mermaid-svg-MncUSpbh4Izwxvjb .node ellipse,#mermaid-svg-MncUSpbh4Izwxvjb .node polygon,#mermaid-svg-MncUSpbh4Izwxvjb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-MncUSpbh4Izwxvjb .rough-node .label text,#mermaid-svg-MncUSpbh4Izwxvjb .node .label text,#mermaid-svg-MncUSpbh4Izwxvjb .image-shape .label,#mermaid-svg-MncUSpbh4Izwxvjb .icon-shape .label{text-anchor:middle;}#mermaid-svg-MncUSpbh4Izwxvjb .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-MncUSpbh4Izwxvjb .rough-node .label,#mermaid-svg-MncUSpbh4Izwxvjb .node .label,#mermaid-svg-MncUSpbh4Izwxvjb .image-shape .label,#mermaid-svg-MncUSpbh4Izwxvjb .icon-shape .label{text-align:center;}#mermaid-svg-MncUSpbh4Izwxvjb .node.clickable{cursor:pointer;}#mermaid-svg-MncUSpbh4Izwxvjb .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-MncUSpbh4Izwxvjb .arrowheadPath{fill:#333333;}#mermaid-svg-MncUSpbh4Izwxvjb .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-MncUSpbh4Izwxvjb .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-MncUSpbh4Izwxvjb .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-MncUSpbh4Izwxvjb .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-MncUSpbh4Izwxvjb .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-MncUSpbh4Izwxvjb .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-MncUSpbh4Izwxvjb .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-MncUSpbh4Izwxvjb .cluster text{fill:#333;}#mermaid-svg-MncUSpbh4Izwxvjb .cluster span{color:#333;}#mermaid-svg-MncUSpbh4Izwxvjb div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-MncUSpbh4Izwxvjb .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-MncUSpbh4Izwxvjb rect.text{fill:none;stroke-width:0;}#mermaid-svg-MncUSpbh4Izwxvjb .icon-shape,#mermaid-svg-MncUSpbh4Izwxvjb .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-MncUSpbh4Izwxvjb .icon-shape p,#mermaid-svg-MncUSpbh4Izwxvjb .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-MncUSpbh4Izwxvjb .icon-shape .label rect,#mermaid-svg-MncUSpbh4Izwxvjb .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-MncUSpbh4Izwxvjb .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-MncUSpbh4Izwxvjb .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-MncUSpbh4Izwxvjb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 否
是
是
否
调研现状
生成计划
人工确认范围
新建工作分支
实施最小阶段
Lint / 类型检查 / 测试
独立 Review
通过?
提交阶段成果
仍有阶段?
交付
提示词可以这样写：
计划已确认。只实施第一阶段，不要提前完成后续阶段；每完成一项先运行测试并报告 Diff。禁止直接合并主分支或推送远程，除非我明确授权。
7. --dangerously-skip-permissions：什么是跳过权限检查？
Claude Code 提供高风险的权限绕过方式，例如：
powershell
claude --dangerously-skip-permissions这会跳过常规权限询问，让 Claude 更自动化地使用工具。它不是"更强的模型"，而是更高风险的执行授权。 某些组织级规则、安全机制或产品内部保护仍可能生效，所以也不应把它理解为对所有系统限制都绝对有效。
7.1 为什么危险？
在普通本机开发环境里，Claude 进程可能拥有当前用户对以下资源的访问能力：
- 项目与其他可访问目录；
- SSH Key、Git 凭证、环境变量；
- 本地数据库、Docker、开发服务；
- 公司内网、云服务 CLI 等。
一段错误命令、误解的路径或恶意的仓库提示，就可能造成数据丢失或凭证泄露。
7.2 更稳妥的替代方案
优先选用：
- 保留 Manual / Accept Edits / Plan 模式；
- 使用
/permissions按工具和命令范围放行； - 在
.claude/settings.json限制高危操作； - 将不可信任务放进隔离容器或 VM，收窄目录、网络、凭证与挂载范围；
- 先建立 Git 基线与可恢复的数据快照。
如果确实需要自动化，建议优先使用无生产凭证、无敏感挂载、网络受限、可销毁的临时环境，而不是在个人主机上开启全权限模式。
7.3 三个典型误区
- 误区一：跳过权限 = 提高代码质量。实际上它只减少确认步骤。
- 误区二 ：有
/rewind就不怕误删。Shell 命令造成的文件或外部系统变更并非都能恢复。 - 误区三 ：
CLAUDE.md写"禁止删库"就有安全保障。文档是给模型看的指令，不是系统级权限隔离。
8. 后台任务管理：Background Tasks
Claude Code 支持在执行长时间操作时，把特定命令或 Agent 放到后台，让会话继续处理其他事情。
8.1 适合放后台的任务
pnpm dev开发服务器；- 比较耗时的测试、构建或检查；
- 日志观察和长时间运行的工具；
- 可独立完成、不立即依赖结果的 SubAgent 任务。
例如：
在后台启动
pnpm dev，检查端口是否启动成功，然后继续排查登录页的错误。不要启动第二份相同的开发服务。
在合适的运行状态下，也可以使用 Ctrl+B 把运行中的工具调用转为后台任务；如果使用 tmux，需要留意快捷键冲突。
8.2 查看后台任务
text
/tasks/tasks 用于查看和管理当前会话中的后台任务。不要把它与普通的任务待办清单混淆：后者只是步骤跟踪，不一定代表有进程在运行。
8.3 后台 Shell、后台 SubAgent 和后台会话的区别
| 机制 | 运行的是什么 | 常见入口 |
|---|---|---|
| Background Bash | 一个长时间运行的 Shell 命令 | 提示 Claude 后台执行、Ctrl+B |
| Background SubAgent | 独立上下文中的 Agent 任务 | 主 Agent 委派任务 |
| Background Session | 整个 Claude Code 会话在后台继续运行 | /background、claude agents |
这些不是同一种资源：一个 pnpm dev 进程不等于一个有自主决策能力的 Agent，也不等于一个可跨终端管理的后台会话。
8.4 后台任务生命周期注意事项
- 普通后台命令不一定能在退出 Claude Code 后继续存活；退出会话时可能被清理。
- 若要整个会话脱离终端继续运行，应使用当前版本支持的后台会话能力，并通过
claude agents/claude attach管理。 - 后台日志可能很大，需要防止无界输出、端口冲突、进程残留。
- Windows 上要额外留意子进程、文件句柄、端口监听与 Ctrl+C 行为。
- 长任务要定义超时、取消动作、退出条件和"是否已成功"的判断标准。
生产工程建议：对于长期运行的服务，把 Docker Compose、进程管理器或 CI 作为真正的生命周期管理者；不要长期依赖 Claude 会话托管生产进程。
第三部分：多模态与上下文管理
9. Rewind：回滚代码与对话
Claude Code 的 Checkpointing 机制会跟踪它通过文件编辑工具所做的修改，供 Rewind 使用。
9.1 打开回滚界面
text
/rewind也可以在输入框为空时按两次 Esc（实际行为可能随终端和版本变化）。
9.2 常见回滚选项
| 操作 | 含义 | 适合场景 |
|---|---|---|
| Restore code and conversation | 代码与对话都回到所选检查点 | 某次尝试完全走错方向 |
| Restore conversation | 回退对话，保留当前代码 | 想重新设计后续指令 |
| Restore code | 回退被跟踪的文件变更，保留对话 | 想保留讨论但撤销代码 |
| Summarize from/up to here | 定向摘要部分对话 | 回收上下文空间 |
9.3 Rewind 的边界
Rewind 不是完整的文件系统快照，更不是 Git 的替代品。 典型限制包括：
- 它重点跟踪 Claude 文件编辑工具触达的文件；仅通过 Shell 修改的某些文件可能没有被记录。
- 数据库修改、网络 API 调用、Git 推送与外部系统变更不能指望通过 Rewind 自动撤销。
- 检查点历史与文件快照有保留数量和清理期限。
- 外部编辑、多人协作、跨工作树变更，需要更谨慎地验证恢复范围。
9.4 企业级回滚建议
powershell
git status
git switch -c feat/rbac-refactor
git add .
git commit -m "chore: checkpoint before rbac refactor"上述提交命令只在工作区确实适合提交、且不存在敏感文件时执行。不要为了创建基线而盲目
git add .；生产仓库应先审查暂存内容。
真正可靠的回退通常由 Git 提交 + 数据备份 + 迁移回滚方案 组成。Rewind 更适合短期交互中的快速试错。
10. 图片处理：让 Claude 看懂截图、报错和界面
Claude Code 可以把图像信息与项目代码结合起来分析。常见用途包括：
- 阅读运行错误截图与浏览器控制台截图；
- 分析 UI 的布局、边距、颜色与组件结构；
- 对比现有页面和目标设计；
- 根据截图判断修改影响哪些组件。
10.1 在会话中发送图片
可以通过终端支持的剪贴板粘贴功能附加图像。在 Windows / WSL 环境里，官方交互式快捷键文档列出 Alt+V 作为图像粘贴方式；部分终端也支持 Ctrl+V。以当前终端显示为准。
你也可以提供明确的本地图片路径，让 Claude 在可读取该路径的情况下使用它：
text
请查看 ./screenshots/login-error.png，分析错误提示与 src/views/login 目录中的代码是否有关。10.2 提高 UI 任务质量的方法
不要只说"把页面做到和图片一模一样"，改用：
请对比目标截图与当前登录页。先列出布局、字体、间距、配色、响应式行为的差异；确认影响的 Vue 组件和 SCSS 文件。实现时保持原有登录 API、表单校验和国际化 key 不变。完成后说明哪些细节可由代码验证，哪些必须由浏览器截图人工验收。
图片表达的是视觉结果，不一定包含完整交互行为、设计变量、断点、组件状态和可访问性信息。 对于真实设计工程，最好结合 Figma MCP 获取结构化设计信息。
11. 安装 MCP Server：以 Figma 为例
11.1 MCP 是什么？
MCP（Model Context Protocol）是一种让 Agent 连接外部工具与数据源的标准协议。它把"Claude 想做什么"和"外部系统提供什么能力"分开。
#mermaid-svg-jJZZrZnkZWZ5BPNO{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-jJZZrZnkZWZ5BPNO .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-jJZZrZnkZWZ5BPNO .error-icon{fill:#552222;}#mermaid-svg-jJZZrZnkZWZ5BPNO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-jJZZrZnkZWZ5BPNO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-jJZZrZnkZWZ5BPNO .marker.cross{stroke:#333333;}#mermaid-svg-jJZZrZnkZWZ5BPNO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-jJZZrZnkZWZ5BPNO p{margin:0;}#mermaid-svg-jJZZrZnkZWZ5BPNO .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-jJZZrZnkZWZ5BPNO .cluster-label text{fill:#333;}#mermaid-svg-jJZZrZnkZWZ5BPNO .cluster-label span{color:#333;}#mermaid-svg-jJZZrZnkZWZ5BPNO .cluster-label span p{background-color:transparent;}#mermaid-svg-jJZZrZnkZWZ5BPNO .label text,#mermaid-svg-jJZZrZnkZWZ5BPNO span{fill:#333;color:#333;}#mermaid-svg-jJZZrZnkZWZ5BPNO .node rect,#mermaid-svg-jJZZrZnkZWZ5BPNO .node circle,#mermaid-svg-jJZZrZnkZWZ5BPNO .node ellipse,#mermaid-svg-jJZZrZnkZWZ5BPNO .node polygon,#mermaid-svg-jJZZrZnkZWZ5BPNO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-jJZZrZnkZWZ5BPNO .rough-node .label text,#mermaid-svg-jJZZrZnkZWZ5BPNO .node .label text,#mermaid-svg-jJZZrZnkZWZ5BPNO .image-shape .label,#mermaid-svg-jJZZrZnkZWZ5BPNO .icon-shape .label{text-anchor:middle;}#mermaid-svg-jJZZrZnkZWZ5BPNO .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-jJZZrZnkZWZ5BPNO .rough-node .label,#mermaid-svg-jJZZrZnkZWZ5BPNO .node .label,#mermaid-svg-jJZZrZnkZWZ5BPNO .image-shape .label,#mermaid-svg-jJZZrZnkZWZ5BPNO .icon-shape .label{text-align:center;}#mermaid-svg-jJZZrZnkZWZ5BPNO .node.clickable{cursor:pointer;}#mermaid-svg-jJZZrZnkZWZ5BPNO .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-jJZZrZnkZWZ5BPNO .arrowheadPath{fill:#333333;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-jJZZrZnkZWZ5BPNO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-jJZZrZnkZWZ5BPNO .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-jJZZrZnkZWZ5BPNO .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-jJZZrZnkZWZ5BPNO .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-jJZZrZnkZWZ5BPNO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-jJZZrZnkZWZ5BPNO .cluster text{fill:#333;}#mermaid-svg-jJZZrZnkZWZ5BPNO .cluster span{color:#333;}#mermaid-svg-jJZZrZnkZWZ5BPNO div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-jJZZrZnkZWZ5BPNO .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-jJZZrZnkZWZ5BPNO rect.text{fill:none;stroke-width:0;}#mermaid-svg-jJZZrZnkZWZ5BPNO .icon-shape,#mermaid-svg-jJZZrZnkZWZ5BPNO .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-jJZZrZnkZWZ5BPNO .icon-shape p,#mermaid-svg-jJZZrZnkZWZ5BPNO .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-jJZZrZnkZWZ5BPNO .icon-shape .label rect,#mermaid-svg-jJZZrZnkZWZ5BPNO .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-jJZZrZnkZWZ5BPNO .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-jJZZrZnkZWZ5BPNO .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-jJZZrZnkZWZ5BPNO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 开发者
Claude Code / MCP Client
Claude 工具调用
MCP Server
Figma 设计文件
GitHub / 数据库 / 其他服务
Claude Code 本身不需要内置每种 Figma 操作。MCP Server 可以把设计读取、组件上下文和其他授权能力暴露为工具。
11.2 常见传输方式
| 类型 | 特点 | 典型用途 |
|---|---|---|
stdio |
Claude Code 在本地启动子进程，通过标准输入/输出传输协议消息 | 本地工具服务器 |
| Streamable HTTP | 使用 HTTP 与远程 MCP 服务交互 | 远程 Figma MCP 等 |
| 旧式 HTTP + SSE | 兼容旧实现，不建议新项目优先选择 | 维护历史服务 |
11.3 推荐：安装官方 Figma Plugin
Figma 官方目前推荐在 Claude Code 中安装 Figma Plugin，它除连接配置之外，还可能提供与 Figma 工作流相关的 Skills。
在系统终端中执行：
powershell
claude plugin install figma@claude-plugins-official随后按照安装反馈重启或刷新 Claude Code，进入 /plugin 的已安装列表，完成 Figma OAuth 登录。插件是否可用会受到 Figma 账户权限、组织策略与网络环境影响。
11.4 手工接入 Figma Remote MCP
如果不使用 Plugin，可以执行：
powershell
claude mcp add --transport http figma https://mcp.figma.com/mcp需要让所有项目共享该服务器配置时：
powershell
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp然后在 Claude Code 会话中执行：
text
/mcp选择 Figma，按提示在浏览器授权。再次运行 /mcp 确认连接状态。
常用终端命令：
powershell
claude mcp list
claude mcp get figma
claude mcp remove figma11.5 Remote MCP 与 Desktop MCP
Figma Remote MCP 的地址为 https://mcp.figma.com/mcp，通常不要求安装 Figma 桌面客户端 ；Desktop MCP 需要满足相应 Figma 客户端、席位与 Dev Mode 条件，地址通常是 http://127.0.0.1:3845/mcp。对于多数开发者，先选 Remote MCP。
11.6 本地、项目和用户级作用域
local：当前项目的本地配置，不用于团队共享。project：保存到项目根目录.mcp.json，可随代码仓库共享服务器定义。user：当前用户的多个项目复用。
不要把 API Token 或其他密钥硬编码提交进 .mcp.json。 要分清"可共享的服务器配置"和"仅本机/用户拥有的凭证"。
12. Resume：恢复历史会话
Claude Code 会把对话会话保存下来，便于在不同时间继续一个任务。
12.1 常用命令
在项目根目录执行：
powershell
claude # 新会话
claude -c # 继续当前目录最近的会话
claude -r "session-id-or-name" # 按 ID 或名称恢复在 Claude Code 交互模式中：
text
/resume
/rename auth-refactor通常可以从选择器中找回会话，而不是必须手动记录会话 ID。
12.2 Resume 并不等于回到之前的一切状态
恢复会话通常可以恢复对话历史，但以下外部状态未必还存在：
- 上次运行的开发服务器进程；
- 上次的 Shell 环境变量；
- 已被删除的文件、工作树、临时目录；
- 已过期的外部授权或网络连接；
- 最新分支与上次对话中的分支是否一致。
推荐在恢复复杂开发任务后让 Claude 重新验证当前事实：
请先检查当前工作目录、Git 分支、未提交修改、测试状态和现有服务进程，再根据历史会话总结尚未完成的事项。不要直接假设上次的环境仍然有效。
12.3 什么时候新开会话？
- 同一个功能需要继续：优先
/resume或claude -c。 - 已切换到完全不同任务：优先
/clear或新会话。 - 需要试验两条设计路线：考虑会话分支/独立 Git worktree，避免两条路线互相污染。
13. 使用 MCP 工具还原 Figma 设计稿
安装并授权 Figma 后，下一步不是立刻生成代码，而是让 Claude 先得到设计结构和项目约束。
13.1 完整实施流程
#mermaid-svg-uuxMr4eqw71rmmur{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-uuxMr4eqw71rmmur .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-uuxMr4eqw71rmmur .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-uuxMr4eqw71rmmur .error-icon{fill:#552222;}#mermaid-svg-uuxMr4eqw71rmmur .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uuxMr4eqw71rmmur .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-uuxMr4eqw71rmmur .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uuxMr4eqw71rmmur .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uuxMr4eqw71rmmur .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-uuxMr4eqw71rmmur .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uuxMr4eqw71rmmur .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uuxMr4eqw71rmmur .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uuxMr4eqw71rmmur .marker.cross{stroke:#333333;}#mermaid-svg-uuxMr4eqw71rmmur svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uuxMr4eqw71rmmur p{margin:0;}#mermaid-svg-uuxMr4eqw71rmmur .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-uuxMr4eqw71rmmur .cluster-label text{fill:#333;}#mermaid-svg-uuxMr4eqw71rmmur .cluster-label span{color:#333;}#mermaid-svg-uuxMr4eqw71rmmur .cluster-label span p{background-color:transparent;}#mermaid-svg-uuxMr4eqw71rmmur .label text,#mermaid-svg-uuxMr4eqw71rmmur span{fill:#333;color:#333;}#mermaid-svg-uuxMr4eqw71rmmur .node rect,#mermaid-svg-uuxMr4eqw71rmmur .node circle,#mermaid-svg-uuxMr4eqw71rmmur .node ellipse,#mermaid-svg-uuxMr4eqw71rmmur .node polygon,#mermaid-svg-uuxMr4eqw71rmmur .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uuxMr4eqw71rmmur .rough-node .label text,#mermaid-svg-uuxMr4eqw71rmmur .node .label text,#mermaid-svg-uuxMr4eqw71rmmur .image-shape .label,#mermaid-svg-uuxMr4eqw71rmmur .icon-shape .label{text-anchor:middle;}#mermaid-svg-uuxMr4eqw71rmmur .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-uuxMr4eqw71rmmur .rough-node .label,#mermaid-svg-uuxMr4eqw71rmmur .node .label,#mermaid-svg-uuxMr4eqw71rmmur .image-shape .label,#mermaid-svg-uuxMr4eqw71rmmur .icon-shape .label{text-align:center;}#mermaid-svg-uuxMr4eqw71rmmur .node.clickable{cursor:pointer;}#mermaid-svg-uuxMr4eqw71rmmur .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-uuxMr4eqw71rmmur .arrowheadPath{fill:#333333;}#mermaid-svg-uuxMr4eqw71rmmur .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-uuxMr4eqw71rmmur .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-uuxMr4eqw71rmmur .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-uuxMr4eqw71rmmur .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-uuxMr4eqw71rmmur .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-uuxMr4eqw71rmmur .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-uuxMr4eqw71rmmur .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-uuxMr4eqw71rmmur .cluster text{fill:#333;}#mermaid-svg-uuxMr4eqw71rmmur .cluster span{color:#333;}#mermaid-svg-uuxMr4eqw71rmmur div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-uuxMr4eqw71rmmur .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-uuxMr4eqw71rmmur rect.text{fill:none;stroke-width:0;}#mermaid-svg-uuxMr4eqw71rmmur .icon-shape,#mermaid-svg-uuxMr4eqw71rmmur .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-uuxMr4eqw71rmmur .icon-shape p,#mermaid-svg-uuxMr4eqw71rmmur .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-uuxMr4eqw71rmmur .icon-shape .label rect,#mermaid-svg-uuxMr4eqw71rmmur .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-uuxMr4eqw71rmmur .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-uuxMr4eqw71rmmur .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-uuxMr4eqw71rmmur :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 否
是
Figma 页面或 Frame 链接
Claude 调用 Figma MCP 获取设计上下文
组件层级 / 布局 / 样式 / 资源 / 变量
对照现有 Vue 组件与 Design Tokens
生成映射与实施方案
实现组件及响应式样式
构建与类型检查
浏览器渲染/截图对比
符合验收要求?
交付代码与差异报告
13.2 一段可复用的提示词
目标：把这个 Figma Frame 实现为 Vue 3 + TypeScript + SCSS 页面：
<粘贴 Figma Frame 链接>。先通过 Figma MCP 获取 Frame 的组件结构、布局信息、设计变量和可用资源；再阅读项目中已有的 UI 组件、路由、主题变量与 i18n 机制。不要盲目新建重复组件。先提交文件映射表与实现计划，经确认后编码。不得使用截图直接作为整页背景图。必须实现响应式行为、交互状态、可访问性和资源引用；最后运行类型检查与构建，输出对照清单。
13.3 还原设计稿最难的不是写 CSS
要特别关注：
- 组件复用：设计文件中的按钮、表单、卡片如何映射已有组件。
- Design Tokens：字体、间距、颜色、圆角是否来自变量，而不是每处硬编码。
- 响应式规则：设计稿只有一个桌面 Frame 时，不能擅自认定手机端的排版。
- 交互状态：默认、悬停、加载、禁用、错误、空态、弹窗。
- 业务正确性：设计稿不能取代真实接口、权限和校验逻辑。
- 视觉验收：必须在浏览器渲染后对比；只通过构建不代表像素表现正确。
13.4 常见问题排查
| 症状 | 优先检查 |
|---|---|
/mcp 看不到 Figma |
是否添加到正确作用域、是否需重启会话 |
| 连接存在但未授权 | OAuth 浏览器授权、账户登录、网络 |
| 无法读取某个文件 | Figma 文件访问权限、Frame 链接是否正确 |
| 只能得到部分设计信息 | 当前 MCP Tool 的能力和作用域、资源大小 |
| 生成代码与设计差距大 | 是否先获取设计上下文、是否进行了浏览器对比 |
14. 上下文压缩与清除：/context、/compact、/clear
**上下文窗口（Context Window）**是模型在当前轮次中能看到的文本、文件、工具结果、指令等信息的容量；它不是硬盘空间，也不等于会话文件保存的全部历史。
14.1 三个命令的区别
| 命令 | 功能 | 是否保留当前任务的关键历史 |
|---|---|---|
/context |
查看上下文使用情况 | 只检查，不主动压缩 |
/compact |
总结并压缩当前对话以释放容量 | 保留摘要，但部分细节可能丢失 |
/clear |
开启空上下文的新对话 | 不再沿用当前会话对话历史；历史会话可另行恢复 |
示例：
text
/context
/compact 保留当前需求、已确认设计决策、修改文件、尚未解决的风险和下一步任务
/clear14.2 为什么长会话会变得不稳定？
长时间开发时可能堆积：
- 大量构建日志；
- 重复的测试输出；
- 已经失效的设计方案；
- 多次修改后的临时结论；
- 与当前任务无关的文件内容。
即使会话还没到上限，这些内容也可能干扰模型找到最新、最可靠的约束。
14.3 压缩不是无损存档
一次压缩会把大量信息折叠为概要。对具体行号、临时工具输出、长错误堆栈、细小业务约束的保留效果不能保证。重要事实应该写进代码、测试、任务文档或 CLAUDE.md，而不是只存在于一段聊天历史里。
14.4 推荐的阶段总结方法
在阶段结束前要求 Claude 生成：
text
请总结以下内容，作为下一阶段上下文：
1. 当前任务目标与范围
2. 已确认的设计决策及原因
3. 修改文件和 Git 分支
4. 已运行的验证与结果
5. 遗留问题和阻塞项
6. 下一步最小可执行任务
不要把未经验证的推测写成事实。然后用 /compact 精炼历史，或将阶段摘要保存为项目文档，开启新会话。
15. CLAUDE.md：让项目约定跨会话生效
CLAUDE.md 是项目级或个人级的 Markdown 指令文件。它不是代码执行器，而是 Claude 在工作时参考的持续性上下文。
15.1 创建
进入项目后在 Claude Code 中执行：
text
/init
/memory也可以手工创建 CLAUDE.md。
15.2 常见作用域
| 路径 | 影响范围 | 推荐存放 |
|---|---|---|
~/.claude/CLAUDE.md |
用户级多个项目 | 个人通用偏好 |
./CLAUDE.md |
当前项目 | 团队约定、构建命令 |
./.claude/CLAUDE.md |
当前项目 | 另一种项目级组织位置 |
./CLAUDE.local.md |
当前本地项目 | 不适合提交的个人偏好；应忽略版本控制 |
./.claude/rules/*.md |
按规则或路径范围加载 | TS、API、测试等分主题规则 |
不同位置的内容可能叠加。避免在多处写互相矛盾的指令。
15.3 一个适合 Vue 3 项目的 CLAUDE.md
markdown
# 项目开发约定
## 技术栈
- Vue 3 + TypeScript + Vite + Pinia + Vue Router
- Element Plus + SCSS + pnpm
## 开发原则
- 优先复用已有组件、工具函数、类型和 API 封装。
- 不修改现有 API 参数或响应结构，除非需求明确要求。
- 不直接修改自动生成的 API 类型文件；优先修改生成源。
- UI 文案使用 vue-i18n，不在组件内新增硬编码文案。
## 修改流程
1. 先定位相关文件和现有实现。
2. 对跨模块修改先给出实施计划。
3. 每次只处理当前任务范围，避免无关重构。
4. 完成后运行适用的类型检查、Lint 和测试。
5. 交付修改文件、验证命令、结果和剩余风险。
## 约束
- 未经授权不得提交或推送远程仓库。
- 不输出、提交或修改 .env 中的真实密钥。
- 不执行数据库破坏性操作。15.4 写得越长越好吗？
不是。优先写：
- Claude 无法仅凭代码可靠推断的规则；
- 长期适用的团队约定；
- 常用命令和验收标准；
- 容易反复犯错的项目边界。
不要把一次性的调试日志、几十页 API 文档和所有需求都堆进根目录 CLAUDE.md。细分知识使用 .claude/rules/，可复用操作流程使用 Skills，权威业务资料保留在项目文档中。
15.5 CLAUDE.md、自动记忆和 Skill 的差别
CLAUDE.md：由团队维护的长期约定。- 自动记忆（Auto Memory） ：Claude 逐渐记录的经验、纠正和偏好，可通过
/memory查看管理。 - Skill：在任务需要时才加载的多步工作方法。
CLAUDE.md 是指令，不能阻止所有危险操作；真正的执行控制必须交给权限系统、Hooks 和沙箱。