企业官网建设流程全解析

1. 从零做一个打地鼠，为什么我选 Claude Code + deepseek

打地鼠这个游戏，看着简单，其实是个特别适合练手的项目：4x4 网格、随机出洞、点击计分、30 秒倒计时，逻辑闭环完整，代码量又不大，一个index.html就能跑起来。但真正动手写的时候，你会发现要处理的状态不少——定时器管理、地鼠生命周期、重复点击防抖、游戏结束后的清理，稍不注意就出一堆 bug。

我这次的做法是：用 Claude Code 作为终端里的 AI 代理，把 deepseek 模型接进去当大脑，让它帮我从需求文档一路生成到可运行的 HTML 单文件。Claude Code 的好处是它直接跑在终端里，能读写你当前目录的文件、执行命令、理解项目上下文，不需要你复制粘贴代码来回倒腾。而 deepseek 的接口现在国内可以直接调用，配置好环境变量就能用，省去了很多麻烦。

这篇文章会带你走完整个流程：配置 Claude Code 调用 deepseek、写需求让 AI 生成 PRD、基于 PRD 生成游戏代码、本地打开验证可玩性，最后把常见的坑一个个排掉。适合有基础 JavaScript 认知、想体验 AI 辅助开发完整流程的读者。你不需要提前准备什么复杂环境，Node.js 加一个 API Key 就够了。

2. 前置准备：把 Claude Code 接到 deepseek 上

2.1 安装 Node.js 和 Claude Code

Claude Code 依赖 Node.js 运行，建议版本 20 以上。装完之后，全局安装 Claude Code：

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

如果你在国内，npm 拉包慢的话，可以先切一下镜像源：

npm config set registry https://registry.npmmirror.com

装完后验证一下：

claude --version

能打印出版本号就说明安装成功了。

2.2 配置 deepseek 的 API 环境变量

Claude Code 默认走 Anthropic 的接口，但我们可以通过环境变量把请求转发到兼容 Anthropic 协议的 deepseek 接口上。Windows 下用setx，macOS/Linux 下用export写进 shell 配置文件。

Windows CMD：

setx ANTHROPIC_BASE_URL "https://api.deepseek.com/anthropic" setx ANTHROPIC_AUTH_TOKEN "你的 DeepSeek API Key" setx ANTHROPIC_MODEL "deepseek-v4-pro[1m]" setx ANTHROPIC_DEFAULT_OPUS_MODEL "deepseek-v4-pro[1m]" setx ANTHROPIC_DEFAULT_SONNET_MODEL "deepseek-v4-pro[1m]" setx ANTHROPIC_DEFAULT_HAIKU_MODEL "deepseek-v4-flash"

macOS/Linux：

export ANTHROPIC_BASE_URL="https://api.deepseek.com/anthropic" export ANTHROPIC_AUTH_TOKEN="你的 DeepSeek API Key" export ANTHROPIC_MODEL="deepseek-v4-pro[1m]" export ANTHROPIC_DEFAULT_OPUS_MODEL="deepseek-v4-pro[1m]" export ANTHROPIC_DEFAULT_SONNET_MODEL="deepseek-v4-pro[1m]" export ANTHROPIC_DEFAULT_HAIKU_MODEL="deepseek-v4-flash"

这里几个变量的作用要分清楚：ANTHROPIC_BASE_URL决定请求发到哪，ANTHROPIC_AUTH_TOKEN是你的身份凭证，ANTHROPIC_MODEL是默认使用的模型，后面三个DEFAULT_*是 Claude Code 在不同任务档位下会调用的模型映射。设置完之后记得重开一个终端窗口，让环境变量生效。

注意：API Key 属于敏感信息，不要直接提交到 Git 仓库里。如果你要长期使用，建议用系统级环境变量或者密钥管理工具来存。

2.3 如果你想要更省心的接入方式

上面这套配置是直连 deepseek 官方接口。如果你希望统一管理多个模型的 Key、随时切换不同供应商，也可以走 TaoToken 这类聚合接入的方式。它的 API 地址是https://taotoken.net/api，在 Claude Code 里同样通过ANTHROPIC_BASE_URL指向它，然后到控制台生成一个 API Key 填进ANTHROPIC_AUTH_TOKEN就行。具体操作路径是：先到 API Keys 页面 创建密钥，再参考 接入文档 里的 Claude Code 配置说明。两种方式选一种即可，不用重复配。

3. 可复制配置：初始化项目并生成 PRD

3.1 创建项目目录

先建一个空目录，用 VS Code 打开，然后在终端里启动 Claude Code：

mkdir Claude-test1 cd Claude-test1 claude

进入 Claude Code 的交互界面后，输入/init命令，它会自动生成一个CLAUDE.md文件。这个文件是 Claude Code 的核心配置文件，会被自动读取并加入上下文，里面应该写清楚项目架构、常用命令、代码规范、测试指南这些信息。刚开始它只是个空框架，我们后面用游戏项目来填充它。

3.2 写需求，让 AI 生成 PRD

接下来不要急着让它写代码，先让它把需求整理成 PRD 文档。在 Claude Code 里输入下面这段需求：

