Vibe Coding in Practice: Recreating Infinity Craft Element Alchemy Game with AI

Project Introduction: What Is an AI Element Alchemy Game

Infinity Craft is an incredibly creative web game — players start with four basic elements (Earth, Water, Fire, Wind) and create new elements by dragging and combining them. Water and Fire combine to make Steam, Steam and Wind combine to make Cloud, Cloud and Water combine to make Rainstorm... Behind these infinite combination possibilities is an AI large language model: every time two elements collide, the LLM determines in real-time what new element should be generated.

Infinity Craft was released by Neal.fun in early 2024 and quickly went viral on social media. Its core innovation lies in bringing the open-ended generative capabilities of Large Language Models (LLMs) into game mechanics — traditional synthesis games (like Minecraft) rely on preset recipe tables, while Infinity Craft's "recipes" are inferred by AI in real-time, making the combination space theoretically infinite. This design paradigm is called "AI-driven emergent gameplay," where players' exploratory actions continuously expand the game's content boundaries, and every new discovery is a genuinely "first-time creation."

This article documents the complete process of recreating this game from scratch using Vibe Coding (AI-assisted programming) with a Vite + React + TypeScript tech stack. Vibe Coding is a programming paradigm proposed by OpenAI co-founder Andrej Karpathy in early 2025. The core idea is: developers no longer write code line by line, but instead describe their intent in natural language, letting AI generate, modify, and debug code, while humans only need to "vibe" whether the results meet expectations. This is fundamentally different from traditional AI-assisted programming (like GitHub Copilot's code completion) — the latter still centers on human coding with AI as a supplement, while in Vibe Coding, AI is the primary productive force, and humans play the roles of requirements provider and acceptance tester. If you're also interested in trying to build a fun creative project with AI, this hands-on record should give you plenty of inspiration.

Core Architecture Design

System Sequence and Caching Mechanism

The game's core logic isn't complicated, but it requires thoughtful architecture design to ensure a smooth experience:

1. Player drags two elements to combine them
2. The system first checks the local cache — if the same combination has been made before, it returns the result directly
3. On cache miss, it requests the DeepSeek^Ad LLM for the combination result
4. The result is written to local cache while simultaneously updating the UI

This Cache-First strategy is crucial. Every LLM API call incurs token consumption costs, and network round-trip latency is typically 1-5 seconds. By storing the "Element A + Element B → Result C" mapping in LocalStorage, repeat queries for the same combination can be completed in 10 milliseconds while completely eliminating that API cost. LocalStorage's key-value pair structure is naturally suited for this kind of mapping cache, and the data persists locally in the browser — historical discoveries won't be lost after page refresh, further enhancing the sense of exploration accumulation. This both saves API costs and reduces repeat combination response times from seconds to milliseconds.

Technology Stack Choices

Module	Solution	Rationale
Frontend Framework	Vite + React + TypeScript	Lightweight and fast, no SSR needed
Styling	Native CSS	Small project scope, no need for UI libraries
AI Integration	DeepSeek LLM API	Strong Chinese comprehension, excellent cost-effectiveness
Data Storage	LocalStorage	Pure frontend caching, no backend needed

Vite was chosen over Next.js because this project doesn't need server-side rendering — calling the AI API directly from the frontend is sufficient, and the simpler the architecture, the better.

DeepSeek is a large language model series from the DeepSeek company. Its API excels at creative reasoning tasks, and its pricing has significant advantages over the GPT-4 series — input token prices are approximately 1/10 to 1/20 of GPT-4o. For element combination tasks, the model needs common-sense reasoning and creative association abilities: "Cloud + Fire → Thunderstorm" requires understanding meteorological physics logic, while "Mudslide + Wind → Sandstorm" requires some imaginative extension. DeepSeek's comprehension ability in Chinese contexts is particularly outstanding, making semantic association inference for Chinese element names more natural and accurate — this is the core reason for choosing it in this project.

Development Process: Spec-Driven Vibe Coding in Practice

Step 1: Building the Project Skeleton with Spec Documents

Using a spec-driven development approach, two key documents were prepared first:

• spec.md: Requirements specification, defining gameplay, interaction patterns, and element lists
• tech.md: Technical design document, describing component structure, data flow, and API interfaces

Then AI was asked to generate code based on these documents.

This approach has deeper significance in the Vibe Coding workflow: spec.md and tech.md effectively serve as the AI's "system prompts" — they provide the model with complete project context, enabling AI to generate code with consistent style and reasonable architecture, rather than starting from scratch in each conversation. This is essentially structuring "Prompt Engineering" by solidifying project knowledge in document form, significantly improving the stability and coherence of AI output across multiple conversation turns.

In the initial phase, mock data was used without connecting to the LLM, ensuring the drag-and-drop interaction and UI logic worked correctly first. Here's a practical tip: for tasks with clear requirements, you don't need the most powerful Pro model — the Flash model is sufficient, with faster generation speed and lower cost.

Step 2: Fixing Interaction Issues with Natural Language

The first version of AI-generated code had two obvious problems:

1. Pop-ups disrupting workflow: An alert popup appeared after successful synthesis, interrupting the player's operation rhythm
2. Element name truncation: When element names exceeded two characters, the text was clipped and unreadable

The fix was simple — just describe the problems in natural language and let AI handle them. This is the core advantage of Vibe Coding: you only need to clearly state "what's wrong," and AI takes care of "how to fix it." No need to dig through code to find bugs, no need to agonize over CSS properties — just focus your energy on experience judgment.

Step 3: Integrating the DeepSeek LLM API

The mock data was replaced with real AI calls. The core logic is: concatenate two element names into a prompt, send it to DeepSeek, and have it return a reasonable combination result.

Several key details:

• Prompt Design: The LLM needs to be constrained to return only a brief element name, avoiding long explanatory responses. Large language models naturally tend to generate explanatory text. Common constraint techniques include: explicitly requiring in the system prompt to "only return the element name, no more than 4 Chinese characters," using few-shot examples to demonstrate expected input/output format, and setting a moderate Temperature parameter (e.g., 0.7) to balance creativity and stability. Additionally, "idempotency" must be considered — combining the same two elements multiple times should return consistent results, which can be guaranteed through the caching layer.
• API Key Security: Managing keys through .env files to ensure they won't be accidentally committed to the code repository
• Error Handling: Providing friendly prompts to players during network exceptions or API rate limiting, rather than showing raw errors

Final Result Showcase

After integrating DeepSeek, the game's creativity fully shines through:

Actual tested combination chains:

• Water + Fire → Steam
• Steam + Wind → Cloud
• Cloud + Fire → Thunderstorm
• Thunderstorm + Water → Rainstorm
• Rainstorm +