Goal
Create an interactive web application that would inspire my daughters to start drawing more with fun prompts through gamification.
The application needed to be mobile-friendly, easily customizable, and provide tactile feedback to keep them engaged with the application.
This was going to be my first "vibe coding" experience, so keeping it simple was important for me, as well as my preschool "clients"
Requirements
Generate random creative drawing prompts
Implement haptic feedback for mobile devices
A child-friendly interface
Provide engaging visual feedback through gamification and a spinning device, allowing my daughters to see all of the unique combinations.
Solution
Using Claude AI to rapidly create design exploration and prototyping, I developed a slot machine-style application. I worked with my daughters to brainstorm 20 different colors, animals and verbs that could be fun to draw. Each slot contains one of those prompts, with all of them controlled with a large call to action at the bottom of the viewport. After a successful spin, a sentence with the result appears below as a success message: "Draw a [Color] [Animal] that is [Verb]!".
I used a color palette consisting of their favorite shades of purple and pink. I implemented haptic feedback to keep them interested and give them a feeling of spinning for their unique drawing prompt.
Codepen can be found here:
