用Claude生成会断电自救的赛博城市：单文件HTML状态机实战
这次我们来看一个能直接跑起来的 AI 编程案例：用 Claude 现场生成一个“会断电自救”的赛博城市 HTML 页面。不需要后端，不需要数据库，也不用装框架，一个单文件 HTML 就能把城市电网、备用电源、电压波动、负载分级切断这些逻辑都做出来。打开页面就是一座霓虹城市，一旦主电网断电，系统会自动切到备用电池，再按优先级关停非必要负载，等电网恢复后再自动切回主供电并给电池充电——这就是标题里说的“断电自救”。
这个案例最有意思的点在于：Claude 不只是在写静态布局，而是在写一套带状态机、事件循环和视觉反馈的交互系统。核心逻辑包括电网状态管理、电压跌落检测、备用电源切换、负载调度策略、恢复供电判断，全部塞进一个 HTML 文件里。对前端开发者来说，这是一个很好的 AI 辅助开发实验；对 Claude 玩家来说，这也是测试模型长代码生成能力的好题目。
本文会带你把整个流程走通：怎么写提示词、怎么让 Claude 生成完整代码、怎么在本地预览、怎么验证“断电自救”的每一个环节，以及 Claude Code / Claude API 的调用方式和常见问题排查。整篇按 可落地实操 来写，你照着操作就能复现。
1. 核心能力速览
| 能力项 | 说明 |
|---|---|
| 项目类型 | 单文件 HTML 交互应用，AI 辅助生成 |
| 核心功能 | 赛博城市视觉展示 + 电网断电检测 + 备用电源切换 + 分级负载管理 + 自动恢复 |
| 输出形式 | 一个 .html 文件，浏览器直接打开 |
| 是否需要后端 | 不需要，所有逻辑在浏览器端运行 |
| 是否需要构建工具 | 不需要，用 Claude 生成后本地保存即可 |
| 主要依赖 | Claude（网页版 / Claude Code / API）、浏览器 |
| 本地环境 | Windows / macOS / Linux 均可 |
| 硬件门槛 | 无特殊要求，普通电脑浏览器可运行 |
| 是否支持二次修改 | 支持，让 Claude 继续改代码或手动编辑 |
| 是否支持批量生成 | 支持，通过 API 或脚本批量调用 Claude 生成不同城市版本 |
| 适合人群 | 前端开发者、AI 编程爱好者、想做交互 Demo 的技术人 |
| 使用边界 | 生成结果需要人工复核，涉及素材与数据需确认授权 |
从能力速览可以看到，这个项目的门槛非常低：只要有一个能访问 Claude 的账号，就能复现。重点是 Claude 能不能一次性把“城市视觉 + 电网模拟逻辑”融合好，以及生成的代码是否具备可维护性。
2. 适用场景与使用边界
这个项目适合三类人。
第一类是前端开发者，想验证 Claude 写复杂交互组件的能力。赛博城市看起来是视觉作品，但内部其实是典型的“状态驱动 UI”：城市不同区域的灯光亮度、颜色、闪烁频率都由电网状态决定。这种场景在真实业务里很常见——比如大屏监控系统、物联网设备状态面板、游戏 HUD，都属于同一类交互模式。你可以把 Claude 生成的代码当成一个可运行的参考实现。
第二类是 AI 编程玩家，想用一个有趣的项目对比不同模型或不同提示词策略的效果。同一个提示词，让 Claude 生成一版，再让其他模型生成一版，对比代码结构、逻辑完整度和视觉完成度，是很好的评测方法。
第三类是技术内容创作者，需要快速做一个有视觉冲击力的演示 Demo，用于录视频、写文章或做线下分享。单文件 HTML 意味着你可以直接把它丢到任何机器上打开，不需要部署环境。
使用边界也需要说清楚。首先，Claude 生成的是“模拟逻辑”，不是真正的城市电力系统，它只是在前端模拟了断电和恢复过程，不能用于真实电力控制。其次，生成代码可能包含视觉素材的占位符或第三方风格参考，如果要商用，需要确认素材授权。最后，如果你在代码里加入了真实地图、真实建筑数据或真实人物形象，要特别注意隐私和版权合规问题——本文的案例全部使用虚拟城市背景，不涉及真实数据。
3. 环境准备与前置条件
在做这个项目之前，建议先检查本地环境。
3.1 基础环境
这个案例对环境的要求很低：
| 项目 | 要求 | 说明 |
|---|---|---|
| 操作系统 | Windows 10/11、macOS、Linux | 无差异 |
| 浏览器 | Chrome / Edge / Firefox 最新版 | 需要支持 ES6+ 语法 |
| Claude 账号 | Claude 网页版或 API Key | 按实际网络环境确认访问方式 |
| 代码编辑器 | VS Code Recommended | 用于查看和修改生成的 HTML |
| Node.js | 可选 | 如果要用 API 脚本调用，建议 Node 18+ 或 Python 3.9+ |
3.2 Claude 使用方式选择
本项目可以用三种方式调用 Claude：
- Claude 网页版：直接把提示词发给 Claude，让它在对话框里生成完整 HTML，然后你手动保存为 .html 文件。
- Claude Code：在终端里通过命令行交互，让 Claude 直接在当前目录生成文件，适合批量迭代。
- Claude API：通过 Python / Node 脚本调用，适合批量生成多个版本，同时记录生成日志。
如果你是本机第一次使用 Claude Code，可能会遇到error: claude native binary not installed. either postinstall did not run这类错误。这通常是因为安装过程中依赖没有完整写入，常见处理方式是重装 CLI 包、检查 Node.js 版本，或根据官方提示手动执行依赖安装命令。这部分在后面的常见问题章节会展开。
3.3 本地预览工具
生成 HTML 后，最简单的方式是双击文件在浏览器打开。但如果你需要调试，建议在 VS Code 里安装 Live Server 插件，或者用 Python 起一个静态服务：
# 在 HTML 文件所在目录启动静态服务 cd your-project-dir python3 -m http.server 8080然后浏览器访问http://localhost:8080。这种方式的好处是后续如果要接 API 或加载外部资源，不会有本地文件访问限制。
4. 用 Claude 生成“断电自救”赛博城市：提示词设计与生成流程
这一节是整个项目的核心。我会先给出一套可复用的提示词，再说明生成流程和核心代码逻辑。
4.1 提示词设计：把需求讲成“状态机”
给 Claude 写提示词，最忌讳只写一句“帮我做一个赛博城市”。你需要把功能需求、交互逻辑、视觉风格和代码约束说清楚。
下面是我整理的提示词模板，你可以直接复制使用：
请用单个 HTML 文件实现一个“会断电自救的赛博城市”交互动画页面。 功能需求： 1. 页面左侧或全屏展示一座赛博朋克风格的城市夜景，包括建筑剪影、霓虹灯、道路车流和天空氛围。 2. 页面顶部显示城市电网状态面板，包括：主电网状态（正常/故障/恢复中）、电压数值、频率数值、备用电池电量百分比、当前负载功率。 3. 页面提供按钮：模拟断电、模拟电压跌落、恢复供电。 4. 当主电网正常时，城市灯光正常亮度，建筑霓虹灯闪烁。 5. 点击“模拟断电”后，主电网状态变为故障，电压逐步下降，城市灯光开始闪烁并变暗。 6. 断电后 2 秒内，备用电池自动接管供电，电压稳定在应急值，但非关键负载被切断：商业区灯光变暗，住宅区保留低亮度照明，医院和通信塔保持全亮度。 7. 页面显示当前负载分级：关键负载、重要负载、普通负载，并以不同颜色标识。 8. 点击“恢复供电”后，主电网电压逐步回升，2 秒后切换到主电网供电，并开始给备用电池充电，充电进度需要在面板中实时显示。 9. 城市视觉需要随电网状态变化：正常=彩色霓虹，故障=红色警报光效，应急=低亮蓝白色，恢复=亮度渐变回升。 10. 所有状态切换需要平滑过渡，不要突变。 技术约束： - 使用原生 HTML + CSS + JavaScript，不引入任何外部库。 - 代码必须放在一个 .html 文件里。 - JavaScript 逻辑需要结构清晰，使用类或模块化对象管理状态，不要写成一堆全局函数。 - 使用 canvas 或 DOM + CSS 实现城市夜景，优先选择 CSS 过渡实现灯光变化。 - 页面需要有注释说明关键函数。这段提示词的关键点是：
- 把“断电自救”拆成明确的四个状态：正常、断电、应急、恢复。
- 把“自救”逻辑拆成两条闭环：断电后的备用电源切换闭环，恢复后的主电切换与充电闭环。
- 给出视觉反馈规则，让 Claude 知道状态变化时要同时改哪些 UI。
- 给出技术约束，避免 Claude 引入外部依赖。
4.2 生成流程：从对话到单文件项目
拿到 Claude 返回的代码后，建议按下面几步操作：
- 在 Claude 的对话中要求“输出完整代码，不要省略任何 CSS 和 JavaScript”。
- 把返回的代码复制到本地，命名为
cyber-city.html。 - 用浏览器打开，确认页面能正常渲染。
- 如果页面打开后是空白，优先检查代码是否被截断，或者 Claude 是否只输出了片段。
- 如果功能不全，直接针对缺失的部分继续提问，例如“补充断电后备用电池切换的动画效果”“把负载面板改成表格形式”。
4.3 核心逻辑参考：一个可复用的状态机
为了让你看清楚 Claude 要实现的逻辑结构，下面给出一段核心代码参考。这段代码不是唯一答案，但它体现了“状态管理”的标准写法：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>赛博城市电源管理系统</title> <style> body { margin: 0; background: #0a0a1a; color: #c0d0ff; font-family: monospace; } #city { width: 100vw; height: 70vh; position: relative; overflow: hidden; } .building { position: absolute; bottom: 0; background: #1a1a3a; } .status-panel { display: flex; gap: 20px; padding: 12px 20px; background: rgba(0,0,0,0.6); border-bottom: 1px solid #334; } .status-item { border-left: 3px solid #0af; padding-left: 10px; } button { margin: 10px; padding: 8px 16px; cursor: pointer; } </style> </head> <body> <div class="status-panel"> <div class="status-item">主电网：<span id="gridStatus">正常</span></div> <div class="status-item">电压：<span id="voltage">220</span>V</div> <div class="status-item">电池：<span id="battery">100</span>%</div> <div class="status-item">负载：<span id="load">380</span>kW</div> </div> <div id="city"></div> <button onclick="powerSystem.simulateBlackout()">模拟断电</button> <button onclick="powerSystem.simulateRestore()">恢复供电</button> <script> class PowerSystem { constructor() { this.state = 'normal'; // normal | blackout | emergency | restoring this.voltage = 220; this.battery = 100; this.load = 380; this.timer = null; } updateUI() { document.getElementById('gridStatus').textContent = this.state === 'normal' ? '正常' : (this.state === 'restoring' ? '恢复中' : '故障'); document.getElementById('voltage').textContent = this.voltage.toFixed(1); document.getElementById('battery').textContent = Math.floor(this.battery); document.getElementById('load').textContent = Math.floor(this.load); } simulateBlackout() { if (this.state !== 'normal') return; this.state = 'blackout'; this.voltage = 190; this.updateUI(); // 2秒后切换到应急电源 setTimeout(() => this.switchToEmergency(), 2000); } switchToEmergency() { this.state = 'emergency'; this.voltage = 110; this.load = 120; // 非关键负载已切断 this.updateUI(); } simulateRestore() { if (this.state === 'normal') return; this.state = 'restoring'; this.voltage = 180; this.updateUI(); // 2秒后恢复主电并开始充电 setTimeout(() => this.restoreMainPower(), 2000); } restoreMainPower() { this.state = 'normal'; this.voltage = 220; this.load = 380; this.updateUI(); // 模拟电池充电 this.timer = setInterval(() => { if (this.battery >= 100) { clearInterval(this.timer); return; } this.battery += 1; this.updateUI(); }, 100); } } const powerSystem = new PowerSystem(); window.powerSystem = powerSystem; </script> </body> </html>这段代码是一个最小可运行的电源管理状态机。Claude 在这个基础之上，还会补上城市建筑绘制、灯光颜色切换、粒子特效、故障警报等视觉层。你不需要手写完整版本，但你要理解这套状态机是怎么工作的，这样才能判断 Claude 生成的结果对不对。
4.4 让 Claude 继续迭代
第一版生成的结果通常不会完美，常见情况是“城市出来了但断电逻辑没生效”或者“断电逻辑有了但视觉变化不明显”。这时候不要重新生成整个页面，而是让 Claude 做局部修改：
保留现有的电源状态机，只调整以下内容： 1. 建筑霓虹灯的颜色需要根据 state 自动切换：normal 用品红+青色，blackout 用红色，emergency 用蓝白色。 2. 在页面右下角增加一个“负载分级”面板，显示关键负载、重要负载、普通负载三个条形图。 3. 增加电压跌落时的屏幕震动效果。这种增量式提问，比重新写一版更节省时间，也能让 Claude 保持已有代码结构，减少新 bug。
5. 功能测试与效果验证
生成代码后，不能只看“页面能不能打开”，要把“断电自救”的每一个环节单独验证。
5.1 基础渲染测试
打开页面后，先确认以下内容是否正常：
- 城市夜景是否渲染出来，建筑和霓虹灯是否存在。
- 状态面板是否显示“主电网：正常”。
- 电压是否稳定在 220V 左右，电池电量是否满电。
- 控制按钮是否可点击。
如果页面白屏，打开浏览器开发者工具（F12），查看 Console 是否有 JavaScript 报错。最常见的报错是代码被截断导致的语法错误，比如少了}或)。
5.2 断电触发测试
点击“模拟断电”按钮，观察以下变化：
- 主电网状态是否从“正常”变成“故障”。
- 电压是否从 220V 逐步下降而不是突然跳变。
- 城市灯光是否开始闪烁或变暗。
- 是否在 2 秒左右切换到应急模式。
判断标准：电压变化是渐变的，断电后的视觉反馈是明显的，不能出现“点了按钮但页面完全没反应”的情况。
如果点击按钮没有反应，先检查按钮的onclick绑定是否指向了正确的对象。常见错误是window.powerSystem没有暴露到全局作用域。
5.3 备用电源切换测试
断电后 2 秒左右，页面应该进入“应急”状态。这时候检查：
- 电压是否稳定在应急值（比如 110V）。
- 状态面板显示当前为“故障”或“应急”。
- 负载功率是否明显下降，这说明非关键负载被切断了。
- 医院、通信塔等关键区域是否保持高亮。
判断标准：切换过程是自动完成的，不需要用户第二次点击。如果备用电源没有自动接管，说明setTimeout逻辑有问题，或者在switchToEmergency方法里没有更新城市灯光的视觉状态。
5.4 负载分级验证
这里要看 Claude 是否实现了“分级切断”的逻辑。理想情况下，断电后：
- 关键负载（医院、通信塔）：保持全亮度或最高优先级。
- 重要负载（交通信号灯、安保系统）：中等亮度，低频闪烁。
- 普通负载（商业霓虹灯、住宅区）：降为低亮度或被切断。
如果你在页面上看不到负载分级面板，可以要求 Claude 在状态面板中增加可视化模块。这一步是“断电自救”的核心卖点，值得花时间打磨。
5.5 恢复供电测试
点击“恢复供电”按钮，观察：
- 电压是否从应急值逐步回升。
- 2 秒后是否切回主电网状态，状态面板是否显示“恢复中”再变回“正常”。
- 电池电量是否开始缓慢增加。
- 城市灯光是否从低亮状态逐步恢复到全彩状态。
判断标准：恢复是渐变的，不能从应急状态瞬间跳回正常。如果恢复时出现闪屏或颜色突变，多半是过渡动画没写好，可以让 Claude 给城市灯光增加transition过渡属性。
5.6 测试结果记录
建议你准备一个测试记录表：
| 测试项 | 预期结果 | 是否通过 | 备注 |
|---|---|---|---|
| 页面渲染 | 城市夜景完整显示 | 通过 / 不通过 | 记录浏览器类型 |
| 断电触发 | 电压下降、灯光变暗、状态切换 | 通过 / 不通过 | 记录耗时 |
| 备用电源切换 | 2秒内自动接管 | 通过 / 不通过 | 记录负载变化 |
| 负载分级 | 关键负载保持高亮 | 通过 / 不通过 | 记录差异 |
| 恢复供电 | 电压回升、电池充电 | 通过 / 不通过 | 记录充电速度 |
| 控制台无报错 | 无 JS 错误 | 通过 / 不通过 | 记录报错信息 |
5.7 常见失败原因
- 页面白屏：大概率是代码被截断或复制不完整，重新让 Claude 输出完整代码。
- 断电后没有反应：检查按钮绑定和
PowerSystem对象是否实例化成功。 - 切换太快没有过渡：Claude 可能只改了数值没加动画，要求补
CSS transition。 - 电池充电太慢或太快：原因可能是
setInterval时间设置不合理，让 Claude 改成每秒加 1%。 - 城市建筑没有变色：视觉状态没有和
state绑定，继续让 Claude 修改。
6. Claude Code / API 接入与批量生成
如果你只想做一次实验，网页版就够用了。但如果你想批量生成多个风格的赛博城市，或者想把生成过程纳入自动化流程，就需要用 Claude Code 或 API。
6.1 Claude Code 方式
Claude Code 是 Anthropic 提供的终端编程工具，可以在项目目录里直接和 Claude 对话，它会自己创建或修改文件。安装后的基础使用流程是：
# 进入项目目录 cd cyber-city # 启动 Claude Code claude然后在交互界面中输入提示词：
在当前目录创建 cyber-city.html，实现一个赛博城市页面，包含电网状态管理、模拟断电、备用电源切换、恢复供电等功能。代码必须是完整可运行的单文件 HTML。Claude Code 的优点是：它会直接在文件系统里写文件，省去手动复制保存的步骤，而且后续修改可以只给增量指令。缺点是初次安装偶尔会遇到二进制文件未安装的问题，这个在排查章节给出方案。
6.2 Claude API 调用示例
如果你想把生成过程脚本化，可以用 Python 调用 Claude API。下面是一个通用模板：
import requests API_URL = "https://api.anthropic.com/v1/messages" API_KEY = "your-api-key" # 替换为实际 Key MODEL = "claude-3-5-sonnet-20241022" # 以实际可用模型为准 headers = { "x-api-key": API_KEY, "anthropic-version": "2023-06-01", "content-type": "application/json" } prompt = """请生成一个单文件 HTML 赛博城市页面，要求包含： 1. 城市夜景渲染 2. 电网状态面板 3. 模拟断电按钮 4. 备用电源自动切换 5. 恢复供电后电池充电 请输出完整代码。""" payload = { "model": MODEL, "max_tokens": 8000, "messages": [ { "role": "user", "content": prompt } ] } response = requests.post(API_URL, headers=headers, json=payload, timeout=180) result = response.json() # 从返回结果提取代码文本 if "content" in result: for item in result["content"]: if item.get("type") == "text": code_text = item["text"] # 保存为 HTML 文件 with open("cyber-city-generated.html", "w", encoding="utf-8") as f: f.write(code_text) print("HTML 文件已生成") else: print("API 调用失败：", result)使用 API 时要注意几点：
model名称要按你的实际可用模型填写，不同时期可用的模型名可能不同。max_tokens要设置足够大，否则生成的 HTML 代码会被截断。- API 返回的内容可能包含代码块标记（
```html），写入文件前需要清理。 - 调用频率要控制，不要超出账号的速率限制。
6.3 批量生成思路
批量生成多个赛博城市版本，可以按两步来做：
第一步，准备一个 Prompt 模板文件，模板中留出可替换变量：
请生成一个单文件 HTML 赛博城市，城市主题风格为：{{STYLE}}。 电网核心逻辑保持不变，包括主电网状态、备用电源、负载分级、自动恢复。第二步，写一个 Python 脚本，循环替换风格变量并调用 API：
styles = ["霓虹紫色", "赛博黄绿", "雪夜冷蓝", "废土橙红"] for i, style in enumerate(styles): prompt = f"请生成一个单文件 HTML 赛博城市，城市主题风格为：{style}。电网核心逻辑保持不变，包括主电网状态、备用电源、负载分级、自动恢复。请输出完整代码。" # 这里调用 API，代码同上一节的 requests 模板 # 将返回内容保存为 city_{i}.html print(f"已生成 {style} 版本")批量生成时一定要加日志和异常捕获，比如单次请求失败要重试，连续失败要暂停几秒。因为大模型接口是异步服务，批量高并发容易触发限流。
7. 资源占用与性能观察
这个项目是纯前端页面，资源占用不高，但仍然有一些性能点值得关注。
7.1 浏览器资源占用
打开生成的 HTML 页面后，可以按 F12 打开开发者工具，在 Performance 面板点击录制，然后执行一次“断电 -> 应急 -> 恢复”的完整操作，观察 CPU 占用和帧率变化。
如果页面使用 CSS 动画和transition实现灯光变化，通常 CPU 占用很低。如果 Claude 使用了 Canvas 逐帧绘制大量粒子或灯光，CPU 占用会明显增加。从实现角度看：
- CSS 动画 + transform：性能最好，推荐。
- Canvas 逐帧绘制：效果上限高，但需要控制粒子数量和绘制频率。
- 大量 DOM 节点频繁修改样式：性能较差，容易卡顿。
7.2 如何降低卡顿
如果页面在断电切换时出现卡顿，可以这样调整：
- 降低城市建筑数量，比如从 100 栋减少到 60 栋。
- 把霓虹灯闪烁频率从 10ms 一次降低到 100ms 一次。
- 将动画从
requestAnimationFrame改为 CSS 过渡，让浏览器自动优化合成。 - 精确控制定时器数量，不要让多个
setInterval同时运行。
7.3 定时器管理提醒
代码里的备用电源切换、电池充电、电压恢复都依赖定时器。如果定时器没有清理，连续多次点击“模拟断电”“恢复供电”会导致多个定时器并发运行，出现“电池越充越少”或“电压反复跳变”的 bug。最佳实践是：每次状态切换前，先清除旧的定时器。
你可以在 Review 生成的代码时重点检查：setTimeout和setInterval是否被保存为变量，状态切换时是否调用clearTimeout/clearInterval。如果 Claude 没有处理，直接要求它补上。
8. 常见问题与排查方法
下表整理了从安装 Claude 工具到运行 HTML 页面可能遇到的高频问题：
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
Claude Code 报error: claude native binary not installed. either postinstall did not run | CLI 依赖没有完整安装 | 检查安装日志，确认 Node.js 版本 | 重装 CLI，清理缓存后重新执行安装命令；如果仍失败，查看官方安装文档，按平台执行手动安装步骤 |
| 网页版 Claude 提示新用户不可用 | 账号注册时间或地区限制 | 查看 Claude 官方状态页和账号设置 | 按你所在地区的可用情况处理，可查看是否有官方支持的入口；不要使用非官方代理或绕过限制的工具 |
| 生成的 HTML 文件双击打不开 | 文件被系统拦截或路径含特殊字符 | 用浏览器“打开文件”功能选择该文件 | 把文件放到英文路径下，用 Live Server 或静态服务打开 |
| 页面白屏 | 代码复制不完整或缺少闭合标签 | 打开开发者工具查看 Console 报错 | 重新让 Claude 输出完整代码，或手动补全缺失标签/括号 |
| 点击按钮无反应 | 按钮绑定对象未暴露到全局作用域 | 查看 Console 是否有“xxx is not defined”报错 | 在 JS 末尾增加window.powerSystem = powerSystem |
| 断电后没有自动切换备用电源 | setTimeout逻辑缺失或被覆盖 | 搜索代码中的switchToEmergency是否有调用 | 让 Claude 检查断电流程的状态机调用关系 |
| 电压变化是瞬变而非渐变 | 没有使用 CSS transition 或阶段性更新 | 检查状态切换处是否直接赋值 | 增加transition: all 1s ease或按步长更新电压值 |
| 电池充电不停止 | setInterval没有被清除 | 在电池到达 100 时打日志 | 在restoreMainPower方法中clearInterval |
| 页面动画卡顿 | 粒子数量过多或 DOM 操作频繁 | 用 Performance 面板查看耗时 | 降低粒子数量，改用 CSS 动画 |
| API 生成代码被截断 | max_tokens设置过小 | 查看返回内容末尾是否有未闭合标签 | 调大max_tokens，或要求 Claude 分模块输出 |
| API 调用频繁报限流 | 超出账号速率限制 | 查看 API 响应中的限流信息 | 增加请求间隔，加入指数退避重试逻辑 |
需要特别提醒：如果你在本地安装 Claude Code 或调用 API 时遇到与账号、地区相关的问题，最稳妥的方式是查看 Anthropic 官方文档和当前可用服务范围，按官方支持的方式处理。不要使用任何非官方渠道或绕过限制的脚本，这样既不稳定，也有合规风险。
9. 最佳实践与使用建议
9.1 提示词拆到“可验证”的粒度
让 Claude 生成大文件时，不要一次性要求“做一个完美的赛博城市”。可以把需求拆成三个可验证的阶段：
- 先做城市静态画面 + 状态面板。
- 再加断电、恢复的状态机逻辑。
- 最后加负载分级、电池充电、警报特效等细节。
每完成一个阶段，就在浏览器里验证一次。这样出问题时，你能很快定位是视觉层的问题还是逻辑层的问题。
9.2 保留每个迭代版本
AI 生成的代码经常会出现“改 A 坏了 B”的情况。建议每次让 Claude 修改前，把当前cyber-city.html复制一份备份，例如cyber-city-v1.html、cyber-city-v2.html。这样如果某次迭代效果变差，可以直接回退，不需要让 Claude 再重新生成。
9.3 让 Claude 写注释和状态说明
在提示词里明确要求“每个关键函数都要有注释”。Claude 生成的注释文档写得很规范，这对后续人工维护很有帮助。你也可以让 Claude 在文件头部生成一段“状态说明”，标注四种状态和切换条件。
9.4 注意合规与授权
虽然这个项目是虚拟城市，不涉及真实数据，但在以下情况中要有意识地检查：
- 如果你让 Claude 生成包含真实城市名的版本，只用于个人学习演示，不要暗示真实城市状态。
- 如果你使用 Claude 生成了人物角色、真实肖像或特定品牌元素，必须确认你拥有对应授权。
- 如果你准备把这个页面商用，比如作为公司大屏模板售卖，需要确认代码中使用的字体、图标、配色灵感是否有版权限制。
9.5 形成自己的调试循环
AI 编程的关键不是“让 AI 一次写对”，而是“快速分析错误并继续对话”。推荐这个循环：
- 浏览器打开页面，点击按钮，观察现象。
- 按 F12 查看 Console 报错。
- 把报错信息原样发给 Claude。
- 要求 Claude 给出修复后的完整函数或文件。
- 替换代码，重新测试。
这个循环跑熟之后，你会发现大多数问题在 2 到 3 轮对话内就能解决。
10. 总结与下一步
这个项目最值得尝试的一点，是它能在纯前端环境里模拟一套“城市级电源自救系统”。你不需要懂电力系统，只需要理解状态机，就能让 Claude 把“断电检测、备用切换、分级负载、自动恢复”做成一个可交互的 HTML 页面。对 AI 编程感兴趣的人来说，这是一个很好的起点：逻辑不复杂，但足够展示 Claude 的代码组织能力。
建议你最先验证三个功能：断电按钮能不能触发电压下降、备用电源能不能在 2 秒后自动接管、恢复供电后电池能不能自动充电。这三个功能跑通，整个“断电自救”的核心就成立了。
最容易踩的坑集中在定时器管理上：多个setInterval并发运行、切换状态时没有清除旧定时器、电池充电到 100 后没有停止。如果测试时发现数值异常，优先检查这块逻辑。
后续可以继续扩展的方向不少：给城市增加昼夜循环，让电网状态在白天和夜晚有不同表现；增加多城市视图切换，一座城市断电不影响另一座；把状态面板改成真实的大屏监控样式，用 WebSocket 推送模拟数据；或者把生成任务接到 GitHub Actions 上，每天自动生成一个新的赛博城市版本。这个案例从“能跑”到“能玩出花”，空间很大，建议收藏备用。