A product designer with no traditional development background describes building a puzzle game from wireframes to working prototype using AI-assisted development. The process involved Figma for wireframing, Figma Make for interactive prototyping and alpha testing, then Cursor as an AI coding partner to implement a TypeScript React app with Firebase Authentication, Firestore, and Firebase Hosting. Key insight: AI didn't make it easy, it made it possible — disciplined product thinking upfront kept implementation from drifting, and separating system design from visual style enabled safer iteration throughout.
Table of contents
Wireframing the System, Not the StyleUsing Figma Make as a Functional SandboxAlpha Testing in the Real WorldMoving Into Implementation (As a Non-Developer)Another Round of Real TestingThe Bigger InsightSort: