环境搭建与基础交互

Claude Code 作为一款通用的编程 Agent，其核心优势在于不绑定特定模型，支持通过订阅制或 API Key 接入，甚至可配置国产模型如 GLM MiniMax。安装过程极为简便，只需在终端执行官方提供的安装命令即可。登录环节提供了两种标准路径：一是选择 Pro 或 Max 会员订阅，通过网页授权完成；二是使用官方 API Key 按 Token 用量计费。对于无法使用官方服务的用户，可通过设置环境变量来驱动其他模型，这体现了其高度的灵活性和兼容性。

在创建待办软件（my-todo）的实战中，Claude Code 展示了其自动化的代码生成能力。当用户输入需求后，Agent 会主动创建 index.html 文件，并弹出权限确认窗口。此时用户面临三种选择：单次授权（Yes）、本次会话自动通过（Yes, allow all edits during this session）或拒绝。为了演示效率，我们选择了自动模式，此时界面底部显示 accept edits on，表示后续文件操作将不再打扰用户。若需切换，可通过 Shift + Tab 键在三种模式间循环。这种设计允许用户在谨慎确认与高效执行之间自由切换，满足不同场景下的开发需求。

模式切换与规划模式（Plan Mode）

Claude Code 提供了三种核心交互模式，分别对应不同的工作流需求。默认模式（显示 ? for shortcuts）最为稳妥，每次文件修改前必询问用户；自动模式（显示 accept edits on）最为方便，自动通过所有编辑；而规划模式（Plan Mode）则专门用于复杂方案的探讨，只聊天不执行文件修改。在重构项目架构时，规划模式发挥了关键作用。用户可以将需求转化为详细的指令，例如将待办应用重构为 React + TypeScript + Vite 架构，并保留所有现有功能。

在规划模式下，用户可以使用 Shift + Enter 进行换行而不提交请求，或者使用 Ctrl + g 打开 VSCode 进行更便捷的编辑。Claude Code 会根据输入生成详细的计划，包括目标、项目清单和目录结构。用户可以对计划提出修改意见，例如“给每个待办事项增加优先级并用不同颜色标记”。Agent 会根据反馈调整计划，直到用户满意。最终，用户可以选择执行计划并进入自动模式，或者选择默认模式以保留对后续操作的掌控权。这种人机协作的迭代机制确保了复杂任务的可控性和准确性。

权限控制与后台任务管理

在执行重构计划时，Claude Code 会尝试执行终端命令，如 mkdir 创建目录或 npm install 安装依赖。由于终端命令涉及系统操作，Agent 默认会请求用户授权。即使处于自动模式，终端命令的执行仍需单独确认，这是出于安全考虑。官方提供了一个隐蔽选项 dangerously-skip-permissions，启动时加上此参数可跳过所有权限检测，实现全自动执行。然而，官方明确警告这具有潜在危险性，因为 Agent 将拥有与用户相同的终端权限，理论上可能破坏系统。因此，建议仅在信任 Agent 且追求极致效率时使用。

当启动开发服务器（npm run dev）时，服务会阻塞 Claude Code 的输入。此时，用户可按 Ctrl + b 将服务移至后台，从而继续与 Agent 交互。通过 /tasks 命令可查看后台任务状态，按 k 可关闭特定服务。这种后台任务管理机制使得用户可以在不中断开发环境的情况下，继续指导 Agent 进行代码修改。例如，在服务器运行的同时，用户可以要求增加语言切换功能，Agent 会实时修改代码，用户刷新页面即可看到效果。这种非阻塞式的交互体验极大地提升了开发效率。

版本回滚与功能迭代

Claude Code 内置了强大的版本回滚机制，允许用户在功能开发失败时快速恢复。当用户添加语言切换功能后，若发现需求不合理，可通过 /rewind 命令或双击 ESC 进入回滚页面。Agent 会在每次请求时创建回滚点，用户可选择回滚代码和会话、仅回滚会话或仅回滚代码。例如，用户选择回滚到增加语言选项之前的版本，Agent 会撤销所有相关修改，确保项目状态的一致性。这种细粒度的版本控制让用户敢于尝试新功能，降低了试错成本。

