这次我们来看一个能直接跑起来的 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用于查看和修改生成的 HTMLNode.js可选如果要用 API 脚本调用建议 Node 18 或 Python 3.93.2 Claude 使用方式选择本项目可以用三种方式调用 ClaudeClaude 网页版直接把提示词发给 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 langzh-CN head meta charsetUTF-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 classstatus-panel div classstatus-item主电网span idgridStatus正常/span/div div classstatus-item电压span idvoltage220/spanV/div div classstatus-item电池span idbattery100/span%/div div classstatus-item负载span idload380/spankW/div /div div idcity/div button onclickpowerSystem.simulateBlackout()模拟断电/button button onclickpowerSystem.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, headersheaders, jsonpayload, timeout180) 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, encodingutf-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 脚本循环替换风格变量并调用 APIstyles [霓虹紫色, 赛博黄绿, 雪夜冷蓝, 废土橙红] 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 runCLI 依赖没有完整安装检查安装日志确认 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 上每天自动生成一个新的赛博城市版本。这个案例从“能跑”到“能玩出花”空间很大建议收藏备用。