实战二：Claude 从零开始网页制作
打开 "index.html" 文件，我们就可以看到一个简单的极简高级风个人简历网站。
极简高级风个人简历网站
创建项目
这个项目的目标是：实现一个简单的网页，用于展示个人简历。
首先，在本地新建一个文件夹，命名为 my-resume。
代码块
Plain Text
mkdir my-resume
然后，打开终端，进入这个文件夹。
代码块
Plain Text
cd my-resume
输入 claude 启动 Claude Code。
代码块
Plain Text
claude
然后，输入以下 prompt，让 Claude Code 帮我们生成一个极简高级风个人简历网站代码。这里，我选择的是 MinMax 2.1 模型。
代码块
Plain Text
生成极简高级风个人简历网站代码（HTML+CSS+JS），响应式，模块：基本信息/技能/项目/联系方式，配色以黑白灰为主。
经过短暂的等待，Claude Code 提醒我们是否创建 "index.html" 文件。
这里，有三种选择：
•
"Yes"
•
"Yes, allow all edits during this session(shift+tab)"
•
"No"
Claude Code 创建文件
✅
我们选择 "Yes, allow all edits during this session(shift+tab)"，然后按 "Enter" 键。这样 Claude Code 会将生成的代码保存到 "index.html" 文件中。
第一个知识点：Claude Code 三种权限模式
Claude Code 有三种权限模式：
•
默认权限模式（? for shortcuts）
•
编辑模式 (accept edits on)
•
计划模式 (plan mode on)
我们可以通过 Shift+Tab 键来切换权限模式。
Claude Code 切换权限模式
👀
从截图可以看到，用 Shift+Tab 键来切换权限模式，底部状态栏会显示当前的权限模式。默认权限模式下，底部状态栏会显示 "? for shortcuts"。再按一次 Shift+Tab 键，就会进入编辑模式。再按一次 Shift+Tab 键，就会进入计划模式。再按一次 Shift+Tab 键，又回到默认权限模式。
默认权限模式
启动 Claude Code 后，是在默认模式下。我们可以和 Claude Code 进行对话。如果 Claude Code 认为我们需要编辑文件，会询问我们是否允许编辑。也就是上面提到的三种选择。
"Yes"：仅批准当前这一次的文件编辑操作。下次 Claude Code 要编辑文件时，会再次询问。
"Yes, allow all edits during this session(shift+tab)"：批准当前编辑，并且在整个会话期间自动接受所有后续的文件编辑，不再询问。如果选择这个选项，就会进入编辑模式。
"No"：不允许编辑文件。那么 Claude Code 就会什么也不做。
编辑模式 (accept edits on)
关于 "Yes, allow all edits during this session(shift+tab)" 这个选项，我需要特别说明一下。上面说了，在整个会话期间自动接受所有后续的文件编辑，不再询问。但是，如果还要 Shell 命令，比如 git add . 或者 git commit -m "..." 等，那么 Claude Code 就会询再次询问是否允许操作。
所以，不要认为选择了 "Yes, allow all edits during this session(shift+tab)" 就以为 Claude Code 会自动执行所有操作。其实，你还是要时刻注意 Claude Code 的提示，是否需要你手动执行某些操作。
如果你想让 Claude Code 自动执行所有操作，完全不用管它。你可以在启动 Claude Code 时，在后面加上 --dangerously-skip-permissions 参数，这样 Claude Code 就会自动执行所有操作。
代码块
Plain Text
Claude Code 自动执行所有操作
当然，这种做法是非常危险的，因为 Claude Code 会自动执行所有操作，包括删除文件、修改文件等。所以，不要轻易使用这个参数。 从截图可以看到，如果你运行这个命令，Claude Code 会有一个红色警告。
⚠️
不要轻易使用这个参数。它不限于特定目录，而是绕过整个系统的所有权限提示。非常危险，可能导致数据丢失、系统损坏或数据泄漏。
建议：仅在隔离环境（如无网络访问的容器或虚拟机）中使用此标志。
编辑模式下，我们可以直接在文件中进行编辑。
计划模式 (plan mode on)
如果任务复杂，你无法确定 Claude Code 是否符合你的要求，那么你可以进入计划模式。计划模式下，它会先读取和分析你的代码，它不会修改文件。
还是以我们这个项目为例，如果你用代码编辑器打开 "index.html" 文件，你会看到 CSS、JS 等代码是混在一起的。这很不利于我们阅读和维护。
所以，我们切换到计划模式，让 Claude Code 帮我们规划任务。
在 Claude Code 输入框中输入以下 prompt：
代码块
Plain Text
将这份个人简历网站代码拆分为3个独立文件
然后，按 "Enter" 键。Claude Code 会规划出任务的步骤。
代码块
Plain Text
将 index.html 文件中的 CSS、JS 等代码分开。
Claude Code 规划任务
从截图可以看到，Claude Code 规划了详细的任务步骤。一定要仔细阅读，确保 Claude Code 的规划是正确的。
规划任务完成后，Claude Code 会给出 4 个选择：
"Yes, clear context and auto-accept edits (shift+tab)"：它会清除没有必要的上下文，并自动接受所有后续的文件编辑，不再询问。如果选择这个选项，就会进入编辑模式。
"Yes,auto-accept edits"：和上面选项一样，但不会清除上下文。
"Yes, manually approve edits"：和上面选项一样，但每次都要手动批准文件编辑。
最后，一个是输入框，如果你对它给出的建议不满意，可以在这里和它继续对话，让它重新规划任务。
这里我选择 "Yes, clear context and auto-accept edits (shift+tab)"，然后按 "Enter" 键。Claude Code 会开始执行任务。
小贴士
在对话过程中，如果你觉得 Claude Code 的规划不太合理了，你可以随时按 "Esc" 键，中断当前任务，然后让 Claude Code 重新规划任务。
有时候你觉得 Claude Code 的规划还不错，但是有一些细节需要调整的。这个时候，你可以直接在输入框中继续和 Claude Code 进行对话，告诉它你需要调整的细节。这样它就会根据你的反馈来调整规划任务的步骤了。不需要中断当前任务。
第二个知识点：Claude Code 历史会话 /resume
如果你不小心关闭了终端，你在对应的目录下，重新启动 Claude Code。你会发现，之前的会话不见了。不用担心，Claude Code 会自动保存会话。你只需要在启动 Claude Code 时，加上 -c 参数即可。
代码块
Plain Text
claude -c
这样，Claude Code 会自动加载之前的会话。或者，你在新启动 Claude Code 里，输入 /resume 就会列出当前目录下所有会话记录，如果太多，还可以在搜索框中进行搜索。
Claude Code 历史会话
选择你想要的会话，然后按 "Enter" 键就可以加载之前的会话。
Claude Code 支持很多反斜杠 / 命令，比如 /resume、/rename、/clear 等。
第三个知识点：给会话命名 /rename
Claude Code 会自动保存会话，并给会话命名。如果你对 Claude Code 给的命名不满意，可以输入 /rename 加空格，给当前会话重新命名。注意，是只能给当前会话命名，不能选择历史会话进行命名。如果你想给历史会话命名，你需要先加载历史会话，然后再输入 /rename 进行命名。
Claude Code 给会话命名
输入 /resume 列出历史会话，你会发现，之前的会话已经被重新命名了。
Claude Code 历史会话命名
第四个知识点：清除会话 /clear
如果你想开启一个新的会话，你会发现，Cluade Code 竟然没有提供开启新会话的选项。当然，你可以在终端再次输入 claude 来开启一个新的会话。如果你觉得当前的会话没有什么价值了，你也可以选择清除当前会话。输入 /clear，然后按 "Enter" 键，就会清除当前会话。
官方建议在处理不相关的任务之间频繁使用 /clear 来重置上下文。这样可以确保每个任务都有一个干净的上下文环境，避免不同任务之间的干扰。
第五个知识点：回滚 /rewind
在联系方式一栏，我发现漏了手机号码。于是，我在 Claude Code 输入框中输入以下 prompt：
代码块
Plain Text
请帮我在联系方式一栏添加手机号码。
Claude Code 回滚
后来，你觉得添加的手机号码不太好，容易暴露隐私。你想回滚到之前的版本。Claude Code 提供了回滚功能。输入 /rewind，选择你想回滚的版本，然后按 "Enter" 键，会有几个选项：
"Restore code and conversation"：它会恢复代码和对话记录。
"Restore conversation"：它只会恢复对话记录，不会恢复代码。
"Restore code"：它只会恢复代码，不会恢复对话记录。
"Never mind"：取消回滚。
这里我选择 "Restore code and conversation"，然后按 "Enter" 键。Claude Code 会将代码和对话记录都回滚到之前的版本。
⚠️
注意，回滚功能只会回滚 Claude Code 生成的代码，不会回滚你手动修改的代码和 Bash命令执行的结果。
如果，你用的是 vscode Claude Code 插件，你会发现没有 /rewind这个命令的。其实是有的，你只需移动到你之前的对话上，会有一个返回小图标，点击它就有三个选项和上面一样了。
vscode Claude Code 回滚
第六个知识点：压缩上下文 /compact
大模型的上下文是有限的，Claude Code 状态栏会显示当前会话使用的上下文占用情况。当上下文占用过多时，默认是在约 95% 容量时触发压缩上下文的功能。
你也可以手动触发压缩上下文的功能。输入 /compact，后面写上你想保留的上下文内容，Claude Code 保留你指定的上下文内容。
第七个知识点：初始化 /init
目前，我们的项目还比较简单。随着项目的复杂度增加，我们可能会遇到一些问题，比如你生成的代码结构是：HTML、CSS、JS 分开存放的，但是在下次会话中创建新的界面时，Claude Code 却又把它改成了：HTML、CSS、JS 混在一起。
每次，重复地告诉 Claude Code 你的项目规范和要求，是非常麻烦的。
🍀
我们可以在 CLUADE.md 文件中，写上我们项目的规范和要求。这样，在每次会话开始时，Claude Code 都会读取 CLUADE.md 文件中的内容，来指导它的行为。
比如，在 CLUADE.md 文件中，我们可以写上以下内容：
代码块
Plain Text
# 项目规范
代码结构：HTML、CSS、JS 分开存放。
代码风格：使用 2 个空格进行缩进，变量命名使用驼峰命名法。
工作流：每次修改代码后，都要进行代码审查，确保代码质量。
你也可以让 Claude Code 帮你生成 CLUADE.md 文件。输入 /init，然后按 "Enter" 键，它根据你当前的项目结构生成一个初始的 CLAUDE.md 文件。
有两个 CLUADE.md 文件。
一个是全局的 CLUADE.md 文件，位于用户主目录下。这个文件对你所有的项目都会生效。另一个是项目级别的 CLUADE.md 文件，位于当前项目的根目录下。这个文件只对当前项目生效。
第八个知识点：记忆 /memory
随着时间的推移，你的项目结构可能会发生变化。或者你之前没有考虑到的一些规范和要求。这个时候，你可以通过输入 /memory 来查看编辑 CLAUDE.md 文件。
你可以选择打开全局的 CLUADE.md 文件，或者项目级别的 CLUADE.md 文件。打开后，你就可以编辑 CLUADE.md 文件了。
这里我加上了以下内容：
代码块
Plain Text
以上，是几个常用的斜杠命令。Claude Code 还提供了很多其他的斜杠命令，大家可以在官方文档中查看。
第九个知识点：! 命令
有的时候，你可能需要执行一些 Bash 命令。比如，你想使用 git add . 和 git commit -m "..." 来提交代码。或者，你想使用 ls 来查看当前目录下的文件。这个时候，你就可以使用 ! 命令来执行 Bash 命令。
在 Claude Code 输入框中输入 !，然后按 "Enter" 键，就会进入 Shell 模式。在 Shell 模式下，你可以直接输入 Bash 命令，Claude Code 会直接执行这些命令。
在这里我们给当前项目创建一个 Git 仓库。查看截图：
Claude Code Shell 模式
第十个知识点：截图
在开发过程中，有时候文字描述可能不太清晰，这时候截图就非常有用。特别前端开发，如果有 UI 设计图，你可以直接将设计图截图，然后发送给 Claude Code。Claude Code 会根据设计图来生成代码。
由于，我不会设计，所以我就截取联系方式一栏的界面，发送给 Claude Code 让它帮我修改联系方式。比如，让它把 GitHub 链接颜色改成蓝色，这样就更符合人们的认知习惯了。
提示词：
代码块
Plain Text
请查看我发送的截图，目前联系方式一栏的 GitHub 链接是黑色的，请帮我把它改成蓝色。
Claude Code 截图
⚠️
注意，国产大模型目前在处理图片方面的能力还比较弱。另外，如果是微信截图，无法直接发送给 Claude Code，你需要先将微信截图保存到本地，然后再发送给 Claude Code。
或者，你也可以把图片地址直接发送给 Claude Code。Claude Code 会根据图片地址来获取图片内容。
第十一个知识点：安装 MCP Server
按照截图修改界面，还原度可能不太高。如果你们公司用 Figma 进行 UI 设计，那么你就可以安装 Figma MCP。MCP 可以让 Claude Code 直接访问 Figma 设计图，从而生成更高还原度的代码。
安装 MCP Server 非常简单。首先，打开一个终端，输入以下命令来安装 Figma MCP：
代码块
Plain Text
claude mcp add --transport http figma https://mcp.figma.com/mcp
安装完成后，重新启动 Claude Code，输入 /mcp，然后按 "Enter" 键。就会列出所有的 MCP。Figma MCP 需要授权访问你的 Figma 账号。按照提示进行授权后，你就可以直接在给一个设计图链接了，Claude Code 就会根据设计图来生成代码了。
第十二个知识点：Hooks
Hooks 是 Claude Code 提供的一个功能，可以让你在特定的事件发生时，自动执行一些操作。比如，你可以在每次会话开始时，自动执行一些初始化操作；或者在每次会话结束时，自动执行一些清理操作。
Hooks 有很多种类型事件，比如 SessionStart、SessionEnd、PreToolUse 等等。你可以根据自己的需求，选择合适的事件来设置 Hooks。
"Yes, allow all edits during this session(shift+tab)" 这个选项，它会让 Claude Code 在整个会话期间自动接受所有后续的文件编辑，不再询问。但是，Shell 等命令除外。也就是说，如果 Claude Code 需要执行 Shell 命令，它还是会询问你是否允许操作的。
🕯️
是不是觉得有点麻烦？如果你让 Claude Code 在执行任务都时候，去做其他事情了。这个时候，如果 Claude Code 需要执行 Shell 命令了，它就会询问你是否允许操作。而 Claude Code 没有通知功能，所以 Claude Code 就一直卡在那里了。
这时候，你就可以设置一个 Hooks，让 Claude Code 在每次执行完任务后，比如，发送一条系统通知。
启动 Claude Code，输入 /hooks，然后按 "Enter" 键。就会列出所有的 Hooks 事件，选择 Notification 事件，然后按 "Enter" 键。再选择 "+ Add new matcher…"，然后按 "Enter" 键。
会显示一个 Matcher 编辑框。Matcher 是一个条件匹配器。当满足这个条件时，就会触发 Hooks。这里我们就设置一个简单的 Matcher，匹配所有的任务完成事件。输入 *，然后按 "Enter" 键。
接下来，选择 “1. + Add new hook…” 然后按 "Enter" 键。会显示一个 Command 编辑框。输入以下内容：
代码块
Plain Text
powershell.exe -Command "[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Claude Code needs your attention', 'Claude Code')"
这个命令的作用是，在 Windows 系统上，弹出一个消息框，显示 "Claude Code needs your attention" 的提示。
linux
代码块
Plain Text
notify-send 'Claude Code' 'Claude Code needs your attention'
macOS
代码块
Plain Text
osascript -e 'display notification "Claude Code needs your attention" with title "Claude Code"'
接下来，Claude Code 会询问你这个 Hooks 需要保存到哪里。有三个选项：
"Project settings (local)"：保存到项目设置，这个 Hooks 只对当前项目生效，这个不会被版本控制系统（如 Git）跟踪，适合个人使用或者不需要共享的 Hooks。
"Project settings"：保存到当前项目，这个 Hooks 只对当前项目生效，这个会被版本控制系统（如 Git）跟踪，适合团队共享的 Hooks。
"User settings"：保存到用户设置，这个 Hooks 对所有项目生效。
这里我选择 "User settings"，然后按 "Enter" 键。然后再按 "Enter" 键确认保存。如果你不想保存了，那么按 "Esc" 键取消保存。
设置完成后，一直按 “Esc” 退回到主界面。现在，每次当 Claude Code 需要执行 Shell 命令时，就会弹出一个消息框，提示你 "Claude Code needs your attention"。
这个是交互式创建 Hooks 的方式。你也可以直接在 ~/.claude/settings.json、.claude/settings.json 或者 .claude/settings.local.json 文件中，手动添加 Hooks 的配置。
代码块
Plain Text
{
"hooks": {
"Notification": [
{
"matcher": "*",
"hooks": [
{
"type": "command",
"command": "powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Claude Code needs your attention', 'Claude Code')\""
}
]
}
]
}
}
此外，在 Claude Code 编辑的每个文件上自动运行 Prettier，保持代码风格一致：
代码块
Plain Text
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{
"type": "command",
"command": "jq -r '.tool_input.file_path' | xargs npx prettier --write"
}
]
}
]
}
}
还有很多 Hooks 的使用场景，大家可以根据自己的需求来设置 Hooks。具体的使用方法，可以参考官方文档。
https://code.claude.com/docs/en/hooks-guide
第十三个知识点：Agent Skills
Agent Skills 是 Anthropic出的一个概念。简单来说，Agent Skills 就是给大模型添加一些特定的技能，让大模型能够更好地完成任务。比如，你可以给 Claude Code 添加一个解释代码的技能。
和 Hooks 一样，你可以创建用户级别的 Agent Skills，也可以创建项目级别的 Agent Skills。
这里我创建用户级别的 Agent Skills。在 ~/.claude 文件夹下，创建一个 skills 文件夹。在 skills 文件夹下，创建一个 explain-code.skill.md 文件。然后，在 explain-code.skill.md 文件中，写上以下内容：
代码块
Plain Text
---
name: explain-code
然后，重新启动 Claude Code。在 Claude Code 输入框中，输入 /skill，然后按 "Enter" 键。就会列出所有的 Agent Skills。
Claude Code Agent Skills
我这里列出了两个用户级别的 Agent Skills。一个是我刚才创建的 explain-code，另一个是我之前创建的 commit .
按 "Esc" 键退回到主界面。现在，如果我想让 Claude Code 个人简历这个项目的代码，我只需要在 Claude Code 输入框中，输入以下 prompt：
代码块
Plain Text
请解释这个项目是如何工作的？
一般情况下，Claude Code 会自动触发 explain-code Agent Skills，来解释代码是如何工作的。如果没有触发，你也可以手动触发。输入 /skill explain-code，后面加上你的问题，然后按 "Enter" 键。Claude Code 就会根据 explain-code Agent Skills 来解释代码是如何工作的。
Claude Code 解释代码
从截图可以看到，Claude Code 通过类比、图示、逐步讲解和强调注意事项，详细地解释了代码是如何工作的。
第十四个知识点：自定义子代理（Create custom subagents）
简单来说，子代理拥有独立的上下文和记忆，可以专注于特定的任务或领域。你可以创建一个子代理，让它专门负责处理代码检查。这样，当你需要进行代码检查时，就可以直接与这个子代理进行对话，而不需要担心它会受到其他上下文的干扰。
创建子代理的方法和创建 Agent Skills 类似。你需要在 ~/.claude/agents 文件夹下，创建一个 code-quality-improver.md 文件。然后，在 code-quality-improver.md 文件中，写上以下内容：
代码块
Plain Text
解释一下上面的内容：
•
name：子代理的名称，这个名称需要全局唯一。
•
description：子代理的描述，描述这个子代理的功能和作用。
•
tools：子代理可以使用的工具，这些工具是 Claude Code 提供的内置工具，比如 Read、Glob、Grep 等等。
•
model：子代理使用的模型。我这里使用的是 sonnet 模型。如果你没有 claude-sonnet 模型的访问权限，随便填写一个模型名称就可以了，Claude Code 会自动降级到你有访问权限的模型。
重新启动 Claude Code。在 Claude Code 输入框中，输入 /agent，然后按 "Enter" 键。就会列出所有的子代理。
Claude Code 子代理
在主界面输入以下 prompt：
代码块
Plain Text
使用 subagent review 代码
Claude Code 会自动触发 code-quality-improver 子代理，来 review 代码的质量。
Claude Code 使用子代理
看到这里，你可以可能会有一个疑问，子代理和 Agent Skills 有什么区别？简单来说，Agent Skills 是在当前会话中触发的一个技能，它没有独立的上下文和记忆。而子代理是一个独立的个体，它有自己的上下文和记忆，可以专注于特定的任务或领域。如果你需要一个专门负责处理某个特定任务的智能体，那么子代理是更合适的选择。如果你只是需要在当前会话中，触发一个特定的技能，那么 Agent Skills 就足够了。
另外，子代理还可以和 Hooks 结合使用。比如，你可以设置一个 Hook，让 Claude Code 在每次执行完任务后，自动触发 code-quality-improver 子代理来 review 代码的质量。这样，你就可以在每次修改代码后，自动进行代码审查，确保代码质量了。
第十五个知识点：插件
插件是一个强大的功能，你可以把 Agent Skills、子代理、MCP 和 Hooks 结合起来，然后打包成一个插件。可以让其他人安装你的插件，也可以安装其他人分享的插件。这样，你就可以轻松地扩展 Claude Code 的功能了。
Claude Code 支持两种添加自定义技能、代理和钩子的方式：
独立配置（Standalone .claude/ directory）：适用于个人工作流程、特定项目的自定义设置、快速试验。
插件（Plugin 包含.claude-plugin/plugin.json 的目录）：适用于需要与他人共享、向社区分发、版本化发布、可跨项目复用。
我不打算在这篇文章讲解如何创建插件了。如果你想了解如何创建插件，可以参考官方文档：
https://code.claude.com/docs/en/plugins
💼
目前，Claude Code 有一个官方插件市场，里面有很多实用的插件，比如 Figma 插件、Playwright插件、GitHub 插件等等。你可以根据自己的需求，安装合适的插件来扩展 Claude Code 的功能。
总结
以上，十五个知识点，涵盖了 Claude Code 的核心功能和一些高级功能。通过这个实战项目，你应该对 Claude Code 有了一个全面的了解，并且掌握了如何使用 Claude Code 来开发一个简单的个人简历网站。