Building ArtFlow: Vibe Coding an AI Drawing Tutor for the Kaggle Hackathon
In December 2025, a teammate and I decided to jump into a Kaggle hackathon to see what we could build using Google AI Studio and the new Gemini models. We wanted to build something highly interactive, so we created ArtFlow—a personal, AI-powered art teacher that breaks down any image into a simple, step-by-step drawing tutorial.
Here is a look at what the app does, the tech stack we used, and how "vibe coding" and AI Studio brought the whole thing to life.
The ArtFlow dashboard where users can upload an image to start their tutorial.
🎨 What ArtFlow Does
At its core, ArtFlow is an interactive tutorial generator. Here is the user experience:
- Upload an Image: You upload a picture of a cartoon, animal, or anything you want to draw.
- AI Analysis: The app analyzes the target image, identifying the art style, the exact colors you will need, and creating a custom color-mixing guide.
- Step-by-Step Breakdown: It generates a sequential plan, figuring out exactly how to draw the image from scratch.
- Visual Generation: The app actually draws each step for you, showing progressive images of the artwork coming together.
- Auto-Save History: All your generated masterpieces are saved to a personal history drawer so you can revisit them anytime.
💻 The Tech Stack: React, TypeScript, and Tailwind
To make the app fast, responsive, and visually appealing, we relied on a modern frontend stack:
- Language: TypeScript. With complex data structures mapping out tutorial steps and AI image analysis, TypeScript's strict typing kept our code bug-free and manageable.
- Framework: React. The entire UI is built with functional React components and hooks to manage the complex generation states and UI rendering.
- Styling: Tailwind CSS. All the styling—from the clean backgrounds to the responsive grid layouts and sticky headers—was done using utility classes.
- Backend/Storage: Firebase. We used Firebase services to handle saving the generated tutorials and fetching them for the user's history drawer.
ArtFlow generating the step-by-step visual guides in real-time.
🧠 The AI Magic: Gemini + Imagen
Since this was for a Kaggle hackathon, Google AI Studio was our playground. It allowed my teammate and me to rapidly prototype and test our prompts for planning and image generation before writing the actual application logic.
The app operates in two distinct AI stages:
Stage 1: Reasoning & Planning (The Brain - Gemini 3 Pro)
When an image is uploaded, the app uses Gemini 3 Pro to act as the "brain." It looks at the image, writes a comprehensive plan, breaks the drawing down into logical steps, and extracts metadata like the art style and color palette.
Stage 2: Image Generation & The "AI Supervisor" (The Artist - Imagen)
Once the plan is ready, we use the Imagen model to render each specific step. By feeding the model specific prompts generated by Gemini, Imagen creates the visual guides that show the user exactly what their canvas should look like at each stage of the drawing.
The Midpoint Checkpoint: Halfway through generating the tutorial, an "AI Supervisor" agent steps in. It takes the most recently generated image and compares it to your original upload.
If it looks good, it continues. If it notices a detail error, it issues a PATCH decision, refining the remaining steps. If it detects a foundational mistake, it issues a RESTART decision, completely rewriting the plan and starting over to ensure the final tutorial is actually helpful.
🌊 The Development Process: Vibe Coding
Building this wasn't your traditional software engineering process. My teammate and I heavily utilized "vibe coding" to bring ArtFlow to life.
Instead of manually typing every line of code, we acted as directors. We used AI coding assistants, feeding them natural language prompts (or "vibes") about what we wanted the UI to look like or how the React state should flow. The AI generated the boilerplate, handled the complex Tailwind styling, and wired up the basic logic. This allowed us to iterate incredibly fast. Instead of getting bogged down in syntax errors, we could focus our energy on the high-level architecture, the user experience, and perfecting our Gemini prompts in AI Studio.
🏆 Check Out Our Hackathon Submission
It was an amazing experience building this as a team and seeing what the latest AI models are capable of when paired with modern web frameworks.
If you want to read the full details of our submission, see our architecture diagrams, and dive deeper into the code, check out our official Kaggle writeup here:
0 comments:
Post a Comment