在实战中，用户甚至可以将项目回滚到最初的 index.html 单文件版本，以简化架构。在此之前，建议先通过 /tasks 关闭后台服务，避免文件冲突。回滚后，项目恢复到初始状态，所有新增功能被移除。这种可逆的开发流程体现了 Claude Code 作为生产级工具的核心价值：它不仅是一个代码生成器，更是一个具备完整生命周期管理能力的编程助手。通过结合规划模式、权限控制和回滚机制，用户可以高效、安全地完成从原型到生产的复杂开发任务。

回滚机制的局限性与 Git 的必要性

在开发过程中，Claude Code 提供了代码回滚功能，但其能力存在显著的边界限制。当用户尝试通过 ESC 键选择回滚点并恢复代码和会话后，系统提示开发服务器运转正常，但这实际上是一个误导性的提示，因为服务器已被关闭。执行 ls 命令查看目录时，用户发现除了预期的 index.html 文件外，还存在大量其他文件。这是因为 Claude Code 的回滚机制仅针对其自身写入的文件生效，而对于通过终端命令（如 mkdir、npm install 等）生成的文件，Claude Code 无法进行回滚操作。这一特性意味着回滚功能并不具备原子性或完整性，可能导致项目状态不一致。

“其实不是 [Bug]，这些文件是之前用终端命令创建的……Claude Code 只能回滚它自己写入的那些文件，至于由终端命令生成的文件 Claude Code 是没有办法回滚的。”

为了验证回滚效果，用户手动删除了非 index.html 的文件，并确认 index.html 的内容与回滚前一致。这一案例清晰地表明，虽然 Claude Code 能精准控制其生成的代码文件，但过度依赖其回滚功能是危险的。对于需要精准版本控制的项目，强烈建议使用 Git 进行版本管理，因为 Git 能够追踪所有文件变更，包括那些由外部命令生成的文件，从而提供比 Claude Code 内置回滚更可靠的安全网。

基于图片与 MCP 的 Figma 设计稿还原

当用户对 Claude Code 生成的页面不满意，并希望基于 Figma 设计稿进行精确还原时，有两种主要方法：直接图片上传和通过 MCP 协议集成。第一种方法是将 Figma 导出的 PNG 图片直接拖入 Claude Code 界面，或使用 Ctrl + V（注意：macOS 下也需使用 Ctrl + V 而非 Command + V）粘贴图片。虽然这种方法简单直接，但还原精度有限，特别是在字体、间距等细节上，Claude Code 很难通过视觉图片实现像素级的精确把握。

“很多时候可能还原的并没有那么精确，比如说字体啊、间距啊之类的，Claude Code 很难通过图片做到非常精确的把握。”

为了实现更高精度的还原，推荐使用 MCP (Model Context Protocol) 接入 Figma 官方提供的 MCP Server。首先，用户需执行安装命令安装 MCP Server，并通过 /resume 命令或 claude -c 参数恢复之前的对话上下文。安装完成后，通过 /mcp 命令查看已安装的 Figma 工具，并进行鉴权授权。授权成功后，Claude Code 能够调用 get design context 和 get screenshot 等工具，不仅获取设计稿的截图，还能获取组件间距、字体样式等结构化数据。

方法 操作方式 精度评估 适用场景
图片上传 拖拽 PNG 或 Ctrl + V 粘贴 低（难以把握细节） 快速原型、大致布局参考
MCP 集成 安装 Figma MCP Server 并鉴权 高（获取结构化数据） 精确还原、生产级 UI 开发

通过 MCP 方式，Claude Code 能够获取包含详细元数据的设计上下文，从而生成与 Figma 设计稿高度一致的 HTML 代码。尽管最终页面可能仍存在少量细节问题（如 undefined 或 NaN 错误），但整体还原度显著提升，证明了 MCP 在连接大模型与外部设计工具方面的强大能力。

