本地模型实现信息抽取：从选型到工程落地全指南
2026/8/27 23:58:04
这次我们用 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.html；Claude Code 生成时，可以直接让它写文件。
3.4 浏览器检查
页面打开前先确认浏览器支持localStorage、Canvas、requestAnimationFrame。现在的主流浏览器都支持，不用额外配置。如果页面里有中文显示异常，检查文件是否以 UTF-8 保存，<head>里是否包含：
<meta charset="UTF-8">4. 安装部署与启动方式
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 里用快捷键Ctrl+Shift+J打开 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, headers=headers, json=payload, timeout=300) 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(f"city_{i}.html", "w", encoding="utf-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 installed | Claude Code 安装时 postinstall 脚本没执行成功 | 重新执行安装命令，观察日志 | 删除后重装，或手动执行 postinstall |
Your 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 做局部修复，效率会高很多。