手把手教你用 Claude Code 创建一个本地网页

手把手教你用 Claude Code 创建一个本地网页

AI 应用架构演进实践 · 第 02 集

上一篇，Python 把问题发给 DeepSeek，再把回答打印出来。回答很完整，但电脑里的文件纹丝不动。

这一次，你只说一句需求，AI 就会在一个空文件夹里创建真正的 HTML 文件。双击它，网页会出现在浏览器里。

背后的分工先用一句白话记住：DeepSeek 负责想，Claude Code 负责在电脑上动手。 我们做的是"本地工具调用云端模型"，不是把大模型下载到本地。

基础工具已安装时，大约 20～30 分钟。最终成功标志：文件夹里出现 HTML 文件，而且浏览器能正常打开。

开始前：检查工具是否齐全

你需要一台 Windows 电脑、上一篇使用过的 DeepSeek API Key，以及 Git Bash、Node.js 和 Claude Code。

打开 Git Bash，执行：

node -v
npm -v
claude --version

**预期结果：**三条命令都显示版本号。具体数字不必和截图一样，版本号不是高考准考证。

缺少哪一个，只安装哪一个：

• Git Bash：Git 官方安装页
• Node.js 或 npm：Node.js 当前 LTS 版本
• Claude Code：官方安装说明

本次实测使用 npm 安装 Claude Code：

npm install -g @anthropic-ai/claude-code

安装后关闭旧终端，重新打开 Git Bash，再执行版本检查。

第一步：准备一个空文件夹

在桌面新建文件夹：

ai-tool-demo

进入文件夹，在空白处右键，选择"显示更多选项 → Open Git Bash here"。

执行：

pwd

**预期结果：**路径末尾是 ai-tool-demo。

第一次实验只用这个空目录，不要直接打开公司项目、私人资料、生产配置或保存着账号密码的文件夹。刚认识就交出全屋钥匙，多少有点过于热情。

第二步：用 CC-Switch 接入 DeepSeek

Claude Code 是在电脑上读写文件、执行命令的工具，但它还不知道应该连接哪一个模型。这里用 CC-Switch 切换模型服务，让 Claude Code 背后连接 DeepSeek。

CC-Switch 是第三方开源工具，不属于 Anthropic 或 DeepSeek。请只从它的 GitHub Releases 页面下载，不要使用来路不明、要求充值或索取账号密码的下载站。

安装并打开 CC-Switch，然后：

1. 切换到顶部的 Claude Code 页面；
2. 点击右上角的 +；
3. 选择 DeepSeek；
4. 填入一枚实验专用 API Key；
5. 保存配置。

API Key 是私密信息，不要进入截图、群聊或 Git 仓库。已经暴露的 Key 应立即删除并重新创建。

如果软件自动填好了 DeepSeek 预设，保留默认值即可。若预设为空或界面与截图不同，请查 DeepSeek 官方 Claude Code 接入文档，不要照着旧截图猜配置。

保存后回到供应商列表，启用 DeepSeek。

**预期结果：**DeepSeek 卡片显示"使用中"。这只说明配置已保存，下一步才验证请求能否真正跑通。

第三步：先让它回一句话

回到 ai-tool-demo 文件夹中的 Git Bash，执行：

claude

第一次进入目录时，Claude Code 可能询问是否信任。确认路径就是刚建的空目录，再选择信任。

进入后输入：

hi，你是什么模型？

不要只听模型"自报家门"，同时检查三个信号：

1. Claude Code 正常启动；
2. 终端收到完整回复；
3. CC-Switch 中 DeepSeek 的用量发生变化。

三项都满足，说明调用链已经接通。

第四步：让它创建本地网页

在 Claude Code 中继续输入：

请在当前文件夹创建一个单文件 HTML 页面，简单介绍 Claude Code 的主要能力。
页面使用浅色卡片布局，并加入一个可以点击的小互动区域。
完成后告诉我文件名和打开方式。

遇到文件写入授权时，先确认目标路径位于 ai-tool-demo，再决定是否允许。不要养成一路点"同意"的肌肉记忆。

正常情况下，Claude Code 会创建一个以 .html 结尾的文件。如果它只在终端展示代码，没有创建文件，补一句：

请不要只展示代码，直接把内容写入当前文件夹中的 HTML 文件。

预期结果： ai-tool-demo 文件夹里真的多出一个 HTML 文件。

这就是"调用模型"和"使用 AI 工具"的区别：前者返回答案，后者在授权范围内操作环境并交付文件。

第五步：双击验收

双击刚生成的 HTML 文件，用 Edge 或 Chrome 打开。

页面的颜色和文字不必与截图完全相同。只检查三项：文件能打开、页面能显示、互动区域能响应。

地址栏如果显示类似：

C:/.../ai-tool-demo/xxx.html

说明浏览器打开的是你电脑里刚创建的本地文件。若双击后进入文本编辑器，右键文件，选择"打开方式"，再选 Edge 或 Chrome。

到这里，主线已经完成。

回头看：是谁在想，谁在动手？

DeepSeek 本身没有突然获得你的电脑权限。真正读写文件的是本地运行的 Claude Code。

刚才的过程可以压缩成：

你提出目标
→ Claude Code 读取当前目录并组织请求
→ DeepSeek 理解任务、生成方案
→ Claude Code 经你授权后写入 HTML
→ 你用浏览器验收

终端界面叫 Claude Code，不代表背后一定在调用 Claude 模型。实际使用哪个模型，要结合当前配置、启动信息和请求记录判断。

Claude Code 能接触本地文件，因此比普通聊天网页更有行动力，也更需要权限边界。

选做：让它修改同一个网页

回到 Claude Code，继续输入：

请只修改刚才创建的 HTML 文件。
把背景换成更柔和的浅色，并在页面顶部增加一句"第二次修改成功"。
不要新建文件。

完成后刷新浏览器。背景和文字发生变化，就说明它能围绕同一个成果继续迭代。

这是选做题；前面成功创建并打开 HTML 文件，已经完整通关。

卡住了？检查离你最近的一层

找不到 node 或 claude

关闭旧终端，从实验文件夹重新打开 Git Bash，再检查：

which node
which claude

哪一条没有返回路径，就只处理对应工具，不要把全部软件重装一遍。

仍在使用之前的模型

确认 CC-Switch 中 DeepSeek 显示"使用中"，完全退出 Claude Code，再重新执行 claude。已经打开的旧会话可能保留先前配置。

出现 401

检查 API Key 是否填错、失效或已删除。不要打印完整 Key，也不要发到群里求助；Key 一旦暴露，应立即删除并重新创建。

出现 403

保留完整错误信息，并确认请求实际发往哪个地址。403 也可能来自代理、网络或第三方工具，可对照 DeepSeek 官方错误码说明逐层排查。

AI 没有创建文件

确认当前目录是 ai-tool-demo，再明确要求"直接写入当前文件夹，不要只展示代码"。如果它准备访问其他目录，先拒绝，回到空实验目录重试。

最后，记住三条安全线

1. API Key 不进截图、不进聊天记录、不进 Git 仓库。
2. 第一次只操作空实验目录，授权前确认文件路径。
3. 公司代码、客户资料和生产配置，在未确认内部规则前不要发送给外部模型。

今天，你让本地工具通过云端模型理解任务，并创建了一个真实文件。可以继续在这个空目录里试试改颜色、加按钮、解释代码，亲手多跑两轮，比背十页概念更容易形成手感。

---

完整系列：AI 应用架构演进实践。