上下文压缩与 CLAUDE.md 的持久化配置

随着开发任务的深入，Claude Code 的上下文窗口会积累大量信息，包括代码、工具调用结果等，导致Token 消耗增加且性能可能下降。此时，可以使用 /compact 命令对上下文进行压缩。压缩后，上下文内容大幅减少，仅保留核心信息，从而保障系统性能并降低后续任务的 Token 成本。此外，/clear 命令可彻底清空上下文，适用于当前任务与历史无关的场景，但需谨慎使用以免丢失重要信息。

“压缩完成了……全部的内存就只剩这么一点了，这样的话呢，不仅 Claude Code 的性能有了保障，后面再执行任务时 Token 的消耗量也会少很多。”

然而，上下文压缩和会话绑定存在可控性弱和跨会话丢失的问题。为解决这一问题，Claude Code 引入了 CLAUDE.md 文件，用于存储项目级或用户级的持久化指令。用户可通过 /init 命令生成默认的 CLAUDE.md 文件，并手动修改其内容，例如添加“每次回答最后必须追加 Happy Coding”的指令。修改后，重启 Claude Code 即可使新配置生效。

配置级别 文件位置 生效范围 共享性
项目级 当前目录 CLAUDE.md 当前项目所有用户 随 Git 共享
用户级 用户目录 CLAUDE.md 当前用户所有项目 不共享，独立配置

通过 /memory 命令，用户可以快速编辑项目级或用户级的 CLAUDE.md 文件。这种机制允许用户自定义 Claude Code 的行为准则，如项目规范、注意事项等，确保每次会话开始时，Claude Code 都能读取并遵循这些预设指令，从而提升工作的一致性和效率。

Hook 自动化与 Agent Skill 的工作流优化

Claude Code 的 Hook 功能允许用户在工具执行前后插入自定义逻辑，例如在代码写入后自动执行格式化。用户可通过 /hooks 命令配置 Hook，选择 PostToolUse（工具使用后）作为触发时机，并匹配 write 或 edit 工具。Hook 的具体逻辑通过 Shell 命令实现，例如使用 jq 解析 JSON 获取文件路径，再通过 xargs 传递给 prettier 进行格式化。

“这段命令其实就是使用 jq 来获得当前编辑好的文件路径，然后再使用 prettier 来格式化这个文件。”

Hook 配置支持三种保存级别：本地项目级（仅本机生效，写入 settings.local.json 并忽略）、项目级（所有项目用户共享，写入 settings.json 并随 Git 分发）和用户级（仅当前用户生效）。在本例中，用户选择了项目级配置，确保团队所有成员在代码写入后都能自动获得格式化的代码。测试显示，当 Claude Code 生成一行未格式化的 HTML 代码后，Hook 自动触发，将代码格式化为美观的多行结构，验证了 Hook 的有效性。

此外，对于重复性工作流（如每日开发总结），Agent Skill 提供了更优的解决方案。Agent Skill 可视为动态加载的 Prompt 说明书，用户可将其定义为标准化流程。例如，创建名为 daily-report 的 Skill，定义包含日期、摘要、详情的固定格式。通过这种方式，用户无需每日重复粘贴指令，只需调用相应的 Skill，Claude Code 即可自动生成符合规范的报告，显著提升工作流的自动化程度和一致性。

Agent Skill 的创建、调用与上下文共享机制

Agent Skill 是 Claude Code 中用于定义特定任务执行规范的模块化组件，其核心在于通过结构化文件控制大模型的意图识别与行为输出。创建流程始于在目标文件夹下新建 SKILL.md 文件，该文件严格划分为两个部分：前半部分包含 name（名称）和 description（描述），这是大模型决定是否调用该 Skill 的关键依据；后半部分则详细规定任务的具体执行格式，例如日报的排版要求。保存文件后，需重启 Claude Code 以加载新配置，此时输入 /skills 命令即可验证系统是否已识别该 Skill。

