企业官网建设流程全解析

这几天朋友圈里一直被“AI 一天开发一个游戏”之类的标题刷屏，说实话，第一次看到这种说法我是半信半疑的。但真正把 Claude Code 用到项目里以后，我发现“一天做出一个可以上架的广告游戏”不是夸张的营销话术，而是确实可行的工程路径。关键不在于 AI 能不能写代码，而在于你够不够清楚怎么拆需求、怎么问问题、怎么验证结果。

这篇文章我会围绕“用 Claude Code 从零开发一款手机广告游戏”的完整流程做一次实战拆解。包含工具准备、提示词设计、核心代码生成、广告 SDK 接入思路、构建验证、常见坑点，以及我在实操中总结出来的一套和 AI 协作的方法论。无论你是想用 AI 做独立游戏、做技术 demo，还是纯粹想了解 AI 编程工具的上限，这篇内容都能给你一个可复制的参考。

文章较长，建议先收藏再慢慢看。

1. 先用大白话理解：Claude Code 到底帮你做了什么

1.1 这一天的核心目标是什么

先说结论：用 AI 一天开发一款手机广告游戏，真正的重点是“跑通流程”，而不是“写出一个 3A 大作”。这个流程大致是这样的：

• 早上：确定游戏玩法，把需求拆成一页纸能写完的规格。
• 上午：让 Claude Code 生成游戏原型代码。
• 中午到下午：反复修改玩法参数、修 bug、补 UI。
• 傍晚：接上广告 SDK，做构建配置。
• 晚上：打出 Android 或 H5 包，真机验证。

这里提到的广告游戏，指的是通过展示广告获得收益的轻量级小游戏。它们通常玩法简单、单局时间短、广告位设计直接，比如“金币翻倍看广告复活”“离线收益看广告翻倍”这类设计。

这类游戏的交互逻辑不复杂，代码量在一两千行以内，非常适合作为 AI 编程工具的实战土壤。

1.2 Claude Code 与普通聊天的区别

很多读者用过网页版 Claude，觉得 AI 写代码不过就是“把需求发给它，它把代码回给你”。Claude Code 本质上是一个运行在终端里的 AI 编程代理，它和普通聊天的区别在于：

简单说，Claude Code 更像一个“坐在你旁边、用你的电脑、和你一起干活的实习生”。你负责表达意图和验收，它负责翻代码、改代码、跑命令。

1.3 为什么选择“手机广告游戏”作为实战项目

选择广告游戏作为实战项目，有几个很实际的原因：

• 玩法固定，代码边界清晰，AI 不容易“跑题”。
• 不需要复杂的后端架构，数据存储可以用本地缓存。
• 广告 SDK 的接入有固定文档，适合作为 AI 辅助的模板操作。
• 国内外的广告变现渠道成熟，做出成品后很容易验证收益模型。

更重要的是，广告游戏的工程量很合适：太小则学不到工程化思路，太大则一天根本做不完。一千到三千行代码的量级，刚好是 Claude Code 在一个工作日内能稳定产出的范围。

2. 环境准备：跑通 Claude Code 需要哪些条件

2.1 账号与订阅

Claude Code 是 Anthropic 推出的终端编程工具，使用的模型是 Claude 系列大模型。你需要准备：

• Anthropic 账号，并且开通 Claude 的付费订阅或 API 额度。
• 一个能正常访问 Anthropic 服务的网络环境。
• 终端工具，macOS 使用 Terminal，Windows 可以用 PowerShell 或 Git Bash。

具体订阅价格和版本差异变化比较快，建议以 Anthropic 官方文档为准。本文演示的思路和命令在大多数版本下是通用的，如果你的版本命令有差异，优先查看claude --help输出。

2.2 本地开发工具链

开发手机广告游戏，我推荐两条路线：

• 轻量路线：HTML5 游戏 + Capacitor/Cocos 打包。
• 完整路线：Cocos Creator 3.x 直接发布到 Android。

前者适合快速验证玩法，甚至可以直接发布为 H5 小游戏；后者适合需要正式上架应用商店的场景。

