“一位老师，用 AI 做了个《林黛玉初进贾府》的互动游戏。”
读者或许会想，这又是一个AI炫技的案例。然而，当成品呈现在眼前时，它却引人深思。
或许在过去一年对AI编程的讨论中，方向有所偏离。
游戏本身很简单：
学生站在黛玉的角度，控制故事走向，每个场景 1 张配图。
当从学生时代的视角审视时，突然理解了它的魅力。
学生不再被动听故事，而是亲历故事发展，甚至可以探索“如果做了不同选择”的可能性。
然而，当作品背后四十多轮Prompt拉扯过程被揭示时，一个问题浮现出来：
为了制作这个游戏，使用者不得不在Coding平台和AI生图工具之间来回切换，反复对话。
过程能否变得更简单？
换句话说，如果制作这样一个互动游戏，能像写一句话一样简单，会发生什么？
带着这个问题，文章作者尝试了另一种方法。结果令人满意，且非常贴合主题：
也可以更像沉浸式剧情游戏：
从输入创意到完整游戏，无需手动生成图片，无需在多个工具间切换，也无需调整代码和素材匹配……
这一切，只需一次提示。
本文将完整分享这种方法及两种风格模板。
📍 从这里开始
👉 核心思考在于：赋予AI更大的行动空间，以释放其智能上限。
在具体实现上，采用两大工具：
- Claude Code + Skill：Claude Code 是一款Agent框架工具，提供AI智能规划-执行的行动空间；
而Skill则可以理解为AI的技能包，在该任务中，用于指引AI如何生成图像。
- 豆包 Seed-Code 模型：字节最新的模型，国内首个支持多模态的编程模型。
用于驱动Agent、完成游戏开发，并提供多模态理解，让AI“看懂”配图，适配UI设计。
通过两款工具的结合，实现“一句话制作互动游戏”的全过程自动化：
- 1.给定剧情文本：可以只说剧情名称，让AI自行回忆世界知识；也可以直接提供原文。
- 2.选取关键场景：识别情节转折点，自动拆分5-10个关键叙事场景。
- 3.设计剧情配图：AI生图方案最为合适。以往需要用户自行编写风格一致的文生图提示词，并在AI生图平台下载图片，再传输给Coding平台。这是寻常流程中耗时操作之处。
- 4.游戏开发：设计每个场景选项与反馈；实现游戏交互；多模态识别配图，提取设计风格，统一UI的元素设计。
即使不熟悉技术细节，也无需被命令行界面所困扰。
👏 遵循以下指南，即使是零AI基础的用户，也能轻松应用先进的Agent方案，快速制作出互动游戏。
1️⃣ 安装 Claude Code
尽管以往文章多次介绍过安装方法，但仍有新读者需要此部分。已安装的用户可直接跳至下一步。
打开电脑中的“终端/命令行”工具：
- 遵循官方安装指引 https://code.claude.com/docs/en/quickstart#native-install-recommended，完成 Claude Code 安装。
- 亦可参考字节的国内教程：https://www.volcengine.com/docs/82379/1928262
如果遇到不理解之处，可将Prompt发送给任意AI，让其逐步指导安装：
参考以下信息，一步步指导我在【Mac/windows/linux】终端中安装该程序：【此处粘贴替换为上面链接里的安装指引文本】当我遇到疑惑或报错时，我会把终端的日志发给你，请帮我解决。
遇到报错时，可将终端日志截图提供给AI，通常能获得解决方案。
用户也可询问AI如何打开Mac/Windows电脑上的终端。
安装后，在终端中输入 claude --version，若能看到版本号，则安装成功。
2️⃣ 配置豆包 Seed-Code 模型
选择豆包 Seed-Code 模型驱动Claude Code，主要基于以下原因：
- 一方面，近期测试表明，豆包与Claude Code、Skills的调用兼容性良好，未出现Agent行动失败的情况。
- 另一方面，作为国内首个支持多模态的编程模型，它使得使用国产模型进行游戏视觉素材的多模态分析，并自行开发配套风格的界面设计成为可能。
1）此步骤前，建议首先创建一个空的test项目文件夹，并在终端中切换至该目录：
此操作可将Claude Code的AI行动限定在该目录内，降低对本地电脑其他文件造成影响的风险。
2）替换Doubao-Seed-Code模型，在终端内输入：
export ANTHROPIC_BASE_URL=https://ark.cn-beijing.volces.com/api/compatibleexport ANTHROPIC_AUTH_TOKEN=【替换为你的火山方舟 API Key】export ANTHROPIC_MODEL=doubao-seed-code-preview-latestclaude
该操作在当前终端窗口中，将要使用的模型临时改为目标模型。（关闭当前终端窗口后，需再次发送此命令以重新指定模型API与Key）
火山方舟的API Key，可在 https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey 申请。
为使用该模型，需在火山方舟平台充值一定余额。
3）发送上述指令后，若出现下图信息，则表示配置成功：
3️⃣ 配置文生图 Skill
这是前置准备的最后一步，完成此步骤后，Agent将获得“自行匹配游戏视觉素材”的能力。
为达到此效果，需用到Skill技能包——可将其理解为AI的能力插件。
文章作者制作了一个名为「seedream-image-generator」的Skill，用于指导AI如何自行调用字节Seedream 4.0 AI生图模型API，以创作并下载AI图片。
该Skill已在Github开源：
👉项目地址：https://github.com/eze-is/seedream-image-generator
Claude Code 调用Skills，需要在当前项目文件夹的/.claude/skills/目录下，放入seedream-image-generator的skill压缩包。
用户可直接下载该Skill的压缩包，并手动放置于指定文件夹内（如图所示为正确的项目skills路径配置）：
亦可在Claude Code中发送以下指令，让AI代为操作：
从 https://github.com/eze-is/seedream-image-generator 下载仓库内容，不包含README.md和.DS_Store,以 /seedream-image-generator/的路径,放在当前目录的/.claude/skills/下
AI会申请行动权限，多数情况下选择“Yes”确认即可。
直到出现：
至此，所有前置准备已完成，可开始使用提示模板，一句话创作互动游戏。
💡 来，互动游戏的创作方法
至此，即可开始制作互动游戏。
核心指令思路如下：指令可分多次发送给Agent执行，本文所示成果亦是此方式制作。
👉 亦可直接参考下方“宝藏提示模板”部分，利用优化后的Prompt模板一次性快速生成类似游戏（更便捷，适合日常使用，包含详细操作指引）：
1）多轮提示思路（可跳到下节，拿模板）
- 1.首要的是，指定游戏主要的生成目标。
生成一个 html 游戏，用于玩家进入这个场景，并体验【XX 人物】【做某事】的过程，用于感受【XX 情绪 / 社会氛围 / 等需要重点体验的要素】。
游戏内容参考【此处描述剧情内容：可以直接粘贴原文；如果是知名文学内容，也可以直接描述剧情名称，让 AI 自行回忆】
一共需要 X 张图片，用 seedream-image-generator skill 生成后，用于游戏页面内使用，所有图片需要使用统一的画风提示。
需注意，在生成AI图片时，Agent会再次请求火山方舟API_KEY，即初始设置的Key，按照控制台指引提供即可。
（请注意，图片生成服务按量付费，请确保火山方舟账户内有余额）
- 2.从细节提示上，可控制选项数量。
每个场景需要3个不同选项，模拟人物在对应场景下的行为选择。其中只有1个选项符合原文（即正确），其他2个为错误选项。选择选项后，提供游戏反馈，包括选择是否正确、原因。通过这种游戏方式，提升玩家的代入感，理解用户面临的处境。
- 3.利用多模态，识别配图风格，自动优化UI：
请多模态分析【指定目标配图文件的名称，或将配图拖拽/粘贴到Claude Code的输入框】的风格，并基于此风格，对UI元素进行设计优化与统一。
得益于Doubao-Seed-Code模型出色的多模态理解能力，Agent能够读取已生成配图的风格，并据此设计匹配的游戏界面样式。
Agent自动将上述游戏UI调整为下图所示，使其更为统一和谐：
互动游戏的形式直观清晰，适合教师在课堂上演示。
若希望界面更具游戏感或进行更多调整，可直接向AI提出需求：
“希望游戏界面整体以配图为底，选项 UI 都呈现在图片上”
“需要添加人物状态框，呈现人物的心情数值变化”
“场景 3 的配图效果不好，请更换为 XX”
“我在 /pic 文件夹放了一张我自己找的图，请把场景 3 的配图换为我提供的图片”
2）宝藏提示模板（偷懒选这个，效果也很好）
文章准备了两种不同的提示模板：「交互式课件风格」和「沉浸式剧情游戏」。用户进入Claude Code后，直接粘贴发送即可，也可详细了解演示操作逻辑：
A. 交互式课件风格
偏向交互式课件的UI布局，效果大致如下：
也可以是这样的横版格局（朱自清《背影》）：
一次性提示模板如下：
【任务目标】基于给定原文/特定剧情/文学内容，自动生成一个完整的**交互式叙事网页游戏/课件**，并在当前项目的根目录下，创建文件夹，放置全部游戏代码与资源【核心要求】1.**场景自动切分**： - 基于原文情节转折点，自动拆分3-10个关键叙事场景（默认7个左右，根据原文长度调整） - 每个场景需提取核心情节、环境描写、人物状态2.**图片设计提示词**： - 为每个场景生成**可直接用于AI绘图的详细prompt**（对应场景数量） - 图片风格：自动匹配原文题材，且多张图片见风格统一一致，如同一个的游戏的不同场景（如古典文学→工笔/水墨、科幻→赛博朋克、历史→写实等） - 内容要求：包含场景核心元素（人物、环境、动作、氛围），符合原文细节3.**图片生成**：利用 seedream-image-generator skill，生成对应图片4.**Html 游戏开发**： 选项设计： - 每个场景设计3个选项：1个符合原文逻辑（正确）、2个看似合理但不符合原文/人物性格（错误） - 选项需结合人物身份/性格（如黛玉→小心谨慎、孙悟空→桀骜不驯） - 正确选项严格基于原文情节，错误选项需符合场景语境但偏离原文 反馈系统： - 正确反馈：说明符合原文的具体依据 - 错误反馈：结合原文/人物逻辑解释错误原因，引导理解内容 游戏交互与样式： - 符合文字互动类游戏的 UI 布局 - UI 元素，通过多模态分析所生成的游戏图片风格，基于对应风格，对UI元素进行设计优化与统一【游戏内容】<此处粘贴/替换为你想要生成游戏的文学原文/历史文本>【输出格式】完整可运行的 html 游戏【示例参考（供理解生成逻辑）】若原文为《红楼梦》「黛玉进贾府」片段，AI需：- 拆分场景：弃舟登岸→入城观街→宁国府前→荣国府前→垂花门前→穿堂入院→见贾母前- 图片风格：中国古典工笔，柔和粉/褐/青色调- 选项设计：符合黛玉「步步留心、时时在意」的性格- 反馈：结合原文细节解释对/错原因
只需在【游戏内容】部分，按照要求粘贴/替换为所需生成游戏的文学原文/历史文本，并发送给Claude Code即可：
Agent能够自动切分场景，规划配图与对应提示：
可以看出，场景转折点的选择基本符合预期，Agent执行流程顺利，未出现错误。
然后Agent就会开始在项目目录/pic/下，自动批量生成配图。
并利用Doubao-Seed-Code提供的多模态分析能力，识别图片内容，设计UI风格。
AI规划选项与反馈，开发游戏主体：
最后，Agent会自动提示游戏开发成功，用户可按照指引进行体验：
*若需横版布局，可在生成完成后向AI提出要求：
改成横版布局，左图右选项，确保电脑上一页完全展示，不需要滚动
比如朱自清《背影》效果如下：
B. 沉浸式剧情游戏
更偏游戏风格的效果如下，以历史剧情《鸿门宴》为例：
玩家可以根据自己的理解，选择游戏走向：
结束后，也有结算反馈，方便玩家复盘与理解剧情走向。
用户可一次性发送以下指令给Claude Code，即可享受AI生产力，自动生成对应的游戏：
【任务目标】你的核心任务是扮演一个全能的互动叙事的游戏设计师。接收我（教师）提供的任意文学文本（古文、童话、散文等），自动将其转化为一个完整的、用于教学的网页互动游戏/课件。【核心工作流】由我提供原文，你必须严格遵循以下四个步骤，并在每一步骤完成后，都要向我确认，再进入下一步。在开始具体工作前， 在当前项目根目录下，创建一个以故事命名的文件夹。步骤一：故事解析与教学设计1. 文本分析: 深入理解我提供的原文，分析其文体、情感基调、核心情节、人物性格及关键抉择，选择最合适的沉浸式代入对象。2. 游戏化结构规划: - 开始界面: 包含引人入胜的标题、简短的背景介绍（明确玩家将扮演的角色和任务目标），以及一个“开始体验”的按钮。 - 场景拆分: 自动将原文拆分为 5-10个 连贯的核心场景。（默认7个左右，根据原文长度调整） - 结局设计: 基于玩家在过程中的选择，根据原文选择单线程或者多结局。3. 互动选项设计: 在每一个核心场景中，为玩家提供 3个 不同的行为选项。（1个最符合原文逻辑，2个干扰项）。选项设计必须紧扣人物性格与当时情境，避免在场景描述中泄露正确答案。4. 教学反馈: - 提炼教学点: 明确本次体验希望学生学习到的 1-2个核心知识点（如人物性格、主旨思想）。 - 构思复盘内容: 初步构思游戏结束后的复盘环节。此环节将包含“选择路径回顾”、“重点解析”和“课堂讨论题”。步骤二：艺术风格确立与视觉生成1. 确立艺术风格: 根据原文基调，推荐一种统一的、非写实的插画风格。（例如：古文对应 “中国水墨淡彩”或“古典工笔插画”；童话对应“奇幻水彩故事书”或“可爱卡通”；现代散文对应“柔和治愈系”或“极简意象”。2. 生成图像prompt: 为每个规划好的封面、场景及结局画面，生成包含上述风格关键词的、详细的AI文生图prompt。 - 图片风格：自动匹配原文题材，且多张图片间必须风格统一一致，统一使用横版宽屏比例（如16:9），确保场景切换时无缩放变形。 - 内容要求：包含场景核心元素（人物、环境、动作、氛围），符合原文细节，不得胡编乱造3. 生成图像: 找到 seedream-image-generator 工具，并完成所有场景的图片生成。如果需要 API 或者缺少其他东西，主动向我询问，该步骤无法跳过，必须生成图片后才可进入UI设计。步骤三：互动和UI设计1. 整体布局: - 场景展示区: 屏幕上中部，用于显示当前场景生成的图片。 - 互动区: 固定在屏幕底部，用于承载核心对话框。2. 核心对话框: - 外观: 采用看得清、易操作的边框样式。 - 动效: 新的对话框出现时，使用合适的动画效果。 - 内容流: 先以“打字机效果”逐字显示场景描述文本，文本显示完毕后，下方显示3个选项按钮。3. 按钮系统: - 选项按钮: 3个等宽的选项按钮，必须有交互反馈：鼠标悬停时按钮有轻微发光或放大的效果；点击时有按下的视觉效果。 - 功能按钮: “上一步”和“重新体验”按钮，作为小的图标或文字链接，固定在界面的一个角落（如右上角），不干扰主视觉。4. 自适应UI设计:分析已生成图像的整体色调与风格，并基于此设计配套的UI元素，打造沉浸式体验，确保所有视觉元素（对话框、按钮、字体、动效）与插画风格无缝融合，形成协调统一的整体美学。步骤四：最终交付1. 功能实现: - 将构思好的游戏路径、生成的背景图片以及UI设计内容进行整合，完成全流程的代码。- 游戏结束后，展示一个设计简洁的复盘界面。此界面可以是一个居中的、带有柔和背景的半透明卡片，清晰地列出在步骤一中构思的“选择路径回顾”、“重点解析”和“课堂讨论题”。2. 文件交付: - 在已创建的项目文件夹内，生成游戏代码（【故事名称】.html）和所有图片资源。 - 最终的 【故事名称】.html 必须是单一、独立的，内联所有CSS和JavaScript，确保无需配置即可在浏览器中运行。 - 检查所有的交互操作，并整理好包含所有资源的项目文件夹，完成最终交付。
此外，Agent也制作了汪曾祺的《端午的鸭蛋》，一次性生成的效果同样令人满意：
🎐写在最后
至此，读者已掌握“一句话制作互动游戏”的完整方案。
回顾此方案的实现成果：
得益于豆包Seed-Code模型对Claude Code、Skill的良好兼容，自带的出色编程能力，以及多模态理解能力，
成功将用户原有的40多轮Prompt交互，简化为仅需一轮提示。
无需手动生成图片，实现全流程自动化（以往仅垂直Agent产品可实现此功能）。
将文学作品、历史剧情一次性转换为令人满意的互动游戏。
借助AI，教师无需担忧图片素材来源、代码编写、文案创作及游戏素材风格优化，教育者得以专注于故事本身、教学体验和学生感受等真正重要的方面。
技术的意义并非在于替代，而在于更好地实现既有目标。
当学生们为一个选择激烈讨论，为一个故事结局主动查阅资料时，便会理解：这是AI时代为教育带来的宝贵礼物。
