Vibe Coding实战：用AI复刻Infinity Craft元素炼金游戏

项目介绍：什么是AI元素炼金游戏

Infinity Craft是一款极具创意的网页游戏——玩家从地、水、火、风四个基础元素出发，通过拖拽组合不断创造新元素。水和火组合成蒸汽，蒸汽和风组合成云，云和水组合成暴雨……这种无限组合的可能性背后，正是AI大模型在驱动：每次两个元素碰撞时，由大模型实时判断应该生成什么新元素。

Infinity Craft由Neal.fun于2024年初发布，迅速在社交媒体上引发病毒式传播。其核心创新在于将大语言模型（LLM）的开放式生成能力引入游戏机制——传统合成类游戏（如Minecraft）依赖预设配方表，而Infinity Craft的「配方」是由AI实时推断的，理论上组合空间无限。这种设计范式被称为「AI驱动的涌现式玩法」，玩家的探索行为本身就在不断扩展游戏内容边界，每一次新发现都是真正意义上的「首次创造」。

本文记录了使用Vibe Coding（AI辅助编程）方式，基于Vite + React + TypeScript技术栈，从零复刻这款游戏的完整过程。Vibe Coding是由OpenAI联合创始人Andrej Karpathy于2025年初提出的编程范式，核心理念是：开发者不再逐行编写代码，而是用自然语言描述意图，让AI生成、修改和调试代码，人只负责「感受」（Vibe）结果是否符合预期。这与传统的AI辅助编程（如GitHub Copilot的代码补全）有本质区别——后者仍以人工编码为主，AI为辅；而Vibe Coding中AI是主要生产力，人扮演需求方和验收方的角色。如果你也想尝试用AI来做一个有趣的创意小项目，这篇实战记录应该能给你不少启发。

核心架构设计

系统时序与缓存机制

游戏的核心逻辑并不复杂，但需要合理的架构设计来保证体验流畅：

1. 玩家拖拽两个元素进行组合
2. 系统首先检查本地缓存，如果之前已经有过相同组合的结果，直接返回
3. 缓存未命中时，请求DeepSeek^广告大模型获取组合结果
4. 将结果写入本地缓存，同时更新界面显示

这种**缓存优先（Cache-First）**的策略至关重要。每次调用大模型API都会产生Token消耗费用，且网络往返延迟通常在1-5秒之间。通过将「元素A+元素B→结果C」的映射关系存入LocalStorage，相同组合的二次查询可以在10毫秒内完成，同时彻底消除该次API费用。LocalStorage的键值对结构天然适合这种映射缓存，且数据持久化在浏览器本地，刷新页面后历史发现不会丢失，进一步增强了游戏的探索积累感——既节省了API调用成本，也让重复组合的响应速度从几秒缩短到毫秒级。

技术选型说明

模块	方案	选型理由
前端框架	Vite + React + TypeScript	轻量快速，无需SSR
样式方案	原生CSS	项目体量小，无需引入UI库
AI接入	DeepSeek大模型API	中文理解能力强，性价比高
数据存储	LocalStorage	纯前端缓存，无需后端

选择Vite而非Next.js，是因为这个项目不需要服务端渲染，直接在前端调用AI API就能满足需求，架构越简单越好。

DeepSeek是深度求索公司推出的大语言模型系列，其API在创意推理任务上表现出色，且定价相比GPT-4系列有显著优势——输入Token价格约为GPT-4o的1/10到1/20。对于元素组合这类任务，模型需要具备常识推理和创意联想能力：「云+火→雷暴」需要理解气象物理逻辑，「泥石流+风→沙尘暴」则需要一定的想象力延伸。DeepSeek在中文语境下的理解能力尤为突出，对于中文元素名称的语义关联推断更为自然准确，这正是本项目选择它的核心原因。

开发过程：规格驱动的Vibe Coding实践

第一步：用规格文档搭建项目骨架

采用规格驱动开发方法，先准备好两份关键文档：

• spec.md：需求规格，定义游戏玩法、交互方式、元素列表
• tech.md：技术设计文档，描述组件结构、数据流、API接口

然后让AI根据这些文档生成代码。

这种做法在Vibe Coding工作流中有其深层意义：spec.md和tech.md实际上充当了AI的「系统提示词」——它们为模型提供了项目的完整上下文，使AI能够生成风格一致、架构合理的代码，而非每次对话都从零开始。这本质上是将「提示词工程」（Prompt Engineering）结构化，通过文档形式固化项目知识，显著提升了多轮对话中AI输出的稳定性和连贯性。

初始阶段使用模拟数据，先不接入大模型，确保拖拽交互和UI逻辑跑通。这里有个实用技巧：对于需求明确的任务，不需要用最强的Pro模型，Flash模型就够了，生成速度更快，成本更低。

第二步：用自然语言修复交互问题

AI生成的第一版代码存在两个明显问题：

1. 弹窗阻碍操作流程：合成成功后弹出alert提示，打断了玩家的操作节奏
2. 元素名称显示截断：当元素名称超过两个字时，文字被裁切看不全

修复方式很简单——直接用自然语言描述问题，让AI来改。这正是Vibe Coding的核心优势：你只需要说清楚「哪里不对」，AI负责搞定「怎么改」。不用翻代码找Bug，不用纠结CSS属性，把精力放在体验判断上就好。

第三步：接入DeepSeek大模型API

将模拟数据替换为真实的AI调用。核心逻辑是：把两个元素名称拼成Prompt发送给DeepSeek，让它返回一个合理的组合结果。

几个关键细节：

• Prompt设计：需要约束大模型只返回一个简短的元素名称，避免返回长段解释。大语言模型天然倾向于生成解释性文本，常见的约束手段包括：在系统提示中明确要求「只返回元素名称，不超过4个汉字」、使用Few-shot示例展示期望的输入输出格式、设置适中的Temperature参数（如0.7）以平衡创意性与稳定性。此外还需考虑「幂等性」——相同的两个元素多次组合应返回一致结果，可通过缓存层来保证。
• API Key安全：通过.env文件管理密钥，确保不会被意外提交到代码仓库
• 错误处理：网络异常或API限流时，给玩家友好的提示而非直接报错

最终效果展示

接入DeepSeek后，游戏的创意性完全展现出来了：

实际测试的组合链路：

• 水 + 火 → 蒸汽
• 蒸汽 + 风 → 云
• 云 + 火 → 雷暴
• 雷暴 + 水 → 暴雨
• 暴雨 +