HAPIO App
A vibe-coded exploration app built end-to-end with AI coding tools — a live test of how far AI-assisted design-to-code workflows can go.
- Role
- Designer & Builder
- Timeframe
- 2024–2026
- Key Tasks
- Concept Exploration
- Prototyping
- Interaction Design
- Development
- Tools
- Figma
- Cursor
- Next.js
01
Problem
Product ideas often lose momentum between an interactive design concept and a working prototype. I wanted to test whether one designer could shorten that gap without flattening the craft of the experience.
02
Process
I treated AI coding tools as a collaborative material: defining small behavioral goals, building in short loops, and evaluating each result in the browser. Design decisions and implementation evolved together rather than through a traditional handoff.
03
Outcome
The experiment produced a working application and a repeatable set of practices for AI-assisted prototyping. It also clarified where automation accelerates execution—and where careful human direction still matters most.
04
Solution
Bring design and development into one continuous workflow. Small behavioral goals, interactive prototypes, and browser-based evaluation turn an exploration concept into a working application, with design judgment guiding each iteration.
Concept explorations
Define small behavioral goals that make an idea tangible. Early explorations focus the design direction and give each prototype a clear purpose.
Prototype behavior
Build in short loops and evaluate interactions in the browser. Design and implementation evolve together as each iteration reveals what needs refinement.
Built experience
Bring the refined interactions into a working application. The experience captures a repeatable approach to AI-assisted prototyping, guided by deliberate design decisions.