以本文为例，我建议你本地安装以下工具：

版本需要根据你的项目实际情况调整，本文示例以常见环境为例，重点演示配置思路。

2.3 项目目录规划

在让 Claude Code 动手之前，先把工程目录建好。一个清晰的目录结构能显著降低 AI 的理解成本。我建议这样组织：

ad-game/ ├── assets/ │ ├── scripts/ │ │ ├── GameManager.ts │ │ ├── UIManager.ts │ │ └── AudioManager.ts │ ├── scenes/ │ └── textures/ ├── build/ ├── native/ ├── packages/ ├── settings/ └── project.json

如果你的项目是纯 HTML5 路线，目录可以更简单：

ad-game/ ├── index.html ├── styles/ │ └── main.css ├── scripts/ │ ├── game.js │ ├── ads.js │ └── utils.js └── assets/ └── images/

Claude Code 在启动后会自动读取当前目录的文件结构。目录越清晰，它的决策就越准确。

3. Claude Code 的核心用法：学会和 AI 工程师配合

3.1 三种最高频的工作模式

Claude Code 有三类指令在工作中使用频率最高：

一、直接提问型：

claude "请解释当前项目里 GameManager.ts 这个文件主要做了什么"

二、文件操作型：

claude "在 assets/scripts/ 目录下创建 UIManager.ts，实现一个显示金币数量的 UI 组件"

三、任务代理型：

claude "修改 GameManager.ts，让金币在游戏结束时归零，并输出修改后的完整文件"

第三种模式最接近真实的编程体验，Claude Code 会自己打开文件、定位问题、完成修改，并在完成后告诉你改了什么。

3.2 提示词设计：把需求说清楚

很多开发者对 AI 编程最大的误解是：需求写得越简短，AI 发挥空间越大。实际恰恰相反。AI 编程不是算命，你需要像给新同事交代任务一样把边界划清楚。

我总结了一套提示词四要素模板：

【任务】 实现一个…… 【约束】 使用 TypeScript，不要引入额外依赖； 所有文案用中文； 逻辑写在 GameManager.ts 中； 【输入】 金币数量来自 UI 上的点击事件； 离线时间从 LocalStorage 读取； 【输出】 完整代码 + 简单说明

举一个实际示例。假设我要让 Claude Code 实现“金币点击”的核心玩法：

任务：为游戏实现一个简单的金币点击收集玩法。 约束： 1. 使用 TypeScript，基于 Cocos Creator 3.x 的 API； 2. 金币点击后会在场景中随机位置重新生成； 3. 每点击一次金币获得 1 个金币； 4. 将金币数量实时显示在屏幕左上角； 5. 代码尽量精简，不需要额外 UI 预制体； 输出：完整 .ts 文件，并解释关键函数。

这样写，Claude Code 返回的代码基本可以直接使用，不需要来回返工。

3.3 让 Claude Code 自己写测试代码

我发现很多人用 AI 写完功能就结束了，其实还差最后一步：让 AI 自己验证。

Claude Code 支持直接运行终端命令。你可以要求它：

claude "为 assets/scripts/GameManager.ts 中的 countCoin 方法写一个简单的单元测试，用 vitest 运行，并执行测试输出结果"

这一步非常重要。因为 AI 生成的代码偶尔会有隐蔽的错误，让 AI 自己写测试、自己跑测试、自己修问题，能帮你过滤掉大部分低级 bug。

4. 完整实战：一天开发一款广告游戏

4.1 上午：需求拆解与玩法原型设计

在打开 Claude Code 之前，先把需求写清楚。我们需要一个什么样的游戏？

我以一个名为“金币大亨”的放置类点击游戏为例：

• 核心玩法：点击屏幕上移动的金币，获得金币收入。
• 被动收入：每 10 秒自动产生一次金币，金币与离线时长相关。
• 广告位：看广告获得 30 秒双倍收益。
• 目标用户：碎片化时间玩家，单局 1~2 分钟。
• 技术路线：Cocos Creator 3.x + TypeScript。

把玩法拆成几个可交付的里程碑：

