This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
What I Built
I set out to build a simple yet delightful web app that transforms text descriptions into black-and-white coloring pages for kids. The key prompt I used was: "Build a single-page, fully functional web application using React that allows users to generate black-and-white coloring book pages from a simple text description" - but the magic happened when I asked Google AI Studio to enhance each user prompt with specific coloring book styling instructions like "simple bold outlines, black and white, no shading, clean lines, white background." I utilized the Imagen API for image generation and implemented native Web Share functionality for easy sharing.
Demo
You can try the live app here: (Link Removed) As the free Tier was done and I couldn't afford paying for it. When it worked it worked wonders.
Github Repo Link: Coloring-Page-Generator.git
The app features a clean, minimalistic interface where users can type simple descriptions like "baby in the hands of mother" and instantly get beautiful, kid-friendly coloring pages. The generated images maintain perfect coloring book aesthetics with bold outlines and no shading.
My Experience
This project completely blew my mind in terms of speed and precision. Going from idea to a fully deployed, working app took less than 30 minutes - and that includes the time spent crafting the perfect prompt!
What surprised me most:
- Prompt engineering is an art: The way Google AI Studio helped me structure the initial prompt was incredible. It asked exactly the right clarifying questions about target audience, UI complexity, and technical requirements.
- Automatic prompt enhancement: The genius move was having the app automatically enhance user prompts. When someone types "dinosaur," the API actually receives "coloring book page for kids, dinosaur, simple bold outlines, black and white, no shading, clean lines, white background." This consistency is what makes the results so reliably good.
- Imagen API quality: I expected decent results, but the quality and speed of the Imagen API genuinely caught me off guard. Every single generation looks like it came from a professional coloring book.
Key takeaways:
- Specificity matters: The more detailed and context-rich your initial prompt, the better your final product will be.
- AI understands user experience: Google AI Studio didn't just generate code - it thought through the entire user journey, including loading states, error handling, and responsive design.
- Modern web APIs are powerful: Implementing native sharing functionality with just a few lines of code shows how far web standards have come.
The most magical moment was seeing the first generated image - a perfect coloring page that any parent would be happy to print out for their kids. It reinforced my belief that we're living in an incredible time where complex, useful applications can go from concept to reality in minutes, not months.
The whole experience felt less like traditional coding and more like having a conversation with an incredibly skilled developer who just happens to work at superhuman speed!
This post was written with assistance from Claude AI to help structure and articulate my experience building with Google AI Studio.
Top comments (0)