Background
During the exploration phase of AI capabilities and workflow automation, there was a need to bridge the gap between traditional design processes and AI-assisted development. The challenge was to create a complete, playable arcade game while discovering and refining AI-enhanced design-to-development workflows that could be applied to future projects.
I developed Oasis as an experimental arcade-type game that served as a testing ground for AI-integrated design workflows. The project began with comprehensive design work in Figma, where all main game elements, visual assets, and a complete design style guide were meticulously crafted. These design specifications were then strategically fed into AI systems to generate game code and bring the interactive elements to life. This hybrid approach allowed for rapid iteration between design and development, with AI handling much of the technical implementation while maintaining design fidelity. The workflow enabled quick prototyping of game mechanics, visual effects, and user interactions, significantly accelerating the development process from concept to playable game.
Core problem
While on a break at work, I was completely reminded of my handheld MITASHI console or the cheap knockoffs you get in the local bazaar which used to have pixel type arcade games. I wanted to recreate that feeling of nostalgia that we used to have when we played these games and made our high scores.
Process
Aim: OASIS - Just like a place in desert where water is available; similarly a place where I can take a break from work and relax for a bit (before the design sprint haunts me).
Moodboard
Collected ideas from existing games across the world to establish the visual mood and aesthetic direction for the arcade experience.
Low fidelity design
Decided on the visual language for the games and arcade experience, creating quick sketches and converting them into low fidelity wireframes.
Style Guide creation
Made a quick color palette and typography to build a comprehensive style guide that would define the arcade's visual identity. Very similar to retro gaming arcade and consoles
High Fidelity
The low fidelity wireframes were then implemented along with the style guide selected and the first initial screens were made which decided the design direction for the whole game. The first 2 games I thought of were block jump and snake! (Pictures below)
AI Integration & Gameplay refinement
PRDs for the game were created with the help of AI tools such as ChatGPT and Perplexity AI. Deep gameplay mechanics and level difficulty were thought of refined with the help of AI and fed into Figma Make for making the final gameplay.
Product Requirement Document (PRD) - Block Jump generated in ChatGPT:
Prompt engineering in Figma make:
Backend Development:
Integrated Supabase to build the backend infrastructure for player account creation and score tracking. Created dedicated buckets for sound effects and music to enhance the gamified experience.
Edge Functions - Server logic for game mechanics
Database Tables - Player scores and leaderboard
Storage Buckets - Retro audio and music files
Results and Impact
Published the game to production and gathered initial user feedback, monitoring engagement and iterating based on player reactions. After user feedback, another game was added called Zen Stack which increased the user play time by 10 more minutes!
100+ active users within the first week of release
Successfully validated AI-enhanced design-to-development workflow
Demonstrated effective integration of Figma designs with AI code generation