在实际调用中，存在两种模式。第一种是被动触发：用户输入自然语言请求（如“写一份每日总结”），大模型通过意图识别发现与已注册的 Agent Skill 匹配，经用户确认后自动执行，这种方式依赖模型的语义理解能力。第二种是主动触发：用户直接输入 /daily-report 命令并附带具体参数，这种方式省去了意图识别过程，结果更加可控。尽管演示中展示了基于自然语言的自动发现，但主动调用在需要精确控制流程的场景下更具优势。

“Agent Skill 运行的时候，它会完全继承并且共享你当前主对话的上下文。”

这种机制意味着 Skill 执行过程中的每一行日志、每一个思考步骤都会计入主对话的上下文窗口。因此，Agent Skill 最适合处理与当前上下文关联紧密且对上下文影响较小的任务，如根据当日开发记录生成总结。若用于处理大规模代码审查，会导致 Token 消耗飙升，甚至因记忆过载使模型变慢、变“傻”。

SubAgent 的独立上下文与代码审核实战

与 Agent Skill 不同，SubAgent 是一个拥有独立上下文、独立工具和独立 Skill 的完整代理实体，能够独立完成特定任务而不干扰主对话。创建 SubAgent 可通过 /agent 命令选择“Create new agent”，并指定作用范围为“项目级别”，以便团队共享。推荐使用“Claude 初始化”方式，由模型辅助生成初始描述，随后用户需手动编辑 SKILL.md 类型的配置文件。

在配置阶段，用户需定义元数据（名称、描述、模型选择、显示颜色）及具体执行逻辑。例如，创建一个用于代码审核的 SubAgent，可指定仅使用“Read-only tools”（只读工具）以确保安全，模型选用默认的 Sonnet，并设置绿色标识以便区分。配置文件中需明确审查准则（如针对 JS 和 CSS 的不同规范）及输出格式要求。重启 Claude Code 后，输入“给我做一下代码审核”，系统会调用该 SubAgent，并以绿色高亮显示其运行状态。

“SubAgent 则拥有自己完全独立的上下文……只有当它把活干完了，它才会拿着一个最终的执行结果来向你汇报。”

SubAgent 的核心优势在于上下文隔离。它在独立的对话窗口中处理任务，中间分析过程和代码阅读记录不会回传至主对话，仅最终结果被汇报。这使得主对话保持干净，避免了被琐碎中间过程撑爆上下文窗口。因此，SubAgent 更适合处理与当前上下文关联较小但对上下文影响巨大的任务，如大规模代码审查或复杂架构分析。

Plugin 插件生态与前端设计案例演示

Plugin（插件）被比喻为“全家桶安装包”，类似于 macOS 的 DMG 或 Windows 的 EXE 文件，它将 Skill、SubAgent、Hook 等多种能力打包，实现一键安装即获得整套高级功能。通过 /plugin 命令进入插件管理器，用户可在“Discover”或“Marketplaces”中浏览并安装插件。以 frontend-design 插件为例，安装时需选择生效范围（用户级、项目级或全局），确认后系统自动完成部署。

安装完成后，重启 Claude Code 并在 /plugin 的“Installed”标签页中可查看已安装的插件详情。frontend-design 插件本质上是一个 Agent Skill，安装后会在 /skills 列表中新增对应条目。验证其效果时，用户请求“按照 frontend-design 的要求，做一个代办软件，使用 HTML 来实现”。此时，Claude Code 不会立即写代码，而是先请求激活该 Skill，读取 Anthropic 官方沉淀的 UI 设计直觉。

最终生成的 index.html 文件在视觉呈现上显著优于默认生成效果：排版更加高级、色彩协调、交互符合现代审美。这证明了插件通过封装特定领域的最佳实践（如打破大模型常见的深紫色主题共性），能显著提升输出质量。目前插件市场涵盖 UI 设计、特定语言 LSP 等多种类型，用户也可参考官方文档，将自定义的 Skill 或 SubAgent 打包分享，构建团队或社区的知识共享生态。

“你可以把 Plugin 想象成一个全家桶的安装包……你只需要一键安装，Claude Code 就能瞬间获得整套高级能力。”