ClaudeCode自动化生成网页游戏全套美术，13轮对话产出35张素材

一款名为《圣光防线》的网页小游戏目前已完成初步开发，其全部视觉素材——包括首页徽标、背景图、三张模式卡、法师塔界面及角色立绘——均由 AI 自动生成。值得注意的是，这些美术资源并非通过传统设计流程产出，而是由一个名为 Claude Code 的自动化工具，在单一 ChatGPT 对话中分13轮生成，共保留35张原始图像文件。整个过程未发生一次人工复制 prompt 或手动下载图片的操作，所有步骤均由程序自动执行。

该实践由一位独立开发者完成，其核心目标是验证“AI 是否能独立承担完整游戏美术生产链”。项目启动时，Claude Code 首先向开发者提问4个关键问题，以明确平台限制（如分辨率、格式、透明通道要求），并搭建一套用于自我校验的工具链。随后，它开始操作已登录的 ChatGPT 网页版，通过浏览器扩展 Claude in Chrome 实现对页面的读写与交互。

Claude in Chrome 扩展赋予了 Claude Code 在浏览器中执行 JavaScript 的能力，使其能精准定位输入框、模拟用户输入、触发发送按钮、检测状态变化并下载图片。相比依赖截图与坐标点击的传统自动化方案，这种基于 DOM 操作的方式稳定性显著提升——每一步操作均有可验证的返回值，避免了因页面布局微调导致的失效。

实际执行中，第一步是确认登录状态。Claude Code 打开 chatgpt.com 后，并未直接套用旧有选择器查找输入框，而是主动探测当前页面结构：它遍历所有可编辑元素与含“登录”字样的按钮，发现页面已处于登录态，仅是输入框实现方式从 #prompt-textarea 变更为 ProseMirror 编辑器。这一细节凸显了网页自动化中的关键前提：任何选择器都只是瞬时快照，必须动态适配。

第二步为 prompt 输入与发送。为确保 ProseMirror 编辑器正确识别输入内容，Claude Code 使用 document.execCommand('insertText') 而非直接修改 innerText——后者虽在页面上显示文字，但编辑器内部状态仍为空，导致发送按钮无法激活。此外，系统会在发送前校验输入长度是否与 prompt 完全一致，仅当匹配时才触发点击事件。该机制有效防止了因输入不完整造成的无效请求。

真正体现效率的是图像生成环节。开发者提供的首条 prompt 明确描述了五类角色（链甲战士、骷髅武士、僵尸、吸血鬼、死亡骑士）及其服饰、武器、肤色、姿态等细节，并指定艺术风格为“ polished hand-drawn 2D cartoon game art”，要求“厚暗棕轮廓线、扁平色块、高饱和暖色调、无文字标签”。4分27秒后，ChatGPT 返回一组横向排列的角色精灵图，尺寸为1536×1024像素，含真实透明 Alpha 通道，可直接用于切片。

后续轮次中，Claude Code 持续迭代 prompt：调整比例、补充光照细节、限定输出数量、指定背景色调。例如，在生成法师塔界面时，prompt 明确要求“塔身分五层，每层两个法术图标，顶部带发光符文”，并强调“保持与角色同风格”。所有图像均在同一对话上下文中生成，确保风格连贯性。

图像处理环节同样自动化。Claude Code 将生成图铺满页面后截图，再通过 JS 分析各缩略图尺寸，自动选取最大版本（如一组4/5/6号图中取6号）用于切片；对于角色精灵图，它按预设网格（如每行5个角色）自动裁剪为单体素材，并重命名保存至项目目录。开发者仅在两类情况下介入：一是页面弹出人机验证时手动点击通过；二是下载前快速确认图像质量是否达标。

该流程揭示了当前 AI 辅助开发的三个关键瓶颈：

其一，网页操作的可靠性依赖于对前端实现的深度理解。ProseMirror、React 组件树、动态加载等内容使传统 XPath/CSS 选择器极易失效，必须结合运行时探测与语义判断。

其二，prompt 工程需适配脚本化需求。为便于程序解析，prompt 必须结构清晰、无歧义，且避免使用自然语言中的模糊修饰词（如“大概”“类似”）。开发者将角色描述拆分为编号条目，正是为便于后续切片与映射。

其三，AI 缺失感知闭环。它无法判断“哪张图更符合游戏调性”，也无法确认“透明通道是否完整”，因此需人工设置检查点。这也是为何流程中保留了截图比对与最终筛选环节。

从行业视角看，此类实践标志着 AI 从“辅助创意”向“执行生产”的演进。过去，AI 生成图像多用于灵感参考或初稿草图；如今，借助自动化工具链，它已能输出可直接集成至游戏引擎的成品级素材。值得注意的是，该案例并未使用专用图像生成模型（如 Midjourney 或 Stable Diffusion），而是依托 ChatGPT 的 DALL·E 图像能力，配合外部控制逻辑完成端到端交付。

对比其他同类工具，Claude Code 的独特之处在于其“对话连续性”——所有生成均在单一上下文内完成，避免了跨会话风格漂移问题。而 a16z 投资的某创意工具被称作“创意领域的 Claude Code”，正反映出市场对这类“可编程 AI 工作流”的高度关注。

技术实现上，该项目依赖三项基础能力：浏览器自动化（Chrome Extension）、大模型多模态输出（DALL·E）、以及前端工程规范（Canvas 渲染、Sprite 切片）。补充素材中提及的网页小游戏最小骨架——HTML + Canvas + 游戏循环——恰好构成其运行载体：美术资源导入后，仅需少量 JavaScript 即可驱动角色动画与交互逻辑。

目前，《圣光防线》仍处于原型阶段，尚未上线。但该实践已验证一条可行路径：在轻量级网页游戏中，美术生产环节可大幅压缩至数小时内，成本趋近于零。未来挑战在于扩展至更复杂场景（如 3D 模型、动画序列、UI 动效），以及建立更鲁棒的风格一致性保障机制。

值得强调的是，此过程并非“AI 替代设计师”，而是将重复性劳动（素材生成、切片、命名、归档）交由程序处理，使创作者能聚焦于玩法设计、叙事架构与体验调优等更高阶任务。当工具链足够成熟，一个开发者确实可能在一天内完成从概念到可玩原型的全流程构建。