最近如果你在关注命令行 AI 编程工具大概率刷到过这样一个标题Show HN: Claude Code Arcade。它看起来像是一个“小游戏合集”但实际价值不止于此——它是一个用 Claude Code 的 Agent 能力自动生成网页小游戏的展示型项目。你给它一句起始提示词它会自己拆解需求、写代码、运行预览、看到报错再修最后交出一个能在浏览器里直接玩的小游戏。整个过程比较直观地展示了“Agent 编程到底能自动到什么程度”。先说结论这个项目适合用来测三件事——你的 Claude Code 环境是否配置正确、你的模型 API 或订阅是否可用、以及当前模型在“真实多文件编码任务”上的完成度。它不依赖本地 GPU不要求高显存只要终端里能跑 Claude Code理论上就能玩起来。硬件门槛很低真正的成本是 API 额度或订阅额度因为每次生成和迭代都会消耗 token。这篇文章不会只介绍概念我会按“环境准备 → 安装 Claude Code → 跑一个 Arcade 任务 → 批量验证 → 接口接入与错误排查 → 性能与成本观察”的顺序展开尽量让读者从 0 到 1 跑通一遍并且搞清楚哪些地方值得踩坑、哪些地方不能盲目相信。如果你正准备拿 Claude Code 做实际开发或者想评估不同模型的 Agent 编码能力这篇可以直接收藏。1. 核心能力速览能力项说明项目类型Agent 编程能力展示 / 自动生成网页小游戏基础依赖Claude Code 命令行工具本地 GPU 需求基本无需求推理在云端完成显存占用视浏览器端渲染而定本地终端运行负载不高主要功能根据自然语言任务自动编写、运行、修复并交付小游戏支持平台安装了 Claude Code 的终端环境Windows / macOS / Linux 均可尝试启动方式命令行启动 Claude Code再进入 Arcade 任务目录是否支持 API取决于 Claude Code 的鉴权方式可使用订阅或 API Key是否支持批量任务可通过脚本循环、非交互参数方式批量跑多个任务适合场景Agent 能力评测、工具链验证、提示词实验、游戏原型演示以上信息里凡是涉及“是否支持”“限制是多少”的细节都比较依赖你本机安装的 Claude Code 版本和模型服务商。做技术选型时不要只看宣传贴建议先按本文第 4 节跑一次最小任务验证。2. 适用场景与使用边界2.1 适合谁用第一类读者是刚接触 Claude Code 的开发者。Arcade 把“AI 写代码”变成一个可视化任务你不需要准备复杂的业务代码库只需要给一个游戏需求然后观察 Claude Code 怎么做规划、怎么写文件、怎么启动本地服务、又怎么在浏览器里预览。它比空跑 hello world 更能帮助你建立对 Agent 工作流的直觉。第二类读者是做模型评估的工程师。Arcade 的每个小游戏都可以成为一个 benchmark 用例用来比较 Claude 官方模型、第三方 API 网关或本地模型服务的差异。判断维度可以是“一次完成度”“修复次数”“生成文件结构是否整洁”“运行是否报错”。第三类读者是想把 Agent 接入实际项目的团队。先通过这种展示型项目验证 Claude Code 的交互模式、上下文管理、权限设置、输出质量再考虑让它处理真实仓库代码风险会小得多。2.2 不适合什么场景不要把它当成“免写代码免费拿游戏”的生产工具。Arcade 的价值是验证与教学不是交付商业游戏产品。它自动生成的代码在架构设计、性能优化、无障碍访问、版权合规上都缺少人工保障直接上生产会有隐患。如果你没有配置好可用的模型凭据也不要指望它能离线生成。Claude Code 依赖云端模型服务没有 API Key 或订阅任务会直接失败。2.3 需要遵守的安全与合规边界使用任何 AI 编程工具都需要注意几个边界不要输入敏感密钥、生产数据库地址、客户隐私数据作为 prompt 上下文。AI 生成的代码仍然要经过人工审查尤其是涉及用户输入、网络请求、文件写入的部分。生成内容可能参考了有版权的素材或命名商用前需要核对。Arcade 的定位是演示与评测不应把其中的生成结果未经验证地直接发布为正式产品。3. Claude Code 本地部署环境准备Arcade 不是一个独立 App它的运行环境本质是 Claude Code。所以安装前先把本地依赖梳理清楚。3.1 操作系统与终端Claude Code 官方通过 npm 分发支持主流的 macOS、Linux、Windows 环境。Windows 上更建议使用 PowerShell 或 Windows Terminal这样路径兼容性和命令粘贴体验会好一些。虽然没有硬性的“必须用 WSL”但如果遇到文件路径或权限问题WSL 环境往往更接近 Linux 服务器行为排查成本更低。3.2 Node.js 环境Claude Code 以 Node.js 工具链的形式安装因此需要先准备 Node.js 和 npm。安装版本不建议太老建议使用 LTS 版本。不同版本的 CLI 对 Node 的底限要求可能不同不要照搬旧教程里的版本号。检查命令node -v npm -v如果命令不存在先去 Node.js 官网安装 LTS 版本。安装完成后重新打开终端确保 npm 在 PATH 中可用。3.3 模型凭据Claude Code 需要鉴权才能调用模型接口。常见两种方式官方账号订阅或 API Key通过环境变量ANTHROPIC_API_KEY提供。第三方兼容服务或企业网关通过自定义 Base URL 与环境变量配置。如果使用订阅登录方式首次运行 Claude Code 时需要完成 OAuth 登录。如果使用 API Key建议不要在命令行里明文长期暴露可以用环境变量文件或系统密钥管理工具加载。export ANTHROPIC_API_KEYyour-api-key-goes-here注意这里只是通用示例。具体环境变量名和支持的鉴权方式要以你使用的 Claude Code 版本说明为准。第三方模型服务商通常会提供自己的 Base URL 和模型名不要把官方变量名直接照搬到所有网关。3.4 磁盘与目录规划Arcade 生成的每个小游戏会包含多个文件建议为每个任务单独建立目录。例如arcade-workspace/ ├── pong/ ├── snake/ ├── breakout/ └── logs/这样能避免不同任务的生成文件互相污染也方便后续批量处理、日志回溯和模型效果对比。4. 安装 Claude Code 并启动 Arcade4.1 安装 Claude Code通过 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后验证claude --version如果你在 Windows 上遇到claude 不是内部或外部命令或could not locate the claude cli on path说明 Node 的全局 bin 目录没有被加入 PATH。排查方式找到 npm 全局安装目录可通过npm prefix -g查看把对应 bin 目录写入 PATH然后重新打开终端。如果你所在环境网络下载 npm 包很慢可以考虑配置镜像源但要注意镜像源安全性尽量使用团队认可的私有 npm 镜像。4.2 首次运行与登录在项目目录下执行claude首次运行通常会要求完成登录或读取 API Key。注意观察终端输出中的 URL 和提示不要跳过授权步骤。如果终端打印了大量乱码或缺少字符渲染优先检查终端编码、字体和语言环境而不是怀疑工具本身坏了。4.3 获取 Arcade 任务内容Arcade 类项目通常会把任务清单放在仓库或文档中。你需要做的是把项目内容拉到本地然后在项目根目录用 Claude Code 打开。不同项目提供的任务描述格式可能不同有的把任务放在tasks/目录有的直接做成 Markdown 卡片有的依赖初始 prompt 触发。一个通用启动流程# 进入你准备好的工作目录 cd arcade-workspace # 用 Claude Code 启动交互式会话 claude然后在会话里输入类似这样的起始指令请读取当前目录下的任务说明从里面选择第一个游戏任务 先分析需求再列出实现步骤然后开始写代码。 运行后如果报错请根据报错信息自行修复直到可以在浏览器中预览。注意这不是某个项目的固定 prompt而是一个可替换的通用模板。Arcade 类项目的实际接入方式以你拿到的项目 README 为准。4.4 观察 Claude Code 的行为启动后你会看到 Claude Code 展示自己的“计划”包括读取哪些文件、创建哪些文件、执行哪些命令。这里值得多看几秒一个成熟的 Agent 不是闷头生成一个 index.html 就结束它往往会先确认入口文件、规划模块结构、安装依赖、启动本地静态服务然后用一个临时端口供预览。如果 Claude Code 在某个步骤询问你是否允许执行命令它会给出将要运行的命令。你可以逐个批准也可以根据项目说明调整权限模型。第一次跑通时建议保持手动批准这样你能随时中断异常操作。4.5 达到什么状态算启动成功判断标准很简单Claude Code 成功创建项目文件。本地终端启动了预览服务。浏览器可以通过返回的地址打开游戏页面。页面没有明显脚本报错交互可控。如果最后一步失败后面的功能测试就不用继续了先回到第 8 节排查原因。5. Claude Code Arcade 功能测试与效果验证Arcade 的核心玩法是让 AI 自动生成可玩的游戏。我们可以用一套标准测试流程来验证它的完成度而不是只凭“看起来能跑”下结论。5.1 任务 A基础可玩性测试目的验证 Claude Code 能否从零生成一个完整、可交互的小游戏。推荐用经典 Pong 或贪吃蛇这类需求边界清晰的游戏做首测用 HTML/CSS/JavaScript 实现一个贪吃蛇游戏。 要求 1. 使用 Canvas 渲染。 2. 键盘方向键控制移动。 3. 吃到一个食物后蛇身加长分数加 1。 4. 撞墙或撞到自己后游戏结束并显示最终分数。 5. 提供一个“重新开始”按钮。 请直接在当前目录创建必要文件不要只写伪代码。操作方式在会话中发送上述文本允许它创建文件和运行命令等生成结束后打开浏览器预览。判断成功页面正常加载。蛇能通过方向键控制。吃食物得分有效。撞墙/撞身后游戏结束。“重新开始”按钮能复位。如果失败优先观察 Claude Code 自己的修复循环。一次失败不可怕关键是它是否能在第二、第三轮尝试中定位问题。这也是评估 Agent 能力的核心指标。5.2 任务 B规则一致性与状态管理测试目的验证“看似能玩”的游戏是否在真实交互中出现逻辑错误。建议选状态较多的游戏例如带关卡和连击计分的打砖块或者带重力与碰撞的 Flappy Bird 变体。测试输入可以强调数据状态基于上一题的游戏代码加入一个计分规则 每击碎一个砖块得 10 分连续击碎 5 个砖块后进入下一关卡。 下一关的砖块行数比当前多 1移动速度增加 10%。 请先说明你如何保存关卡状态再修改代码。观察重点是否真的实现了计分而不是只在界面上显示假数字。连续击碎的计算逻辑是否正确。进入下一关时是否重置了球速、砖块布局以及碰撞状态。测试中是否自己补充了边界情况例如球速过高的物理穿透问题。这类任务能筛掉“只生成静态页面而没有认真实现状态逻辑”的 Agent。5.3 任务 C错误恢复与自我修复测试目的验证 Claude Code 面对运行时报错时的处理能力。你可以主动制造一个容易出错的输入在现有项目里新增一个功能玩家死亡后弹出成绩排行榜 排行数据保存在浏览器 localStorage 中。 请先运行当前项目确认没有语法错误再实现功能。 完成之后故意让某段代码抛出一个异常 观察你能否根据控制台报错定位并修复。更贴近实际的做法是让它先实现功能然后告诉它“我打开控制台发现 xxx 报错”看它是否能通过分析代码定位问题、修改代码、重新运行验证。真实开发中这种“用户反馈 → 定位 → 修复 → 回归”循环正是 Agent 编程最有价值也最容易翻车的环节。判断成功报错信息被正确分析。修改点与报错相关。修复后能重新运行。没有引入新的回归问题。5.4 效果验证小结一次完整的 Arcade 评测应该给每次任务打几个维度的分维度说明首轮完成度不经过修复第一轮生成是否能跑通修复效率出现报错后几轮会话内能修复代码清晰度文件拆分是否合理变量命名是否可读功能覆盖需求中的功能点是否全部实现幻觉率是否使用了不存在的 API、库或伪代码冒充实现Token 消耗单个任务从开始到可玩总计消耗多少上下文不要只记录“最后看起来能玩”要把整个调试过程的时间、轮次、token 趋势记下来这才是模型横向对比的有效数据。6. 接口 API 与批量任务扩展Arcade 本身以人工交互为主但 Claude Code 可以通过非交互模式与脚本结合实现批量评测。注意这套流程不一定适合所有版本也不一定适合所有模型网关建议先看 CLI 帮助确认参数是否支持。6.1 查看非交互参数在当前版本中Claude Code 命令行通常提供用于非交互输出的参数使用前先确认claude --help如果看到类似-p, --print的参数说明支持将 prompt 作为命令行参数传入并直接打印结果。这里只作为查看方法示例具体参数名以本机帮助输出为准。6.2 批量生成游戏任务的脚本示例假设你把多个游戏需求写成了prompts/game1.txt、prompts/game2.txt这样的纯文本文件可以用循环逐个调用 Claude Code#!/bin/bash # 批量执行 Claude Code 任务示例 # 注意具体参数以 claude --help 输出为准 for file in prompts/*.txt; do echo Processing $file ... out_diroutputs/$(basename $file .txt) mkdir -p $out_dir cd $out_dir || exit 1 claude -p $(cat ../../$file) claude_output.log 21 cd ../../ echo Done: $out_dir done这段代码是通用模板生产环境还要考虑超时控制、失败重试和并发限制。直接复制运行前一定要先确认 Claude Code 是否支持你用的参数并保证每次任务启动时工作目录正确。如果你更习惯用 Node.js 脚本管理可以用类似思路const { execSync } require(child_process); const fs require(fs); const path require(path); const promptsDir ./prompts; const outputsDir ./outputs; fs.readdirSync(promptsDir).forEach((file) { if (!file.endsWith(.txt)) return; const prompt fs.readFileSync(path.join(promptsDir, file), utf-8); const taskName path.basename(file, .txt); const outDir path.join(outputsDir, taskName); fs.mkdirSync(outDir, { recursive: true }); try { const command claude -p ${JSON.stringify(prompt)}; const result execSync(command, { cwd: outDir, timeout: 300000, encoding: utf-8 }); fs.writeFileSync(path.join(outDir, result.log), result); } catch (e) { fs.writeFileSync(path.join(outDir, error.log), String(e)); } });注意这个脚本用了同步执行只适合小规模任务。批量任务一旦多起来建议加上队列、超时管理和失败重试。6.3 批量任务的工程建议批量评测真正重要的不是“把多个 prompt 丢给 CLI”而是把每次任务的结果沉淀成可对比的数据。每个任务目录下建议至少保留input.txt本轮输入的 prompt。claude_output.logClaude Code 的完整输出。files/生成的文件。screenshot或preview_result.md预览验证结果。meta.json时间、模型、参数、token 消耗等元信息。有了这些数据你才能回答“这个模型在不同难度任务上的表现如何”而不只是说“它生成了一个贪吃蛇”。7. 资源占用与性能观察7.1 本地资源占用Claude Code 是一个终端 Agent核心推理都在云端模型服务完成所以本地不需要高配置显卡。运行期间真正消耗资源的是终端进程本身。Node.js 运行时。Claude Code 可能调用本地工具执行构建、测试。浏览器预览游戏时页面的渲染与脚本执行。观察方法也比较直观打开系统任务管理器看claude、node进程和浏览器的 CPU 与内存变化。通常不会有很大的显存压力因为这不属于本地大模型推理场景。7.2 Token 与成本观察Arcade 类长流程任务非常消耗上下文。一次“写代码 → 跑起来 → 报错 → 修复”的循环往往意味着多轮工具调用和多文件代码输出累计消耗的 token 会明显高于普通对话。建议每次任务结束后在 Claude Code 会话底部查看 context 使用情况记录输入 token、输出 token、工具调用次数和总耗时。如果你的 API 服务商提供用量面板也可以把任务时间段的消耗量拉出来对比。7.3 最容易忽视的性能瓶颈不是推理速度而是会话长度。任务越复杂上下文越长模型越容易在后续步骤丢失早期约束。如果你的游戏已经有 5 个功能点再让它新增第 6 个功能它可能会忘记第一版的某个细节导致回归。遇到这种情况不要无脑重开一个全新会话可以先把关键需求压缩成明确的变更单描述当前项目贪吃蛇。 已完成canvas 渲染、键盘控制、得分、重新开始。 请新增物体加速机制。 要求不能改变键盘控制逻辑。 在修改前先阅读 game.js 文件确认当前实现。这种“更小上下文、更明确改动范围”的提问方式才是 Agent 协作中更可控的操作习惯。8. 常见问题与排查方法下面这些问题来自 Claude Code 日常使用中高频出现的现象适用于 Arcade 类项目也适用于把 Claude Code 接入其他项目的场景。问题现象可能原因排查方式解决方案启动后 claude 命令不存在npm 全局目录不在 PATH 中执行npm prefix -g查找目录将 bin 目录加入 PATH 后重启终端安装包成功但运行报无法定位 CLIWindows 终端环境未刷新检查新终端窗口重新打开终端或用npx claude验证提示 model is not a model this version recognizes当前 CLI 版本不认识配置的模型名查看帮助与版本说明升级 CLI 版本或核对模型服务商提供的模型名提示 organization has disabled subscription access订阅账号被组织策略限制检查企业控制台联系管理员开启权限或改用 API Key 方式在 settings.json 中接入模型无效Base URL 或环境变量配置位置错误查看 CLI 日志按官方文档把变量写入正确位置后重启会话执行任务时输出乱码终端编码或语言环境异常检查终端编码设置切换 UTF-8 编码并重试游戏页面打开了但键盘没反应浏览器对 iframe 或 Canvas 焦点处理问题打开控制台看报错点击游戏区域后再按键或让 AI 检查 focus 处理生成结果一直停留在同一个报错上下文过长或修复方向不对中断会话改用最小复现问题重开会话并只给一段最小报错信息批量脚本运行到某任务卡死命令执行超时且没有超时控制检查进程状态在脚本中加 timeout 与固定重试次数截图预览与实际交互不一致Agent 只验证静态首屏未做交互测试自行手动操作一遍在 prompt 中要求“必须实际点击和键盘操作验证”8.1 一个典型的“模型名不被识别”场景如果你配置了第三方模型服务启动后却看到类似下面的错误xxx is not a model this version of claude code recognizes大概率不是模型真的不存在而是 Claude Code 版本与服务商提供模型名之间的适配问题。排查顺序建议是确认 Claude Code 版本是否过旧过旧就升级。检查ANTHROPIC_MODEL或配置文件中模型名是否填写准确。查看服务商文档确认是否需要在 Base URL 中包含额外的路径前缀。尝试先切换到官方默认模型验证配置环境本身是否正常。这里最容易踩的坑是“只改模型名但不改 Base URL”。很多第三方网关在转发不同模型时要求 Base URL 也同步调整模型名与网关不匹配时CLI 报错会非常难懂。8.2 如何避免端口冲突Arcade 生成游戏后通常会启动一个本地静态服务。如果你的电脑已有多个开发服务在运行端口可能被占。第一次报错时不要急着换端口先看日志中提示的是哪个端口无法绑定再决定是停掉旧进程还是修改新服务端口。# 查看端口占用macOS / Linux lsof -i :4173 # 查看端口占用Windows PowerShell netstat -ano | findstr :4173注意端口号要替换成你实际看到的值。如果发现旧进程残留找到 PID 后按需结束进程。9. 最佳实践与使用建议9.1 第一次使用先跑单个最小任务不要一上来就把整个 Arcade 的全部游戏需求塞给 Claude Code。先挑一个你完全清楚预期结果的游戏比如贪吃蛇。因为当你了解预期行为时才能判断 Agent 生成的代码是“真的实现了”还是“看似实现了”。第一次跑通后再逐步增加游戏复杂度。9.2 严格管理生成目录建议为每一次评测建立独立目录目录名与任务名保持一致。Arcade 项目中的生成文件命名可能比较规律但你自己的评测记录必须更系统输入、输出、日志、截图分开存放。否则第二次评测时很容易把上一轮的调试信息当成当前依赖造成误判。9.3 Prompt 里明确验收标准给 Claude Code 下任务时不要只说“做一个游戏”要把验收标准写清楚。比如渲染技术、控制方式、计分规则、游戏结束条件等。明确的验收标准会让生成质量和后续修复效率明显提升。9.4 控制单次任务的上下文长度如果一个任务已经连续修复 20 轮最佳选择不是继续对话而是停下来梳理问题、重开一个新会话并把当前文件状态、已实现功能、剩余问题压缩成一段上下文描述。这样看起来“断了上下文”实际比在脏上下文中继续叠错误要高效得多。9.5 不要把 AI 生成的代码直接作为最终交付哪怕是 Arcade 这种相对简单的游戏页面生成后仍然要做三件事人工读一遍关键交互代码确认没有逻辑漏洞。在真实浏览器中执行一遍完整路径不只依赖截图。检查是否有对第三方资源的引用、是否需要版权声明或额外授权。如果你的场景是把 Claude Code 接入团队真实业务更要设置明确的代码评审和权限边界。Claude Code 在本地执行的命令权限按最小可用原则配置不要让任何 Agent 进程都有全盘读写权限。9.6 做模型效果对比时保持变量一致如果你拿 Arcade 来评估不同模型或不同参数配置请确保每个模型的 prompt、工作目录、执行超时、评测判断标准完全一致。变量越多评测结论越难沉淀。10. 总结与下一步Claude Code Arcade 最值得尝试的地方是它用“小游戏生成”这种反馈极快的任务把 Agent 编程的规划、执行、报错、修复完整暴露在你面前。你在终端里看到的不只是一个结果文件而是一套可以观察和理解的工作流。对刚开始接触 Claude Code 的开发者来说这种可视化体验比直接让它重构一个大仓库容易理解得多对做模型选型的工程团队来说它也能快速成为一个低成本评测集。第一次试用时建议先验证两个点一是你的 Claude Code 环境是否能跑通基本任务二是你在 Arcade 中给出一段明确验收标准后模型能否在较少的修复轮次内交付一个可交互的小游戏。最容易踩的坑主要集中在模型名配置错误、API 鉴权方式和上下文过长导致的回归这些问题在第 8 节的表格里都能找到对应排查方法。如果跑通后想继续深入可以考虑下面几个方向把 Arcade 的任务改造成你自己的 Agent 评测集用脚本化方式持续记录不同模型的完成度把它生成的游戏工程接入一个小型 CI 流水线每次修改后自动跑语法检查和基础交互冒烟测试或者把其中一类游戏任务扩展到真实 Web 项目里观察 Claude Code 在面对多文件、多状态和后端接口时的表现。注意每一次扩展都要控制好上下文长度与预期目标最好一次只添加一个新约束。从材料来看Arcade 类项目的信息更新很快本文中的命令和参数只是通用模板实际运行前建议先用claude --help和项目仓库 README 确认版本差异。如果你已经在本地跑通了某个游戏比较有价值的复现是记录下从输入 prompt 到可玩状态一共消耗了多少轮次、多少 token这组数据比“AI 能写游戏”这种结论更能说明 Agent 的真实效率。 Claude Code Arcade评测：用AI Agent自动生成网页小游戏全流程
最近如果你在关注命令行 AI 编程工具大概率刷到过这样一个标题Show HN: Claude Code Arcade。它看起来像是一个“小游戏合集”但实际价值不止于此——它是一个用 Claude Code 的 Agent 能力自动生成网页小游戏的展示型项目。你给它一句起始提示词它会自己拆解需求、写代码、运行预览、看到报错再修最后交出一个能在浏览器里直接玩的小游戏。整个过程比较直观地展示了“Agent 编程到底能自动到什么程度”。先说结论这个项目适合用来测三件事——你的 Claude Code 环境是否配置正确、你的模型 API 或订阅是否可用、以及当前模型在“真实多文件编码任务”上的完成度。它不依赖本地 GPU不要求高显存只要终端里能跑 Claude Code理论上就能玩起来。硬件门槛很低真正的成本是 API 额度或订阅额度因为每次生成和迭代都会消耗 token。这篇文章不会只介绍概念我会按“环境准备 → 安装 Claude Code → 跑一个 Arcade 任务 → 批量验证 → 接口接入与错误排查 → 性能与成本观察”的顺序展开尽量让读者从 0 到 1 跑通一遍并且搞清楚哪些地方值得踩坑、哪些地方不能盲目相信。如果你正准备拿 Claude Code 做实际开发或者想评估不同模型的 Agent 编码能力这篇可以直接收藏。1. 核心能力速览能力项说明项目类型Agent 编程能力展示 / 自动生成网页小游戏基础依赖Claude Code 命令行工具本地 GPU 需求基本无需求推理在云端完成显存占用视浏览器端渲染而定本地终端运行负载不高主要功能根据自然语言任务自动编写、运行、修复并交付小游戏支持平台安装了 Claude Code 的终端环境Windows / macOS / Linux 均可尝试启动方式命令行启动 Claude Code再进入 Arcade 任务目录是否支持 API取决于 Claude Code 的鉴权方式可使用订阅或 API Key是否支持批量任务可通过脚本循环、非交互参数方式批量跑多个任务适合场景Agent 能力评测、工具链验证、提示词实验、游戏原型演示以上信息里凡是涉及“是否支持”“限制是多少”的细节都比较依赖你本机安装的 Claude Code 版本和模型服务商。做技术选型时不要只看宣传贴建议先按本文第 4 节跑一次最小任务验证。2. 适用场景与使用边界2.1 适合谁用第一类读者是刚接触 Claude Code 的开发者。Arcade 把“AI 写代码”变成一个可视化任务你不需要准备复杂的业务代码库只需要给一个游戏需求然后观察 Claude Code 怎么做规划、怎么写文件、怎么启动本地服务、又怎么在浏览器里预览。它比空跑 hello world 更能帮助你建立对 Agent 工作流的直觉。第二类读者是做模型评估的工程师。Arcade 的每个小游戏都可以成为一个 benchmark 用例用来比较 Claude 官方模型、第三方 API 网关或本地模型服务的差异。判断维度可以是“一次完成度”“修复次数”“生成文件结构是否整洁”“运行是否报错”。第三类读者是想把 Agent 接入实际项目的团队。先通过这种展示型项目验证 Claude Code 的交互模式、上下文管理、权限设置、输出质量再考虑让它处理真实仓库代码风险会小得多。2.2 不适合什么场景不要把它当成“免写代码免费拿游戏”的生产工具。Arcade 的价值是验证与教学不是交付商业游戏产品。它自动生成的代码在架构设计、性能优化、无障碍访问、版权合规上都缺少人工保障直接上生产会有隐患。如果你没有配置好可用的模型凭据也不要指望它能离线生成。Claude Code 依赖云端模型服务没有 API Key 或订阅任务会直接失败。2.3 需要遵守的安全与合规边界使用任何 AI 编程工具都需要注意几个边界不要输入敏感密钥、生产数据库地址、客户隐私数据作为 prompt 上下文。AI 生成的代码仍然要经过人工审查尤其是涉及用户输入、网络请求、文件写入的部分。生成内容可能参考了有版权的素材或命名商用前需要核对。Arcade 的定位是演示与评测不应把其中的生成结果未经验证地直接发布为正式产品。3. Claude Code 本地部署环境准备Arcade 不是一个独立 App它的运行环境本质是 Claude Code。所以安装前先把本地依赖梳理清楚。3.1 操作系统与终端Claude Code 官方通过 npm 分发支持主流的 macOS、Linux、Windows 环境。Windows 上更建议使用 PowerShell 或 Windows Terminal这样路径兼容性和命令粘贴体验会好一些。虽然没有硬性的“必须用 WSL”但如果遇到文件路径或权限问题WSL 环境往往更接近 Linux 服务器行为排查成本更低。3.2 Node.js 环境Claude Code 以 Node.js 工具链的形式安装因此需要先准备 Node.js 和 npm。安装版本不建议太老建议使用 LTS 版本。不同版本的 CLI 对 Node 的底限要求可能不同不要照搬旧教程里的版本号。检查命令node -v npm -v如果命令不存在先去 Node.js 官网安装 LTS 版本。安装完成后重新打开终端确保 npm 在 PATH 中可用。3.3 模型凭据Claude Code 需要鉴权才能调用模型接口。常见两种方式官方账号订阅或 API Key通过环境变量ANTHROPIC_API_KEY提供。第三方兼容服务或企业网关通过自定义 Base URL 与环境变量配置。如果使用订阅登录方式首次运行 Claude Code 时需要完成 OAuth 登录。如果使用 API Key建议不要在命令行里明文长期暴露可以用环境变量文件或系统密钥管理工具加载。export ANTHROPIC_API_KEYyour-api-key-goes-here注意这里只是通用示例。具体环境变量名和支持的鉴权方式要以你使用的 Claude Code 版本说明为准。第三方模型服务商通常会提供自己的 Base URL 和模型名不要把官方变量名直接照搬到所有网关。3.4 磁盘与目录规划Arcade 生成的每个小游戏会包含多个文件建议为每个任务单独建立目录。例如arcade-workspace/ ├── pong/ ├── snake/ ├── breakout/ └── logs/这样能避免不同任务的生成文件互相污染也方便后续批量处理、日志回溯和模型效果对比。4. 安装 Claude Code 并启动 Arcade4.1 安装 Claude Code通过 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后验证claude --version如果你在 Windows 上遇到claude 不是内部或外部命令或could not locate the claude cli on path说明 Node 的全局 bin 目录没有被加入 PATH。排查方式找到 npm 全局安装目录可通过npm prefix -g查看把对应 bin 目录写入 PATH然后重新打开终端。如果你所在环境网络下载 npm 包很慢可以考虑配置镜像源但要注意镜像源安全性尽量使用团队认可的私有 npm 镜像。4.2 首次运行与登录在项目目录下执行claude首次运行通常会要求完成登录或读取 API Key。注意观察终端输出中的 URL 和提示不要跳过授权步骤。如果终端打印了大量乱码或缺少字符渲染优先检查终端编码、字体和语言环境而不是怀疑工具本身坏了。4.3 获取 Arcade 任务内容Arcade 类项目通常会把任务清单放在仓库或文档中。你需要做的是把项目内容拉到本地然后在项目根目录用 Claude Code 打开。不同项目提供的任务描述格式可能不同有的把任务放在tasks/目录有的直接做成 Markdown 卡片有的依赖初始 prompt 触发。一个通用启动流程# 进入你准备好的工作目录 cd arcade-workspace # 用 Claude Code 启动交互式会话 claude然后在会话里输入类似这样的起始指令请读取当前目录下的任务说明从里面选择第一个游戏任务 先分析需求再列出实现步骤然后开始写代码。 运行后如果报错请根据报错信息自行修复直到可以在浏览器中预览。注意这不是某个项目的固定 prompt而是一个可替换的通用模板。Arcade 类项目的实际接入方式以你拿到的项目 README 为准。4.4 观察 Claude Code 的行为启动后你会看到 Claude Code 展示自己的“计划”包括读取哪些文件、创建哪些文件、执行哪些命令。这里值得多看几秒一个成熟的 Agent 不是闷头生成一个 index.html 就结束它往往会先确认入口文件、规划模块结构、安装依赖、启动本地静态服务然后用一个临时端口供预览。如果 Claude Code 在某个步骤询问你是否允许执行命令它会给出将要运行的命令。你可以逐个批准也可以根据项目说明调整权限模型。第一次跑通时建议保持手动批准这样你能随时中断异常操作。4.5 达到什么状态算启动成功判断标准很简单Claude Code 成功创建项目文件。本地终端启动了预览服务。浏览器可以通过返回的地址打开游戏页面。页面没有明显脚本报错交互可控。如果最后一步失败后面的功能测试就不用继续了先回到第 8 节排查原因。5. Claude Code Arcade 功能测试与效果验证Arcade 的核心玩法是让 AI 自动生成可玩的游戏。我们可以用一套标准测试流程来验证它的完成度而不是只凭“看起来能跑”下结论。5.1 任务 A基础可玩性测试目的验证 Claude Code 能否从零生成一个完整、可交互的小游戏。推荐用经典 Pong 或贪吃蛇这类需求边界清晰的游戏做首测用 HTML/CSS/JavaScript 实现一个贪吃蛇游戏。 要求 1. 使用 Canvas 渲染。 2. 键盘方向键控制移动。 3. 吃到一个食物后蛇身加长分数加 1。 4. 撞墙或撞到自己后游戏结束并显示最终分数。 5. 提供一个“重新开始”按钮。 请直接在当前目录创建必要文件不要只写伪代码。操作方式在会话中发送上述文本允许它创建文件和运行命令等生成结束后打开浏览器预览。判断成功页面正常加载。蛇能通过方向键控制。吃食物得分有效。撞墙/撞身后游戏结束。“重新开始”按钮能复位。如果失败优先观察 Claude Code 自己的修复循环。一次失败不可怕关键是它是否能在第二、第三轮尝试中定位问题。这也是评估 Agent 能力的核心指标。5.2 任务 B规则一致性与状态管理测试目的验证“看似能玩”的游戏是否在真实交互中出现逻辑错误。建议选状态较多的游戏例如带关卡和连击计分的打砖块或者带重力与碰撞的 Flappy Bird 变体。测试输入可以强调数据状态基于上一题的游戏代码加入一个计分规则 每击碎一个砖块得 10 分连续击碎 5 个砖块后进入下一关卡。 下一关的砖块行数比当前多 1移动速度增加 10%。 请先说明你如何保存关卡状态再修改代码。观察重点是否真的实现了计分而不是只在界面上显示假数字。连续击碎的计算逻辑是否正确。进入下一关时是否重置了球速、砖块布局以及碰撞状态。测试中是否自己补充了边界情况例如球速过高的物理穿透问题。这类任务能筛掉“只生成静态页面而没有认真实现状态逻辑”的 Agent。5.3 任务 C错误恢复与自我修复测试目的验证 Claude Code 面对运行时报错时的处理能力。你可以主动制造一个容易出错的输入在现有项目里新增一个功能玩家死亡后弹出成绩排行榜 排行数据保存在浏览器 localStorage 中。 请先运行当前项目确认没有语法错误再实现功能。 完成之后故意让某段代码抛出一个异常 观察你能否根据控制台报错定位并修复。更贴近实际的做法是让它先实现功能然后告诉它“我打开控制台发现 xxx 报错”看它是否能通过分析代码定位问题、修改代码、重新运行验证。真实开发中这种“用户反馈 → 定位 → 修复 → 回归”循环正是 Agent 编程最有价值也最容易翻车的环节。判断成功报错信息被正确分析。修改点与报错相关。修复后能重新运行。没有引入新的回归问题。5.4 效果验证小结一次完整的 Arcade 评测应该给每次任务打几个维度的分维度说明首轮完成度不经过修复第一轮生成是否能跑通修复效率出现报错后几轮会话内能修复代码清晰度文件拆分是否合理变量命名是否可读功能覆盖需求中的功能点是否全部实现幻觉率是否使用了不存在的 API、库或伪代码冒充实现Token 消耗单个任务从开始到可玩总计消耗多少上下文不要只记录“最后看起来能玩”要把整个调试过程的时间、轮次、token 趋势记下来这才是模型横向对比的有效数据。6. 接口 API 与批量任务扩展Arcade 本身以人工交互为主但 Claude Code 可以通过非交互模式与脚本结合实现批量评测。注意这套流程不一定适合所有版本也不一定适合所有模型网关建议先看 CLI 帮助确认参数是否支持。6.1 查看非交互参数在当前版本中Claude Code 命令行通常提供用于非交互输出的参数使用前先确认claude --help如果看到类似-p, --print的参数说明支持将 prompt 作为命令行参数传入并直接打印结果。这里只作为查看方法示例具体参数名以本机帮助输出为准。6.2 批量生成游戏任务的脚本示例假设你把多个游戏需求写成了prompts/game1.txt、prompts/game2.txt这样的纯文本文件可以用循环逐个调用 Claude Code#!/bin/bash # 批量执行 Claude Code 任务示例 # 注意具体参数以 claude --help 输出为准 for file in prompts/*.txt; do echo Processing $file ... out_diroutputs/$(basename $file .txt) mkdir -p $out_dir cd $out_dir || exit 1 claude -p $(cat ../../$file) claude_output.log 21 cd ../../ echo Done: $out_dir done这段代码是通用模板生产环境还要考虑超时控制、失败重试和并发限制。直接复制运行前一定要先确认 Claude Code 是否支持你用的参数并保证每次任务启动时工作目录正确。如果你更习惯用 Node.js 脚本管理可以用类似思路const { execSync } require(child_process); const fs require(fs); const path require(path); const promptsDir ./prompts; const outputsDir ./outputs; fs.readdirSync(promptsDir).forEach((file) { if (!file.endsWith(.txt)) return; const prompt fs.readFileSync(path.join(promptsDir, file), utf-8); const taskName path.basename(file, .txt); const outDir path.join(outputsDir, taskName); fs.mkdirSync(outDir, { recursive: true }); try { const command claude -p ${JSON.stringify(prompt)}; const result execSync(command, { cwd: outDir, timeout: 300000, encoding: utf-8 }); fs.writeFileSync(path.join(outDir, result.log), result); } catch (e) { fs.writeFileSync(path.join(outDir, error.log), String(e)); } });注意这个脚本用了同步执行只适合小规模任务。批量任务一旦多起来建议加上队列、超时管理和失败重试。6.3 批量任务的工程建议批量评测真正重要的不是“把多个 prompt 丢给 CLI”而是把每次任务的结果沉淀成可对比的数据。每个任务目录下建议至少保留input.txt本轮输入的 prompt。claude_output.logClaude Code 的完整输出。files/生成的文件。screenshot或preview_result.md预览验证结果。meta.json时间、模型、参数、token 消耗等元信息。有了这些数据你才能回答“这个模型在不同难度任务上的表现如何”而不只是说“它生成了一个贪吃蛇”。7. 资源占用与性能观察7.1 本地资源占用Claude Code 是一个终端 Agent核心推理都在云端模型服务完成所以本地不需要高配置显卡。运行期间真正消耗资源的是终端进程本身。Node.js 运行时。Claude Code 可能调用本地工具执行构建、测试。浏览器预览游戏时页面的渲染与脚本执行。观察方法也比较直观打开系统任务管理器看claude、node进程和浏览器的 CPU 与内存变化。通常不会有很大的显存压力因为这不属于本地大模型推理场景。7.2 Token 与成本观察Arcade 类长流程任务非常消耗上下文。一次“写代码 → 跑起来 → 报错 → 修复”的循环往往意味着多轮工具调用和多文件代码输出累计消耗的 token 会明显高于普通对话。建议每次任务结束后在 Claude Code 会话底部查看 context 使用情况记录输入 token、输出 token、工具调用次数和总耗时。如果你的 API 服务商提供用量面板也可以把任务时间段的消耗量拉出来对比。7.3 最容易忽视的性能瓶颈不是推理速度而是会话长度。任务越复杂上下文越长模型越容易在后续步骤丢失早期约束。如果你的游戏已经有 5 个功能点再让它新增第 6 个功能它可能会忘记第一版的某个细节导致回归。遇到这种情况不要无脑重开一个全新会话可以先把关键需求压缩成明确的变更单描述当前项目贪吃蛇。 已完成canvas 渲染、键盘控制、得分、重新开始。 请新增物体加速机制。 要求不能改变键盘控制逻辑。 在修改前先阅读 game.js 文件确认当前实现。这种“更小上下文、更明确改动范围”的提问方式才是 Agent 协作中更可控的操作习惯。8. 常见问题与排查方法下面这些问题来自 Claude Code 日常使用中高频出现的现象适用于 Arcade 类项目也适用于把 Claude Code 接入其他项目的场景。问题现象可能原因排查方式解决方案启动后 claude 命令不存在npm 全局目录不在 PATH 中执行npm prefix -g查找目录将 bin 目录加入 PATH 后重启终端安装包成功但运行报无法定位 CLIWindows 终端环境未刷新检查新终端窗口重新打开终端或用npx claude验证提示 model is not a model this version recognizes当前 CLI 版本不认识配置的模型名查看帮助与版本说明升级 CLI 版本或核对模型服务商提供的模型名提示 organization has disabled subscription access订阅账号被组织策略限制检查企业控制台联系管理员开启权限或改用 API Key 方式在 settings.json 中接入模型无效Base URL 或环境变量配置位置错误查看 CLI 日志按官方文档把变量写入正确位置后重启会话执行任务时输出乱码终端编码或语言环境异常检查终端编码设置切换 UTF-8 编码并重试游戏页面打开了但键盘没反应浏览器对 iframe 或 Canvas 焦点处理问题打开控制台看报错点击游戏区域后再按键或让 AI 检查 focus 处理生成结果一直停留在同一个报错上下文过长或修复方向不对中断会话改用最小复现问题重开会话并只给一段最小报错信息批量脚本运行到某任务卡死命令执行超时且没有超时控制检查进程状态在脚本中加 timeout 与固定重试次数截图预览与实际交互不一致Agent 只验证静态首屏未做交互测试自行手动操作一遍在 prompt 中要求“必须实际点击和键盘操作验证”8.1 一个典型的“模型名不被识别”场景如果你配置了第三方模型服务启动后却看到类似下面的错误xxx is not a model this version of claude code recognizes大概率不是模型真的不存在而是 Claude Code 版本与服务商提供模型名之间的适配问题。排查顺序建议是确认 Claude Code 版本是否过旧过旧就升级。检查ANTHROPIC_MODEL或配置文件中模型名是否填写准确。查看服务商文档确认是否需要在 Base URL 中包含额外的路径前缀。尝试先切换到官方默认模型验证配置环境本身是否正常。这里最容易踩的坑是“只改模型名但不改 Base URL”。很多第三方网关在转发不同模型时要求 Base URL 也同步调整模型名与网关不匹配时CLI 报错会非常难懂。8.2 如何避免端口冲突Arcade 生成游戏后通常会启动一个本地静态服务。如果你的电脑已有多个开发服务在运行端口可能被占。第一次报错时不要急着换端口先看日志中提示的是哪个端口无法绑定再决定是停掉旧进程还是修改新服务端口。# 查看端口占用macOS / Linux lsof -i :4173 # 查看端口占用Windows PowerShell netstat -ano | findstr :4173注意端口号要替换成你实际看到的值。如果发现旧进程残留找到 PID 后按需结束进程。9. 最佳实践与使用建议9.1 第一次使用先跑单个最小任务不要一上来就把整个 Arcade 的全部游戏需求塞给 Claude Code。先挑一个你完全清楚预期结果的游戏比如贪吃蛇。因为当你了解预期行为时才能判断 Agent 生成的代码是“真的实现了”还是“看似实现了”。第一次跑通后再逐步增加游戏复杂度。9.2 严格管理生成目录建议为每一次评测建立独立目录目录名与任务名保持一致。Arcade 项目中的生成文件命名可能比较规律但你自己的评测记录必须更系统输入、输出、日志、截图分开存放。否则第二次评测时很容易把上一轮的调试信息当成当前依赖造成误判。9.3 Prompt 里明确验收标准给 Claude Code 下任务时不要只说“做一个游戏”要把验收标准写清楚。比如渲染技术、控制方式、计分规则、游戏结束条件等。明确的验收标准会让生成质量和后续修复效率明显提升。9.4 控制单次任务的上下文长度如果一个任务已经连续修复 20 轮最佳选择不是继续对话而是停下来梳理问题、重开一个新会话并把当前文件状态、已实现功能、剩余问题压缩成一段上下文描述。这样看起来“断了上下文”实际比在脏上下文中继续叠错误要高效得多。9.5 不要把 AI 生成的代码直接作为最终交付哪怕是 Arcade 这种相对简单的游戏页面生成后仍然要做三件事人工读一遍关键交互代码确认没有逻辑漏洞。在真实浏览器中执行一遍完整路径不只依赖截图。检查是否有对第三方资源的引用、是否需要版权声明或额外授权。如果你的场景是把 Claude Code 接入团队真实业务更要设置明确的代码评审和权限边界。Claude Code 在本地执行的命令权限按最小可用原则配置不要让任何 Agent 进程都有全盘读写权限。9.6 做模型效果对比时保持变量一致如果你拿 Arcade 来评估不同模型或不同参数配置请确保每个模型的 prompt、工作目录、执行超时、评测判断标准完全一致。变量越多评测结论越难沉淀。10. 总结与下一步Claude Code Arcade 最值得尝试的地方是它用“小游戏生成”这种反馈极快的任务把 Agent 编程的规划、执行、报错、修复完整暴露在你面前。你在终端里看到的不只是一个结果文件而是一套可以观察和理解的工作流。对刚开始接触 Claude Code 的开发者来说这种可视化体验比直接让它重构一个大仓库容易理解得多对做模型选型的工程团队来说它也能快速成为一个低成本评测集。第一次试用时建议先验证两个点一是你的 Claude Code 环境是否能跑通基本任务二是你在 Arcade 中给出一段明确验收标准后模型能否在较少的修复轮次内交付一个可交互的小游戏。最容易踩的坑主要集中在模型名配置错误、API 鉴权方式和上下文过长导致的回归这些问题在第 8 节的表格里都能找到对应排查方法。如果跑通后想继续深入可以考虑下面几个方向把 Arcade 的任务改造成你自己的 Agent 评测集用脚本化方式持续记录不同模型的完成度把它生成的游戏工程接入一个小型 CI 流水线每次修改后自动跑语法检查和基础交互冒烟测试或者把其中一类游戏任务扩展到真实 Web 项目里观察 Claude Code 在面对多文件、多状态和后端接口时的表现。注意每一次扩展都要控制好上下文长度与预期目标最好一次只添加一个新约束。从材料来看Arcade 类项目的信息更新很快本文中的命令和参数只是通用模板实际运行前建议先用claude --help和项目仓库 README 确认版本差异。如果你已经在本地跑通了某个游戏比较有价值的复现是记录下从输入 prompt 到可玩状态一共消耗了多少轮次、多少 token这组数据比“AI 能写游戏”这种结论更能说明 Agent 的真实效率。