这次我们用 Claude 现场做了一个有点“邪门”的 HTML 项目一个会断电自救的赛博城市。整个页面就是一个单文件 HTML打开浏览器就能跑不需要 GPU、不需要本地模型、不需要安装什么推理框架所有逻辑都由 Claude 现场生成。更有意思的是这个城市不是只有霓虹灯和楼房的“好看皮肤”它本身内置了一套简易电力系统一旦断电按钮被触发城市会进入应急模式关键设施自动切到备用电源过一段时间还会尝试恢复全区供电。这类玩法非常适合想快速体验 AI 写代码、又不想折腾大模型本地部署的人。你不需要关心显存、模型权重、CUDA 版本只要有 Claude 账号能打字就能让它在几分钟内生成一个可交互的前端页面。文章我会按这个顺序讲先看 Claude 做这个项目的能力边界再讲怎么用 Claude 网页版和 Claude Code 两种方式生成 HTML然后给出完整的赛博城市提示词模板接着做功能测试、看断电自救逻辑怎么验证最后补上 Claude Code 常见的安装报错和 API 批量生成方案。想直接上手的朋友建议跳到第三节开始照做。1. 核心能力速览能力项说明项目类型Claude AI 生成的单文件 HTML 交互页面核心玩法赛博城市展示 断电模拟 备用电源切换 自动恢复技术栈HTML CSS JavaScript纯前端、无外部依赖生成工具Claude 网页版或 Claude Code 命令行运行方式浏览器直接打开 HTML 文件或本地静态服务访问硬件要求普通电脑即可无需 GPU / 独立显卡是否支持 API支持可通过 Claude API 批量生成多个页面变体是否支持批量任务支持修改提示词后可通过脚本反复调用生成是否支持本地集成支持生成的 HTML 可以放进任意前端工程或静态站点典型场景AI 前端编程体验、创意网页开发、断电模拟演示、教学案例这里最重要的判断是这个项目不是模型部署类任务而是“AI 生成静态页面”的典型场景。好处是门槛极低浏览器就是全部环境限制是交互动效完全取决于 Claude 生成的 JavaScript 质量如果生成结果不理想你需要靠对话继续调而不是换一个模型参数。2. 适用场景与使用边界先说适合谁。如果你平时写前端、做独立开发可以用 Claude 快速出原型。赛博城市这种带视觉效果、动画逻辑、状态切换的页面非常适合验证 Claude 对复杂前端需求的拆解能力。你不需要先会写完整的 Canvas 动画只要能把需求描述清楚Claude 能帮你搭骨架。如果你在做技术内容、教学课件也可以拿这个例子当素材。一个 HTML 文件里同时包含城市渲染、电源状态机、定时器、DOM 事件绑定适合给学生或观众演示“AI 怎么把抽象需求变成可运行代码”。如果你是 AI 工具收集爱好者想体验 Claude Code 的实际编码能力这种“单一 HTML 文件 明确交互逻辑”的需求比让它改一堆工程化代码更容易看到效果。不合适的场景也要说清楚。如果目标是做一个生产级的城市模拟器需要真实电力调度、多用户同步、后端存储那单文件 HTML 就不够Claude 生成的内容只能当原型不能直接上线。另外页面里如果用了大量粒子动画、频闪灯光对光敏人群不友好发布到公开网络前要谨慎。合规边界也要注意Claude 生成的页面代码、美术风格如果用于商业项目建议确认一下所使用模型的输出条款和素材版权不要用这类 HTML 页面包装、传播任何违规内容也不要在未授权情况下模拟或恶搞真实城市、组织或人物。演示用的赛博城市名称、标志最好虚构。3. 环境准备与前置条件这个项目对环境要求很低但不同生成路径需要准备的东西不一样。3.1 路径一Claude 网页版生成只需要一个可正常访问的 Claude 账号以及一个现代浏览器Chrome / Edge / Firefox 均可。网页版适合快速验证想法直接在对话框里粘贴提示词Claude 会把完整 HTML 代码贴在回复里你复制保存成index.html即可。如果你遇到网页版提示当前账号不可用或者提示 “new users” 访问受限说明账号当前可能不支持新的会话申请。这种情况不用急着折腾本地工具可以先检查账号订阅状态或者改用团队/教育渠道开通的账号。能否访问以官方实际可用状态为准。3.2 路径二Claude Code 命令行生成Claude Code 适合需要反复生成、修改文件、跑脚本的场景。它的前置条件如下Node.js 18 或更高版本具体以官方文档为准。npm 或 npx 可用。Claude 账号并确保订阅权限覆盖 Claude Code 访问。安装命令npm install -g anthropic-ai/claude-code安装完成后在命令行输入claude --version确认是否成功。如果你不想全局安装也可以直接用npx claude-code启动后进入交互式终端输入claude就会开始会话。3.3 项目目录准备建议单独建一个目录存这个实验项目避免和正式工程混在一起mkdir cyber-city cd cyber-city然后创建页面文件。网页版生成时直接把输出的代码保存为index.htmlClaude Code 生成时可以直接让它写文件。3.4 浏览器检查页面打开前先确认浏览器支持localStorage、Canvas、requestAnimationFrame。现在的主流浏览器都支持不用额外配置。如果页面里有中文显示异常检查文件是否以 UTF-8 保存head里是否包含meta charsetUTF-84. 安装部署与启动方式4.1 用 Claude 网页版生成赛博城市 HTML直接打开 Claude 网页版在对话框粘贴下面这段提示词。为了让生成结果更容易跑通我在提示词里做了三条强约束单文件、不依赖外部库、要包含断电自救逻辑。请帮我用纯 HTML CSS JavaScript 生成一个单文件页面主题是“会断电自救的赛博城市”。 要求 1. 城市背景是夜晚有高楼大厦、霓虹灯、路灯、行驶中的车流。 2. 页面顶部有一个电力状态面板显示当前城市供电状态、备用电池百分比、供电模式主电源/备用电源。 3. 页面右下角有一个“触发断电”按钮。点击后主电源停止供电城市大部分灯光闪烁后熄灭但医院、广播塔等关键设施自动切换到备用电源保留微弱灯光。 4. 断电后备用电源开始消耗城市有低概率随机恢复部分区域或者由备用电源支撑一段时间后自动尝试恢复主电源。 5. 页面视觉效果要有赛博朋克感主色调为霓虹品红和青色可以使用暗色背景、发光边框、扫描线效果。 6. 必须是一个 HTML 文件不要拆分多个文件不要引用外部 CDN 资源不要使用图片所有图形用 CSS 或 Canvas 实现。 7. 代码要注明注释方便我理解每个模块的作用。如果 Claude 第一次生成的页面效果不满意可以继续追加要求比如“把车流改成 Canvas 绘制”“增加一格电池电量”“修改恢复时间为 5 秒”。这类对话式迭代是网页版的主场。4.2 用 Claude Code 生成进入之前建好的项目目录cd cyber-city claude然后在 Claude Code 会话里输入同样一段需求并额外要求它直接写文件在当前目录生成 index.html内容是一个会断电自救的赛博城市页面具体要求 - 纯 HTML/CSS/JavaScript单文件不引用外部资源。 - 包含城市夜景、霓虹灯、车辆动画。 - 有电力系统状态面板能显示主电源、备用电池、供电模式。 - 点击按钮触发断电后城市大部分灯光熄灭关键设施用备用电源坚持运行。 - 断电后一段时间自动恢复主电源并伴随恢复动画。 - 写完文件后告诉我怎么在浏览器里打开。Claude Code 通常会直接创建index.html并把文件路径告诉你。结束后用ls -lh index.html确认文件已经生成。4.3 打开页面浏览器直接双击index.html即可。如果页面里有依赖相对路径的模块或者你想模拟正式部署环境可以起一个本地静态服务python -m http.server 8080然后访问http://127.0.0.1:8080。对于单文件页面直接双击更省事。需要注意的是如果页面里使用了fetch加载本地 JSON或者使用 ES Module浏览器可能会对本地文件有限制这时用本地静态服务更稳。5. 功能测试与效果验证生成完 HTML 后不要只截个图就结束。下面是一套可以照抄的验证流程重点看“断电自救”逻辑是否真的成立。5.1 初始状态验证打开页面后先观察顶部电力状态面板。正常情况下应该是这样供电模式主电源。电池电量100%。城市画面灯光正常、车流运行、霓虹灯闪烁。如果页面直接白屏按 F12 打开开发者工具查看 Console 有没有红色报错。最常见的问题是两个一是文件编码导致中文乱码二是 JavaScript 在某一行引用了不存在的 DOM 节点。5.2 断电触发验证点击“触发断电”按钮观察变化主电源状态变为“断开”或类似文字。城市大部分灯光熄灭但关键设施医院、广播塔、安全出口标识仍点亮。备用电池电量从 100% 开始下降。页面出现应急灯光效果。如果断电后所有灯光全部熄灭说明关键设施的“自保”逻辑没生效。可以要求 Claude 把关键设施元素单独加一个 class并通过powergrid对象识别它们。5.3 自动恢复验证等待一段时间如果 Claude 设置了自动恢复计时器通常 5 到 15 秒观察城市是否自动恢复备用电池电量停止下降。供电模式切换回主电源。城市灯光依次由近到远恢复。恢复过程有过渡动画。如果一直不恢复可能是定时器没有正确启动或者恢复函数没有被调用。把问题描述原样抛回给 Claude让它检查setTimeout或requestAnimationFrame的调用链。5.4 多次断电稳定性测试连续触发断电和恢复 10 次观察两个指标页面是否卡顿、掉帧。电池电量是否出现负数或无限下降。如果出现负数说明电量计算逻辑没有加下限保护如果每次恢复主电源后电池不再充电说明备用电池的“充电”逻辑缺失。这些都是很典型的 AI 生成代码问题反馈给 Claude 通常能直接修。5.5 Console 报错检查在 Chrome 里用快捷键CtrlShiftJ打开 Console主动触发断电、恢复、再断电观察有没有Uncaught TypeError。下面是一些常见报错和修复思路报错信息可能原因处理建议Cannot read properties of null某元素 ID 不存在让 Claude 检查 DOM ID 与 JS 引用是否一致is not a function函数定义顺序问题要求 Claude 将函数声明提前或用函数表达式Maximum call stack size exceeded递归没有出口检查车流或灯光更新函数是否无限递归NaN电量数值计算出现字符类型让 Claude 给电池数值加Math.max(0, ...)下限6. 接口 API 与批量生成如果你不满足于只生成一个赛博城市想批量出不同主题的页面就可以走 Claude API 方案。这里的“批量”不是说服务器帮你跑动画而是用脚本反复调用 Claude 接口每次换一个城市主题、一套配色或一组功能点自动生成多个 HTML 文件。6.1 准备 API Key登录 Claude 官方控制台按官方流程创建 API Key。创建后把 Key 放到环境变量里不要写进代码。export ANTHROPIC_API_KEY你的API Key如果你用的是 Claude Code但想让某些请求走 API 而不是订阅额度可以在命令行里临时指定环境变量按官方文档配置即可。6.2 Python 批量生成示例下面是一个通用调用模板实际模型名和请求参数需要按官方最新文档调整。import os import requests api_key os.environ.get(ANTHROPIC_API_KEY) url https://api.anthropic.com/v1/messages headers { x-api-key: api_key, anthropic-version: 2023-06-01, content-type: application/json, } payload { model: claude-sonnet-4-20250514, max_tokens: 8192, messages: [ { role: user, content: 请生成一个单文件 HTML 赛博城市页面主题沙漠废土风要求包含断电自救逻辑。直接输出完整 HTML 代码。 } ] } resp requests.post(url, headersheaders, jsonpayload, timeout300) print(resp.json()[content][0][text])这里需要注意API 的模型名、请求路径和身份认证方式会随官方更新而变化跑之前一定先看官方文档。上面这段代码只展示了调用思路不代表任何稳定接口契约。6.3 批量生成与文件保存批量生成时可以准备一个主题列表循环调用themes [废土, 雪原, 海底, 太空站] for i, theme in enumerate(themes): prompt f生成一个单文件 HTML主题{theme}赛博城市要求包含断电自救逻辑。 # 调用 Claude API拿到 HTML 文本后写入文件 html_content generate_html(prompt) with open(fcity_{i}.html, w, encodingutf-8) as f: f.write(html_content)这种做法的价值在于你可以快速对比不同主题在同一个断电自救框架下的表现找出 Claude 更擅长处理的视觉风格。批量生成前建议加一个最小请求间隔避免触发限流。6.4 批量任务的失败重试建议批量生成最容易出问题的是“中途断连”和“某次结果不完整”。实用做法是每次调用结果落盘不要攒在内存里。生成完检查文件大小比如小于 1KB 就视为失败。失败任务写入fail.log之后统一重跑。对单次请求设置 120 秒以上超时。7. 资源占用与性能观察这个项目没有 GPU 参与所以资源占用主要看浏览器渲染。7.1 观察指标打开 Chrome 开发者工具切到 Performance 面板点击“录制”按钮然后在页面上触发一次断电、恢复再结束录制。重点关注三个指标FPS 帧率如果城市动画一直在跑帧率最好维持在 50 以上。JavaScript 执行时间脚本长任务是否超过 100ms。内存占用长时间反复断电恢复后内存是否持续上升。如果城市元素特别多或者用了大量box-shadow做霓虹灯发光页面可能明显卡顿。此时可以要求 Claude 把重动画改成 Canvas 绘制或者减少发光的元素数量。7.2 如何降低占用从实践来看这几个方法最有效减少box-shadow的使用用扁平色块加边框模拟发光。把车流动画从定时器改成requestAnimationFrame统一驱动。关闭屏幕外不可见区域的动画循环。降低 Canvas 的分辨率按 CSS 大小等比绘制。7.3 端口冲突问题如果用的是python -m http.server 8080而 8080 已被占用会直接报错。换一个端口就行python -m http.server 80908. 常见问题与排查方法问题现象可能原因排查方式解决方案网页版提示当前账号不可用账号订阅状态或访问权限受限检查官方账号状态确认订阅是否有效按官方指引开通或换用有权限的账号error: claude native binary not installedClaude Code 安装时 postinstall 脚本没执行成功重新执行安装命令观察日志删除后重装或手动执行 postinstallYour organization has disabled Claude subscription access for Claude Code组织管理员关闭了订阅访问查看组织后台权限设置联系管理员开启或使用个人账号deepseek-v4-pro is not a model this version of claude code recognizes配置了第三方兼容模型名当前版本不识别检查模型配置与版本升级 Claude Code 或更换模型名页面打开白屏JS 报错或文件编码问题打开 F12 Console 看报错让 Claude 修复对应代码断电后所有灯光全灭关键设施未做特殊逻辑检查电池切换条件要求 Claude 为关键设施单独加状态电池电量变成负数数值计算缺少下限保护查看电量更新代码给电量数值加Math.max(0, 电量)城市动画卡顿大量 DOM 动画或发光效果占用主线程打开 Performance 面板录制改为 Canvas 渲染或减少发光元素9. 最佳实践与使用建议想让 Claude 稳定产出能跑的赛博城市 HTML这几个经验可以用上。第一第一版只要求“能跑”不要追求完美。让 Claude 先生成一个最简结构一个城市背景 一个断电按钮 一个状态面板。跑通以后再逐步加车流、备用电源、自动恢复这样排查问题时定位更轻松。第二把关键状态机写清楚。断电自救的本质是状态切换。如果你让 Claude 实现“断电”“备用电源支撑”“自动恢复”三种状态建议在提示词里给出明确的状态转移规则例如点击断电后进入blackout状态10 秒后尝试进入restore状态恢复动画结束后回到normal。状态机清晰AI 生成的代码才不容易乱。第三要求代码注释。Claude 写代码默认会加注释但如果没说它可能为了省 token 只写少量注释。所以提示词里要加一句“关键逻辑必须有中文注释”。这样你后续要改逻辑可以直接找到对应模块。第四建立统一的页面骨架。如果你打算批量生成多个城市主题先让 Claude 生成一个“标准版本”后续所有主题都基于同一套 HTML 结构和 CSS 变量。你可以在提示词里要求“把所有配色放在:rootCSS 变量里”。这样换主题只是换变量不用重新生成整个文件。第五批量任务一定要留日志。用 API 批量生成时建议每次请求前记录 prompt 编号请求成功后记录文件路径。运行完看日志能快速发现是哪一批任务失败而不是重新跑全部。第六本地测试后再传播。AI 生成的页面包含 JavaScript打开前先确认代码没有恶意逻辑。虽然是静态页面但也要注意从不可信来源拿到的代码可能夹带外部请求。这里我们是通过 Claude 生成相对可控但商用或公开分享前仍建议审查一遍代码。10. 总结与下一步这个“会断电自救的赛博城市”项目最值得尝试的点是用一个几百行的 HTML 文件把 AI 对视觉设计、状态机、事件交互的综合理解一次性展示出来。你不需要装任何本地大模型也不需要看懂复杂的工程代码只要会用 Claude 聊天基本都能拿到一个可运行的页面。如果你接下来想深入可以按这个顺序扩展先跑通单文件断电自救再尝试把城市改成 Canvas 渲染提升性能然后接入天气或用电量数据源做成一个动态能源演示页。更进一步可以把这套“状态机 提示词模板”复用到其他模拟类页面比如火灾逃生模拟、地铁调度模拟验证 Claude 在复杂交互逻辑上的表现。最容易踩的坑就两个一是 Claude Code 安装时的claude native binary not installed解决办法是重装或手动执行 postinstall二是第一次生成的断电逻辑可能没考虑电池下限和恢复条件这时候不要重新生成直接在对话里把问题描述清楚让 Claude 做局部修复效率会高很多。