本文基于该UP主的视频，整理并总结了学习要点。
UP主：马克的技术工作坊
视频地址：点击跳转
最近，Claude Code 的热度居高不下，相信关注编程 Agent 的读者们已经纷纷上手体验过了。然而，想要将这款工具从入门阶段真正落地到生产环境，仅靠几条简单命令是远远不够的。因此，本文将从头到尾完整演示一遍 Claude Code 的实战流程。
文章主要分为以下四个部分：
环境搭建与基础交互
复杂任务处理与终端控制
多模态与上下文管理
高级功能的扩展与定制
文中将涵盖密集的知识点与清晰的节点，内容干货满满。花点时间读完这篇教程，即可彻底吃透 Claude Code，将其变成最顺手的生产力工具。
此外，市场上还有 Codex、OpenCode 等其他同类编程 Agent。事实上，它们在功能和使用上与 Claude Code 并无显著差异。因此，在掌握本文内容之后，完全能够一通百通，轻松上手其他同类产品。
首先，打开 Claude Code 的官方网站，进入安装页面。点击页面中的复制按钮，回到终端粘贴命令，即可开始安装 Claude Code。
安装完成后，用于开发一个简单的待办事项软件。使用 mkdir 命令创建一个目录，命名为 my-todo，后续所有代码都放在这个目录中。接着进入该目录，执行 claude 命令启动 Claude Code。
首次启动时，Claude Code 可能会提示登录。如果没有出现登录提示，可执行 --login 命令手动触发登录流程。
Claude Code 官方一共提供了两种标准接入方式：
订阅制：如果你已经购买了 Claude Pro 或 Claude Max 会员，直接选择此项即可。
按量付费：使用官方 API Key，按照 Token 用量计费，用多少花多少。
订阅用户选择第一种方式。选择后，Claude Code 会自动弹出一个网页页面，提示进行授权。点击同意，即可完成授权。此时终端会显示登录成功。关闭网页页面，回到终端按回车键，整个登录流程便结束了。
关于驱动模型的补充说明
如果无法使用 Claude 官方订阅或 API，也可以使用国产模型（如 GLM、MiniMax 等）来驱动 Claude Code。Claude Code 作为一个通用的编程 Agent，本身并不与 Claude 的模型绑定，完全支持替换为其他模型。使用国产模型的方法非常简单，只需设置几个环境变量即可，具体步骤这里不再赘述，可自行搜索获取。
开始实现待办软件
回到 Claude Code 的使用流程。本次需求是开发一个待办软件，使用 HTML 实现。将这一需求告知 Claude Code 后，它便开始自动工作。
Claude Code 首先尝试创建一个名为 index.html 的文件，并询问是否同意。此时共有三个选项：
单次授权（Yes）：仅同意创建当前这一文件。如果后续还需创建其他文件，Claude Code 会再次询问确认。
本次会话全部允许（Yes, allow all edits during this session）：选中后，在当前对话期间，后续所有文件操作都会自动通过，不再反复打扰。
不同意：选择后可以继续输入新的想法，Claude Code 会根据新的输入生成代码并再次请求确认。
为了演示方便，这里选择第二项，开启自动模式，将后续文件操作全权交由 Claude Code 处理。选择完成后，输入框下方会显示一行文字 accept edits on，表示当前已开启自动统一模式。
模式切换方法
如果需要更换模式，可以使用 Shift + Tab 键进行切换。按下后，模式会变为 plan mode（规划模式）。该模式主要用于探讨复杂方案，只进行对话交互而不执行具体操作。具体用法将在后续内容中详细介绍。
模式切换与三种模式详解
再次按下 Shift + Tab，底部的 plan mode 消失，取而代之的是一行灰色提示：? for shortcuts（按问号显示快捷键）。这并非一个新的模式，只是 Claude Code 的一个快捷提示，与当前模式无关。此时，Claude Code 没有标注任何模式，这种无标注的状态即为默认模式。回顾首次进入 Claude Code 时的状态，使用的正是默认模式。在默认模式下，Claude Code 表现最为谨慎，每次创建或修改文件前都会询问用户意见。
由此可见，Shift + Tab 键用于在三种模式之间循环切换。总结如下：
后续会详细解释规划模式的具体用法。
再次按下 Shift + Tab，切换回 accept edits on 模式。
查看生成的文件
选择好模式后，可以查看之前 Claude Code 生成的 HTML 文件。除了通过文件管理器找到并双击打开外，还可以在 Claude Code 内部直接执行终端命令来打开文件。
首先输入感叹号 !，Claude Code 会进入 Bash 模式，此时可以运行任意终端命令。接着输入：
bash
open index.html即可打开该 HTML 文件。待办软件的初始实现一次成功。但其中存在一个小问题：所有代码都写在了单个 index.html 文件中。对于小项目尚可接受，但随着项目规模扩大，维护将变得困难。因此，建议尽早迁移到 React + TypeScript + Vite 这种现代架构，实现代码的模块化管理。
使用规划模式重构项目
重构架构属于较大工程，适合先确定细节再动手。此时正是规划模式（plan mode）的适用场景——专门用于讨论方案、确定细节。
首先关闭当前页面，回到终端，按 Shift + Tab 进入 plan mode，然后输入重构请求：
将当前的待办应用重构为使用 React + TypeScript + Vite 的项目。
输入框的换行与编辑器替代方案
在输入框中，如果需要换行，直接按回车会导致问题提交。正确的换行方式是按下 Shift + Enter，之后即可继续编写需求，同时保留现有功能。如果 Shift + Enter 无法使用，通常是因为 Claude Code 版本较旧，需要升级。
另外，如果觉得终端的输入框不够便捷，可以使用现代化的外部编辑器来替代。按下 Control + G，Claude Code 会自动打开一个 VS Code 标签页，在其中编辑会方便许多，可以随意使用回车键而不用担心误提交。需要注意的是，这要求系统已预先安装 VS Code。
在 VS Code 标签页中补充完需求（例如加上“且 UI 风格保持一致”），保存后关闭标签页。此时 Claude Code 会将 VS Code 中的全部内容自动填入输入框，按下回车即可提交请求。提交后，Claude Code 开始工作，稍作等待即可。
执行计划时的模式细节
计划制定完成后，将滚动条向上移动，可以查看计划的具体内容。该计划从目标清单到目录结构等信息覆盖得相当完善。计划末尾会询问是否执行，并提供三个选项：
执行计划，并进入统一模式：后续修改文件前不再询问用户。
执行计划，但使用默认模式：后续每次写入文件前都会询问用户。
继续修改计划：如果对当前计划不满意，可以继续输入修改意见，Claude Code 会根据新要求重新生成一份计划。
假设对计划不满意，选择第三项，提出修改意见：为每个待办事项增加优先级（如高、中、低），并用不同颜色标记。按下回车后，Claude Code 开始修改计划。
稍作等待后，Claude Code 生成了一份新计划。从最后的测试部分可以看出，优先级需求已被纳入考虑。此时选择第一项：执行计划并进入自动统一模式，即后续修改文件时不再询问。按下回车，当前模式切换为 accept edits on，与选择一致。随后 Claude Code 开始执行计划，执行时间较长，需耐心等待。
关于模式作用范围的说明
Claude Code 在执行过程中暂停，尝试使用 mkdir 创建目录，并询问是否同意。这里需要注意：虽然之前已经设置为 accept edits on 模式（自动统一模式），但该模式仅对写入文件的操作生效——即修改或创建文件内容时不会询问。而创建目录（mkdir）属于文件系统操作，并非文件写入，因此仍然会触发询问。这是模式作用范围的正常边界，并非异常。
终端命令的权限机制
Claude Code 将执行终端命令视为较危险的操作，因此需要获得同意才能继续。值得注意的是，系统中没有提供“自动执行所有终端命令”的全局选项。即使选择了第二项（允许自由访问 SRC 目录），也仅仅表示对特定目录的访问不再询问，其他终端命令仍然需要确认。
如果希望完全跳过所有权限确认步骤，可以在启动 Claude Code 时添加一个选项：--dangerously-skip-permission。该参数中的 “dangerously” 一词明确表明了官方对风险的警告。添加该参数后，Claude Code 将不再对任何终端命令进行权限检测——无论是安装依赖、删除文件还是创建目录，均不会再征求同意。
演示示例：
进入 my_todo 目录，执行以下命令启动 Claude Code：
claude --dangerously-skip-permission启动后，模式会变为 y pass permission，表示权限检查已被完全跳过。
--dangerously-skip-permission 选项的双刃剑效应
该选项是一把双刃剑。一方面，它能极大提升开发效率——实现全自动执行，无需频繁确认。另一方面，开启该选项后，Claude Code 理论上拥有与当前终端相同的权限。虽然 Claude Code 只有在极端异常的情况下才可能对系统造成破坏（这种概率微乎其微），但作为一个负责任的提醒：该选项会让 Claude Code 彻底绕过所有权限检测，因此仍然存在理论上的风险。是否为了效率承担这一风险，由使用者自行决定。
演示结束后，回到原示例中。此处不使用该选项，而是选择第二项：只允许 Claude Code 以后自由访问 src 目录。按回车继续。
关于 npm 命令与任务后台管理
Claude Code 询问是否允许执行 npm install 命令，选择“以后都同意”。随后，Claude Code 尝试使用 npm run dev 启动开发服务器。为了后续手动启动并解释任务相关概念，此处先选择“取消”。
Claude Code 因请求被拒，询问应当做什么。可以告知它：该命令稍后手动执行，只需确保其他部分完成即可。Claude Code 确认后，一切正常。此时手动运行启动命令，服务器启动成功。打开提供的链接查看页面效果——待办软件的基本功能（增加事项、调整优先级等）均正常。
服务阻塞与后台任务管理
需要注意的是，运行中的服务会阻塞 Claude Code 的响应。例如，在服务运行期间输入新请求，Claude Code 不会立即回应。解决方案：按 Control + B 将当前服务放置到后台。操作后，Claude Code 即可处理新请求。此时界面会提示存在一个后台任务。输入 /tasks 可以查看所有后台任务，列表中包含之前启动的 npm run dev 命令。按 K 可以关闭该服务。按 ESC 可返回原界面，让服务继续在后台运行，以便后续修改能实时看到效果。
添加功能与回滚操作
假设需要增加一个切换语言的功能：在页面右上角增加一个选项，支持中文和英文切换，默认中文。输入该请求后，Claude Code 开始执行。完成后刷新页面，切换语言的选项已出现，且切换效果符合预期。但若判断该功能并非必需，可以执行回滚。
Claude Code 支持回滚功能，对应命令为 /reminds。更简便的方法是按两次 ESC 进入回滚页面。每次输入请求时，Claude Code 都会自动创建一个回滚点。若要回滚到增加语言选项之前的版本，选择对应的回滚点，按回车后出现四个选项：
回滚代码和会话
仅回滚会话
仅回滚代码
放弃回滚
选择第一项“代码和会话都回滚”。回滚成功后，刷新页面确认语言切换选项已消失。
回滚前的后台任务清理
如果需要回滚到更早的版本（例如只有 index.html 的初始版本），同样使用回滚功能。但在此之前，建议先关闭后台运行的 npm run dev 服务，因为回滚后相关文件将不存在，该服务已无意义。输入 /tasks 查看后台任务，按 K 结束当前服务。此时 Claude Code 可能提示“开发服务器运转正常”，该提示属于误报，可忽略——实际上开发服务器已被成功关闭。
回滚后的文件列表与限制说明
服务器关闭后，开始执行回滚流程：按两次 ESC 进入回滚页面，选择最初重构代码时的回滚点，再选择第一项“恢复代码和会话”。回滚完成后，检查当前目录下是否仅剩 index.html 文件。
使用 ls 命令列举目录下的文件列表。执行结果显示，除了 index.html，目录下还存在许多其他文件，默认仅显示其中一部分。按下 Control + O 可显示全部文件列表——文件总数并不少。这并非 Claude Code 的异常，而是由于以下原因：
回滚功能的边界：Claude Code 只能回滚由自身写入的文件。而通过终端命令（如 mkdir、npm install 等）生成的文件，Claude Code 无法回滚。因此，建议不要过度依赖 Claude Code 的回滚功能；如需精准回滚，使用 Git 更为可靠。
手动清理与验证
问题影响不大。index.html 由 Claude Code 自身把控，确认回滚成功。其他文件可手动删除：打开文件管理器，删除除 index.html 外的所有文件。回到终端再次执行 ls 命令，文件列表已仅剩一个。随后使用 open 命令打开该 HTML 文件验证效果，与回滚前的 index.html 表现一致。至此，回滚流程彻底完成。
使用设计稿图片驱动 Claude Code
假设对 Claude Code 生成的页面始终不满意，可以自行在 Figma 中设计界面（示例样式如图）。希望 Claude Code 仿照该界面实现，具体方法如下：
在 Figma 中将当前设计稿导出为 PNG 图片（点击
Export Frame即可）。导出成功后，回到文件管理器，可以看到图片已成功生成。
将设计稿图片传递给 Claude Code 的两种方法
方法一：直接拖拽
将导出的 PNG 图片直接拖拽到 Claude Code 的界面中。界面中会出现 image 2 的标识，表示 Claude Code 已成功接收图片。
方法二：复制粘贴
复制图片文件，然后在 Claude Code 中使用快捷键 Control + V 进行粘贴（注意：即使在 macOS 系统下，也需使用 Control + V 而非 Command + V，后者无效）。粘贴成功后，图片即被上传。随后可以继续输入请求，要求 Claude Code 根据图片修改代码。
方法局限性说明：上述基于图片的方式在实际使用中可能还原不够精确，例如字体、间距等细节难以通过图片精确把握。因此，存在另一种更为精确有效的方法——使用 MCP（Model Context Protocol）来实现 Figma 设计稿的还原。MCP 是大模型与外界沟通的渠道，关于 MCP 的使用方法和原理已有相关讲解，有需要的读者可以自行查阅。
使用 claude.md 文件管理项目上下文
压缩功能虽然有效，但压缩结果的可控性不强，且无法手动修改。此外，无论是否压缩，上下文都与某个特定会话绑定，下次启动 Claude Code 时仍需恢复到该会话才能获取历史信息。
是否存在一种方案，让 Claude Code 每次启动时都能读取预设的固定信息（如项目描述、用户需求、注意事项等），从而更好地为当前任务服务？答案是肯定的——使用 claude.md 文件。
生成与转换
执行 /init 命令，Claude Code 会自动生成一份 claude.md 文件，存放在当前目录中。文件内容默认为英文。可以要求 Claude Code 将其转换为中文。
自定义内容
claude.md 中的内容可以任意修改。例如，在文件末尾添加一条注意事项：“每次回答的最后必须追加一句 happy coding”。修改后退出 Claude Code 并重新进入，Claude Code 会重新加载最新的 claude.md 文件。随便输入一个简单请求（如 hi），Claude Code 的回复末尾确实会出现 happy coding，证明文件已生效。
试验完毕后，若需移除该注意事项，可直接编辑
claude.md文件删除末尾行。重启后再次测试，happy coding即消失。
打开 claude.md 的快捷方法
除了通过文件管理器或 VS Code 手动打开，还可以在输入框中执行 /memory 命令。此时会列出两种类型的 claude.md 文件：
项目级别：位于当前目录，仅对当前项目生效。
用户级别：位于用户目录，对当前用户的所有项目生效。
选择对应项后，文件会自动打开，无需手动在文件管理器中查找。
Hook 功能：在工具执行前后运行自定义逻辑
Claude Code 提供 Hook 功能，允许在特定时机（如工具使用前、工具使用后、工具使用失败时等）执行自定义逻辑。例如，可以配置一个 Hook，在 Claude Code 写完代码后自动运行格式化命令，使最终代码更加美观、符合规范。
配置步骤
执行
/hooks命令进入 Hook 配置页面。选择执行时机，例如
Post Tool Use（工具使用后）。选择
Add New Matcher，指定需要触发的工具名称。此处填写Write或Edit，表示在创建或编辑文件后执行 Hook。选择
Add New Hook，输入具体的格式化命令。
格式化命令示例
echo '{}' | jq '.file_path' | xargs npx prettier --write命令解析：
运行 Hook 时，Claude Code 会传入一个 JSON 对象，其中
file_path字段表示刚刚编辑完成的文件路径。使用
jq（解析 JSON 的命令行工具）提取file_path的值。将提取到的路径通过
xargs传递给npx prettier --write命令，完成文件格式化。
保存级别选择
配置完成后按回车确认，Claude Code 会询问 Hook 的保存位置，共有三个选项：
本地项目级别：Hook 仅在本机当前项目中生效。选择此项后，Claude Code 会将配置放在项目目录下的
settings.local.json中，并将该文件自动添加到.gitignore，因此不会共享给其他协作者。（其他选项未在原文详述，通常包括用户级别或全局级别）
Hook 保存级别的三个选项
配置 Hook 时，Claude Code 会询问保存位置，共有三个选项：
本地项目级别：Hook 仅在本机当前项目中生效。配置保存在
settings.local.json中，该文件会被自动加入.gitignore，不会共享给其他协作者。项目级别（共享）：所有使用该项目的用户都能用到此 Hook。对应的配置文件为
settings.json，该文件会随 Git 分发给所有人。用户级别：仅对当前用户生效，配置保存在用户目录中，每个用户独立拥有，互不影响，也不会随项目分发。
以下选择第二个选项（项目级别共享），使所有使用该项目的人都能用到该 Hook。
测试 Hook 的格式化效果
Hook 创建完成后，按 ESC 退出配置页面。输入测试请求：创建一个新文件 test.html，内容为随意一行 HTML 代码。提交请求后，Claude Code 确实将内容全部写入了一行。
同意执行后，查看最终生成的 test.html 文件内容。可以看到文件内容已被格式化，不再是初始的一行代码。这说明之前配置的 Hook 已成功生效——在 Claude Code 写入文件后，Hook 自动启动了格式化命令，将文件重新格式化为美观的多行结构。Hook 功能演示至此结束。
Agent Skill 的创建与使用
假设需要每天撰写一份开发总结，且必须遵循固定格式（如包含日期、开发摘要、开发详情等）。虽然可以将格式要求粘贴到输入框中让 Claude Code 生成，但每天重复粘贴非常繁琐。这类场景非常适合使用 Agent Skill。可以将其理解为一份给大模型看的说明书，一个动态加载的 Prompt。
创建 Skill 的步骤
创建文件夹：在用户目录下的
~/claude/skills/文件夹中创建一个新文件夹，命名为daily-report。打开文件夹：使用 VS Code 打开该文件夹。
创建
skill.md文件：在该文件夹中创建skill.md，填入以下内容：
---
name: daily-report
description: 生成每日开发总结报告
---
# 日报格式要求
- 必须包含日期
- 必须包含开发摘要
- 必须包含开发详情
（可根据实际需求扩展）文件分为两部分：
Frontmatter（
name和description）：定义 Skill 的名称和描述，Claude Code 据此判断是否使用该 Skill。具体描述：详细说明日报需要遵循的格式。
使用 Skill
创建完成后，关闭新开的终端标签页，重启 Claude Code。执行 /skills 命令，可以看到 Claude Code 已发现新创建的 Agent Skill。
在输入框中输入请求：“写一份每日总结”。提交后，Claude Code 识别出该请求与 daily-report Skill 相关，并请求使用该 Skill。同意后，每日总结即按要求的格式生成完毕。这就是 Agent Skill 的基本使用方法。
Agent Skill 的主动调用
除了由大模型自动发现并发起调用外，Agent Skill 也可以被主动调用：输入 /daily-report 后跟具体请求即可。这种方式与自动调用的效果相同，但省去了大模型意图识别的过程，由用户直接指定 Skill，结果更加可控。此处不再演示具体过程，可将其删除。Agent Skill 的基本用法至此介绍完毕，更多高级用法可参考相关视频。
Sub Agent：独立的子代理
Sub Agent 是一个独立的 Agent，拥有自己的上下文、工具、Skill，能够独立完成特定任务。以下以创建一个用于代码审核的 Sub Agent 为例。
创建步骤
执行
/agent命令，选择Create new agent。选择 Agent 类型：项目级别（使用该项目的人均可使用）或用户级别。此处选择项目级别。
选择创建方法：推荐使用 Claude Code 的初始化方法（而非完全手动创建）。
描述该 Agent 的任务：输入“这是一个用于代码审核的 sub agent，在用户要求代码审核时调用它”。按回车后，Claude Code 开始生成 Sub Agent。
选择该 Sub Agent 可用的工具：选择
read only tools（只读工具），其余工具取消勾选。选择模型：默认使用 Sonnet。
选择 Sub Agent 在终端中展示的颜色（例如绿色）。Claude Code 会据此生成 Sub Agent。
编辑 Sub Agent 描述
生成的 Sub Agent 描述默认为英文，且可能与预期不符。按 E 键编辑描述，将其整体替换为适合当前场景的版本。Sub Agent 的结构与 Agent Skill 类似，分为两部分：
元数据：包括名称、描述、使用的模型、颜色等。
具体任务描述：例如代码审核的准则。以下为一个示例：
---
name: code-reviewer
description: 代码审核子代理
model: sonnet
color: green
---
# 审查准则
- 针对 JavaScript：检查潜在错误、代码风格、性能问题。
- 针对 CSS：检查兼容性、冗余样式、命名规范。
# 输出格式
- 按文件列出问题点，给出修改建议。替换完成后，重启 Claude Code 使配置生效。
Sub Agent 的代码审核演示
重启 Claude Code 后，提交请求：“进行代码审核”。Claude Code 会调用之前创建的 Sub Agent，并将任务描述传递给它处理。Sub Agent 在终端中以绿色显示（与配置一致）。运行一段时间后，Sub Agent 输出代码审核报告，报告内容与 Sub Agent 描述文件中设定的审查准则相符。此即 Sub Agent 的基本使用方法。
Agent Skill 与 Sub Agent 的区别
有人可能会问：Agent Skill 和 Sub Agent 看起来很相似，它们的区别是什么？
最大的区别在于上下文的处理方式：
Agent Skill：运行时完全继承并共享当前主对话的上下文。Skill 执行过程中的每一行日志、每一个思考过程都会记录到当前上下文中。如果让 Skill 去审核一个拥有数万行代码的项目，这些中间过程会逐步填满上下文窗口，导致 Token 消耗飙升，Agent 也会因记忆过载而变慢、变“傻”。因此，Agent Skill 最适合处理那些与上下文关联较大、但对上下文影响较小的任务，例如根据当天的开发过程写一份每日总结。
Sub Agent：拥有完全独立的上下文。启动 Sub Agent 时，它会开辟一个全新的对话窗口，在该窗口内查看的所有代码、生成的所有中间分析过程都不会回传到主对话。只有当 Sub Agent 完成任务后，它才会将最终的执行结果返回给主对话。这样主对话始终保持干净，不会被琐碎的中间过程撑爆。因此，Sub Agent 适合处理那些与上下文关联较小、但对上下文影响较大的任务。
根据具体场景选择合适的方案。
插件（Plugin）的使用
Plugin 可以理解为一个“全家桶”安装包，类似于 macOS 的 DMG 文件或 Windows 的 EXE 文件。它将多个 Skill、Sub Agent、Hook 等能力打包在一起，只需一键安装，Claude Code 即可获得整套高级能力。
安装插件示例：Frontend Design
执行 /plugin 命令进入插件管理器。管理器包含三个选项：Discover（发现新插件）、Installed（已安装的插件）、Marketplaces（插件市场）。在 Discover 中找到 frontend-design 插件，按回车安装。接下来选择安装范围（对当前用户生效、对当前项目生效、或对当前用户的当前项目生效），保持默认即可。安装完成。
插件说明：frontend-design 是一个用于前端设计的插件。通常大模型生成的前端界面存在一定的共性（如深紫色主题等），该插件据说可以打破这种共性，让界面更加美观。
安装完成后，重启 Claude Code。使用 mkdir 命令新建一个目录（例如 my-app），进入该目录，再次启动 Claude Code。
启动后，输入 /plugin 进入插件管理器，选择 Installed，可以看到已安装的 frontend-design 插件。按回车查看详情，该插件的主要组成元素是一个名为 frontend-design 的 Agent Skill。验证方法：输入 /skills，列表中确实出现了 frontend-design Skill。安装该插件本质上就是安装了对应的 Agent Skill。有些插件可能包含 Agent Skill、MCP、Hook 等多个组成元素，可以一次性安装整套解决方案。
测试 Frontend Design 插件
在输入框中提交请求：“按照 frontend-design 的要求做一个待办软件，使用 HTML 实现”。Claude Code 并未立即开始写代码，而是先识别到用户要求使用 frontend-design 规范，并请求使用该 Agent Skill。同意后，Claude Code 获得了 Anthropic 官方沉淀的一整套 UI 设计直觉，然后开始编写代码。
编写完成后，使用 ls 命令查看当前目录下的文件，只有一个 index.html 文件。使用 open 命令打开该文件查看效果。与之前的基础 Demo 相比，新界面的风格完全不同：排版更加高级，色彩更加协调，交互也更符合现代审美。这就是 frontend-design 插件的能力。
插件生态与总结
目前 Claude Code 的插件市场正在迅速增长。除了 UI 设计类插件，还有一些针对特定编程语言的 LSP 插件等。如果自己配置得当，也可以参考官方文档，将 Skill、Sub Agent、MCP 等打包成插件，分享给团队或社区。
至此，Claude Code 的核心功能讲解完毕。