拆完之后，就可以把这些需求逐条交给 Claude Code。

4.2 让 Claude Code 生成核心玩法代码

现在正式进入代码阶段。我们在项目目录下打开终端，进入 Claude Code 交互界面，输入第一轮需求：

请为 Cocos Creator 3.x 项目创建一个金币点击玩法脚本，文件放在 assets/scripts/GameManager.ts。 需求： 1. 屏幕上有一个点击目标，点击后金币数加 1； 2. 点击目标每 2 秒换一个随机位置； 3. 左上角显示当前金币数； 4. 金币数量用 Label 组件展示。 请直接输出完整代码。

Claude Code 生成代码的速度很快，出于篇幅和演示考虑，下面是一版简化后的等价代码。核心思路是：挂载到 Canvas 节点上，用input监听触摸事件，通过触摸坐标判断是否点击到金币节点。

// 文件路径：assets/scripts/GameManager.ts import { _decorator, Component, Node, Label, Vec3, input, Input, EventTouch, v3 } from 'cc'; const { ccclass, property } = _decorator; @ccclass('GameManager') export class GameManager extends Component { @property({ type: Node, tooltip: '金币节点' }) coinNode: Node | null = null; @property({ type: Label, tooltip: '金币数量文本' }) coinLabel: Label | null = null; private coins: number = 0; private timer: number = 0; private readonly MOVE_INTERVAL = 2.0; private readonly minX = -300; private readonly maxX = 300; private readonly minY = -150; private readonly maxY = 300; onLoad() { this.coinNode?.on(Node.EventType.TOUCH_START, this.onCoinTouch, this); input.on(Input.EventType.TOUCH_START, this.onGlobalTouch, this); this.updateCoinLabel(); } private onGlobalTouch(event: EventTouch) { if (!this.coinNode) return; // 获取金币节点在屏幕上的世界包围盒，判断点击是否命中 const touchPos = event.getUILocation(); // 简化示例：如果金币开启了 TOUCH_START，可直接在 coinNode 上绑定事件 } private onCoinTouch() { this.coins += 1; this.updateCoinLabel(); this.moveCoinRandomly(); } private moveCoinRandomly() { if (!this.coinNode) return; const x = this.minX + Math.random() * (this.maxX - this.minX); const y = this.minY + Math.random() * (this.maxY - this.minY); this.coinNode.setPosition(v3(x, y, 0)); } private updateCoinLabel() { if (this.coinLabel) { this.coinLabel.string = `金币：${this.coins}`; } } update(deltaTime: number) { this.timer += deltaTime; if (this.timer >= this.MOVE_INTERVAL) { this.timer = 0; this.moveCoinRandomly(); } } getCoins(): number { return this.coins; } }

这段代码有几个值得注意的设计点：

• onLoad中注册事件，update中做定时移动，逻辑分离。
• 把坐标范围抽成常量，方便调整难度。
• getCoins()暴露给其他系统调用，比如广告结束后增加金币。

拿到这版代码后，你只需要在 Cocos Creator 里创建一个 Label、一个 Sprite（金币图片），然后把节点拖到 GameManager 对应的属性上，游戏的核心玩法就能跑起来了。

4.3 中午：被动收益与离线收益逻辑

核心玩法跑通之后，下一步加入放置类游戏最核心的“被动收益”和“离线收益”。

这一轮给 Claude Code 的提示词：

在 GameManager.ts 中增加被动收益逻辑： 1. 每 5 秒自动获得一次金币，金币数为当前等级的 10%； 2. 增加 offlineMinutes 变量，当玩家重新进入游戏时，根据离开时间发放离线收益； 3. 离线收益最大累计 8 小时； 4. 金币数量变化时更新 label； 5. 使用 Date.now() 计算离线时间，不要把逻辑写在 update 里。

这里最关键的工程决策是：需要把金币数据存到本地，否则离线收益无从谈起。修改后的核心代码片段如下：

