Transforming a Physical Card Game into a Browser-Based Learning Tool: AI-Assisted Digitization of Compound Chain

Abstract This study reports the AI-assisted transformation of Compound Chain, a validated physical inorganic chemistry card game, into a browser-based learning application. The development used a “vibe coding” approach, in which educators describe functionality in natural language while an LLM generates and refines the code. We propose a five-step Pedagogical System Architect framework, intended for chemistry educators without programming experience, that covers architectural planning, data design, incremental implementation, AI-assisted debugging, and version control. The digital version extends the original game through automated rule enforcement, a zoom interface, and single-player mode, in a manner consistent with reduced extraneous cognitive load, and supporting self-regulated practice beyond class. In an exploratory classroom deployment, voluntary out-of-class usage (a self-reported approximation of 4.5 sessions per student) suggests that the digital format can transform a classroom activity into an intrinsically motivated practice resource. This exploratory evaluation documents engagement, usability, and voluntary practice; establishing conceptual learning gains from the digital version remains a question for future controlled study.