我需要生成一个打地鼠的游戏，大致需求如下： 你的任务是使用 HTML、CSS 和 JavaScript 创建一个简单的网页版"打地鼠"游戏。 规则： 1. 游戏界面是一个 4x4 的网格。 2. 每隔 1-2 秒，会有一只"地鼠"随机出现在一个格子里。 3. 玩家点击"地鼠"即可得分，分数需要实时显示。 4. 游戏包含一个"开始/重新开始"按钮和一个 30 秒的倒计时。 请将实现上述功能的所有代码打包到一个 index.html 文件中。 在编写代码时，要确保结构清晰，逻辑正确，代码具有良好的可读性。 请先帮我生成 PRD 文档，并结合 CLAUDE.md，先不要写代码，先把需求整理出来。

Claude Code 会结合CLAUDE.md的上下文，生成一份结构化的PRD.md。这份文档会包含项目概述、功能需求、游戏核心逻辑、边界条件、技术约束、验收标准等部分。其中边界条件这块特别值得关注，比如"倒计时结束后点击不再得分""同一时刻最多只有一只地鼠""游戏中再次点击开始应重新开始"——这些细节如果不在 PRD 里写清楚，后面生成的代码很容易漏掉。

3.3 基于 PRD 生成游戏代码

PRD 确认没问题后，继续在 Claude Code 里输入：

@PRD.md 请基于上面 PRD.md 文档生成代码，以测试驱动为开发流程，完成上面的代码。

这里用@PRD.md把文档引用进上下文，Claude Code 会读取里面的需求，然后生成完整的index.html。生成过程中它会自己规划结构：HTML 骨架、CSS 样式、JavaScript 逻辑分块写。等它写完，你打开目录就能看到index.html文件了。

4. 验证请求：打开浏览器看游戏能不能玩

4.1 直接打开文件

最简单的方式就是双击index.html，或者右键选择用浏览器打开。因为整个游戏是单文件、无外部依赖的，所以不需要起服务器，file://协议下就能跑。

打开后你应该看到：

• 一个 4x4 的网格居中显示，格子有边框和间距
• 顶部有分数显示和 30 秒倒计时
• 一个"开始/重新开始"按钮

4.2 逐项验证功能

点一下"开始"按钮，然后按 PRD 里的验收标准逐条检查：

如果哪一项没通过，别急着改代码，先把现象记下来，回到 Claude Code 里描述问题让它修。

4.3 用 Claude Code 做一次代码走查

游戏能跑之后，我建议再让 Claude Code 帮你过一遍代码。在终端里输入：

请检查 index.html 的代码，重点看这几个地方： 1. 定时器有没有在游戏结束时正确清理，避免内存泄漏 2. 地鼠消失后，点击事件有没有正确解绑 3. 重复点击同一只地鼠会不会重复得分 4. 倒计时归零的瞬间，正在显示的地鼠有没有被清除

这一步很关键。AI 生成的代码功能上通常没问题，但边界处理容易有疏漏。让它自己走查一遍，往往能发现一些你没想到的角落。

5. 本篇常见错排查

5.1 Claude Code 启动报错或连不上模型

最常见的原因是环境变量没生效。setx设置完之后必须重开终端，当前窗口是不会刷新的。另外检查一下ANTHROPIC_AUTH_TOKEN有没有多余的空格或引号，Key 本身是否还有效。如果用的是聚合接入方式，确认ANTHROPIC_BASE_URL指向的是https://taotoken.net/api而不是别的地址。

5.2 生成的代码里地鼠不出现

先看浏览器控制台有没有报错。常见的是setInterval或setTimeout的延迟参数写成了固定值，导致地鼠出现节奏不对。还有一种情况是 CSS 里地鼠的显示类名和 JS 里切换的类名不一致，视觉上看起来"没出现"，其实元素已经渲染了只是被隐藏了。让 Claude Code 检查一下类名匹配就能定位。

5.3 点击地鼠不得分

大概率是事件绑定绑在了网格容器上而不是具体格子上，或者点击后没有及时清除地鼠状态导致重复点击被拦截。检查一下点击处理函数里有没有判断"当前格子是否有地鼠"，以及得分后有没有立即把地鼠状态置空。

5.4 倒计时结束后游戏没停

这是定时器清理的问题。游戏结束时需要同时清除出地鼠的定时器和倒计时的定时器，如果只清了一个，另一个还在跑，就会出现"时间到了地鼠还在冒"的情况。在 Claude Code 里搜一下clearInterval的调用位置，确认两个定时器都被清理了。

5.5 重新开始后分数没重置

检查"开始/重新开始"按钮的处理逻辑，是不是只重置了倒计时没重置分数，或者重置了变量但没更新 DOM 显示。这类问题让 AI 自己走查一遍通常就能发现。

6. 继续往下走：把流程固化成你的开发习惯

这套流程跑通之后，你会发现它不只适用于打地鼠。任何一个小型前端项目，都可以按"写需求 → 生成 PRD → 基于 PRD 生成代码 → 浏览器验证 → AI 走查"这个循环来做。Claude Code 负责在终端里读写文件、执行命令，deepseek 负责理解和生成，你负责把关需求和验收。

如果你后面想长期用这套组合做编码和 Agent 任务，可以了解一下 Coding Plan，它在长会话和复杂任务上的额度更划算。想先试试模型对话效果的话，可以直接到 模型对话 里发几条消息感受一下。接入过程中遇到配置问题，接入文档 里有各客户端的详细步骤，API Keys 页面则是你生成和管理密钥的地方。

最后留一个实用建议：每次让 AI 生成代码后，别急着往下走，先花两分钟在浏览器里把 PRD 的验收标准逐条点一遍。AI 写代码很快，但边界条件的坑往往藏在你没点到的那个角落里。