// 文件路径：assets/scripts/GameManager.ts import { sys } from 'cc'; private readonly SAVE_KEY = 'coin_game_data'; private readonly OFFLINE_MAX_MS = 8 * 60 * 60 * 1000; // 8小时 private saveData() { const data = { coins: this.coins, lastLoginTime: Date.now(), }; sys.localStorage.setItem(this.SAVE_KEY, JSON.stringify(data)); } private loadData() { const raw = sys.localStorage.getItem(this.SAVE_KEY); if (!raw) return; try { const data = JSON.parse(raw); this.coins = data.coins || 0; const lastLogin = data.lastLoginTime || 0; const offlineMs = Math.min(Date.now() - lastLogin, this.OFFLINE_MAX_MS); const offlineMinutes = Math.floor(offlineMs / 60000); // 离线收益：每分钟产出 1 金币 this.coins += offlineMinutes; this.updateCoinLabel(); } catch (e) { console.warn('读取存档失败，重新初始化'); this.coins = 0; } } private addPassiveIncome() { // 每 5 秒产出，当前策略：固定 1 金币 this.coins += 1; this.updateCoinLabel(); this.saveData(); }

增量逻辑建议拆开：saveData负责持久化，loadData负责恢复，addPassiveIncome只负责在持续运行期间增加收益。

注意这里的写法：存档使用了sys.localStorage，这是 Cocos Creator 对浏览器、原生平台做了一层封装的存储接口。真机环境下它依然可用，不需要额外处理原生文件的读写问题。

4.4 下午：接入广告 SDK

广告游戏的核心是广告变现。以常见的广告聚合平台为例，接入流程一般分四步：

• 申请广告位 ID。
• 导入广告 SDK 插件包。
• 初始化 SDK。
• 在游戏逻辑中调用“展示激励视频广告”的方法。

由于各家 SDK 接入方式差异很大，这里不写死任何平台专属代码，说一下通用思路。

在 Cocos Creator 里，广告 SDK 通常以原生插件或 JavaScript 桥接的方式接入。Claude Code 擅长生成的是逻辑层代码，因此我建议把广告调用封装成一个独立的模块：AdManager.ts。

提示词示例：

创建 assets/scripts/AdManager.ts，这个模块负责封装激励视频广告。 要求： 1. 提供 showRewardedAd(callback: (success: boolean) => void) 方法； 2. 广告未初始化时调用会直接回调 false； 3. 广告回调只允许执行一次； 4. 预留 Android 平台的原生桥接口； 5. 代码里用 console.log 输出广告状态，方便调试。

封装后的广告逻辑大概是这样：

// 文件路径：assets/scripts/AdManager.ts export enum AdStatus { NOT_INITIALIZED = 'NOT_INITIALIZED', READY = 'READY', LOADING = 'LOADING', } export class AdManager { private static _instance: AdManager | null = null; private status: AdStatus = AdStatus.NOT_INITIALIZED; static get instance(): AdManager { if (!this._instance) { this._instance = new AdManager(); } return this._instance; } private constructor() { this.status = AdStatus.NOT_INITIALIZED; } init() { // 以原生桥为例，Android 上由 MainActivity 的 bridge 初始化 SDK // 这里只是预留接口，需要根据具体 SDK 文档实现 this.status = AdStatus.READY; console.log('[AdManager] 广告SDK初始化完成'); } showRewardedAd(callback: (success: boolean) => void) { if (this.status !== AdStatus.READY) { callback(false); return; } // 实际项目中会调用原生桥的 showRewardedVideo 方法 // 此处以 setTimeout 模拟用户观看广告 this.status = AdStatus.LOADING; setTimeout(() => { const success = true; // 真实环境中根据 SDK 回调结果赋值 this.status = AdStatus.READY; callback(success); }, 2000); } }

这个封装的价值在于：后续无论你换哪家 SDK，只需要改showRewardedAd方法内部的一小段逻辑，游戏业务层完全不用动。

4.5 傍晚：构建 Android 包

游戏逻辑写完，广告模块也封装好后，最后一步是构建。

Cocos Creator 3.x 导出 Android 工程需要先在“构建发布”面板中选择 Android 平台，配置应用包名、版本号、SDK 版本，然后执行构建。

Claude Code 在这一步的参与方式有两类：

• 检查配置文件：比如让你确认AndroidManifest.xml中是否声明了广告 SDK 需要的权限。
• 执行构建命令：Cocos Creator 提供了命令行构建方式，你可以让 Claude Code 帮你跑、帮你分析报错。

Cocos Creator 命令行构建的简化命令如下：

# 进入 Cocos Creator 项目目录 # 使用命令行构建 Android 工程 /Applications/CocosCreator/Creator/3.8.0/CocosCreator.app/Contents/MacOS/CocosCreator \ --project ./ad-game \ --build "platform=android;debug=true"

具体路径要以你本机安装 Cocos Creator 的位置为准。这里的关键思路是：遇到构建失败时，把终端里的报错信息直接粘贴给 Claude Code，它能很快帮你定位到问题。

4.6 结果说明

构建完成后，你会得到类似build/android/proj的 Android Studio 工程。此时你可以选择两种方式完成最终验证：

• 直接用 Android Studio 打开工程，连上手机运行。
• 也可以在命令行继续用 Gradle 打 Debug 包。

cd ad-game/build/android/proj ./gradlew assembleDebug

生成的 APK 在app/build/outputs/apk/debug/目录下。安装到手机后，你会看到金币点击玩法、被动收益和广告按钮都在正常工作。至此，一款一天之内完成的广告游戏就完成了“从 0 到 1”的全流程。

5. 常见问题与排查思路

5.1 Claude Code 生成的代码与 Cocos Creator 版本不匹配

这是最常见的问题。Claude Code 的知识库可能停留在某个版本，而你的项目用的是新版本 API。

更高效的处理方式是：让 Claude Code 先读取项目自带的类型定义文件。比如在提示词中加一句话：

项目是 Cocos Creator 3.8，API 以项目内 node_modules 或 extensions 中的类型声明为准。

这样能显著降低幻觉概率。

5.2 广告 SDK 无法初始化或拉不起广告

广告 SDK 初始化失败，通常不是代码问题，而是平台配置问题。按照下面的顺序排查：

1. 确认广告位 ID 是否正确复制，没有多余空格。
2. 确认应用包名与广告平台后台注册的包名一致。
3. 确认 Android 原生工程里已经添加了对应的 SDK 依赖。
4. 确认测试手机系统版本是否满足 SDK 要求。
5. 看 logcat 里有没有 SDK 初始化相关的错误信息。

Claude Code 能做的，是帮你把 AdManager 的初始化流程整理清楚，但不能替代你在广告平台后台的操作。

5.3 游戏包体过大或首屏加载慢

广告游戏最好控制在 30MB 以内。包体过大时依次检查：

• 图片资源是否压缩为 WebP，大图不要直接用 PNG。
• 音频是否裁剪成短音效，不要塞整首 BGM。
• Cocos Creator 构建时是否关闭了不用的模块。

Claude Code 可以写一个“资源扫描工具”，统计项目里体积最大的文件，方便你定位问题。

5.4 Claude Code 修改文件后项目直接跑不起来了

这种情况在多人协作或者频繁迭代时经常出现。解决思路：

• 每次让 Claude Code 工作前，先 commit 当前稳定版本。
• 出现问题后，用git diff查看具体改动，再决定回滚还是让 AI 继续修。
• 给 Claude Code 的提示词中增加约束：一次只改一个文件，改完先跑构建。

这也是为什么本文一直强调，使用 Claude Code 的项目必须有 Git 管理。AI 编程工具放大的是你的迭代速度，而不是覆盖掉你犯错的成本。

6. 最佳实践与工程建议

6.1 用“分治思想”给 AI 派活

不要一次性给 Claude Code 一个“我要一个完整游戏”的任务，也不要把几千行需求塞进同一条提示词。

我的建议是每次只交付一个可验证的小目标：

• 先做金币点击。
• 再做金币 UI。
• 再做被动收益。
• 再做存档。
• 再做广告模块。

每个步骤都让 Claude Code 输出可运行的代码，并且自己跑通后再进入下一步。这种分治方式能让你始终控制项目状态，而不是让 AI 自由发挥导致失控。

6.2 要求 AI 输出可读性高的代码

AI 生成的代码通常能用，但变量命名和注释质量参差不齐。在提示词里明确要求代码风格，能明显改善最终质量。我经常用这一句话：

代码要求： - 变量命名语义化，禁止用 a、b、c 这类无意义命名； - 关键逻辑必须写中文注释； - 每个函数不超过 40 行，超过就拆分； - 对外暴露的方法要写 JSDoc 或合理注释。

有了这些约束，AI 生成代码的可维护性会高很多。

6.3 警惕 AI 幻觉：涉及 API 时要人工核对

AI 生成代码时，最大的隐患是虚构不存在的 API。比如 Cocos Creator 某个版本根本没有Node.EventType.TOUCH_START这个名称，AI 也可能写出来。

应对策略：

• 让 AI 基于项目现有文件推断 API，而不是凭记忆写。
• 遇到不熟悉的 API，先查官方文档再决定是否接受 AI 代码。
• 对构建、支付、广告这类“上线后才出问题”的模块，必须人工 review 一遍。

6.4 广告游戏的变现设计要克制

最后聊一点产品层面的建议。广告游戏的收入逻辑很简单：展示次数 × 单次收益。但很多新手第一次做广告游戏，会把游戏体验做得很差，比如满屏弹窗广告、强制广告，结果留存率崩掉，广告单价也会下降。

合理的广告设计是：

• 激励视频为主：玩家主动选择看广告换收益。
• 广告位自然：在“收益翻倍”“离线收益领取”等场景中插入。
• 控制频次：同一用户 3 分钟内不要出现两次广告。

广告变现的上限取决于游戏留存。不要为了短期收益把游戏体验做成一次性消费。

6.5 善用版本管理与自动化验证

Claude Code 非常适合搭配 Git。

每天开始开发前，先创建分支，例如feature/coin-game-first-day。每个阶段完成后 commit 一次，提交信息可以直接让 Claude Code 写。这样一来，即使某一步 AI 改坏了，你也随时能回滚。

建议的 Git 提交节奏：

• 核心玩法跑通：feat: 实现金币点击核心玩法
• 离线收益完成：feat: 增加被动收益和离线存档
• 广告模块完成：feat: 接入激励视频广告
• Android 构建成功：build: 完成 Android Debug 包构建

这种节奏既方便记录进度，也能在出问题时快速定位是哪一次改动引入的 bug。

7. 总结：AI 不会替你发布游戏，但会替你写代码

这趟完整流程走下来，你会发现在“用 Claude Code 一天开发一款手机广告游戏”这件事上，真正稀缺的能力不是写代码，而是三件事：拆解需求的能力、验证结果的能力、以及快速做决策的能力。

Claude Code 把编码效率拉高了一个维度，但它仍然需要你确定“做什么、不做什么、做到什么程度”。对新手来说，这其实是一种更好的学习方式——你在读 AI 生成的代码时，会不自觉地理解游戏引擎的基本概念、生命周期、事件系统和资源管理。

如果你准备自己动手做一遍，这里有一个起步清单：

1. 装好 Node.js、Git 和 Cocos Creator。
2. 开一个 Git 仓库，把第一版需求写成 README。
3. 安装并启动 Claude Code，从“生成一个 GameManager 脚本”开始。
4. 每完成一个功能就 commit 一次。
5. 最后用真机安装 APK，验证广告回调。

下一步，你可以继续研究更复杂的玩法、服务端排行榜、多语言发布或跨平台适配。有了 Claude Code 之后，这些功能的实现门槛都比以前低了很多。把 AI 当成一个永远在线、不会累的结对编程伙伴，你的产出速度会比想象中提升得更快。

如果这篇文章让你对 AI 辅助开发产生了兴趣，建议直接打开终端开始第一个小项目。无论结果如何，这个过程中你收获的工程经验，是看多少篇文章都替代不了的。