Bento Atelier 🍱
Built in 72 hours with three AIs
Idea
Japanese bento box web app where users can make, customize, and share a handcrafted bento
Timeline
72 hours
Stack
AI Studio · Gemini · Claude
Status (live)
https://bento-atelier.xyz ︎︎︎
Japanese bento box web app where users can make, customize, and share a handcrafted bento
Timeline
72 hours
Stack
AI Studio · Gemini · Claude
Status (live)
https://bento-atelier.xyz ︎︎︎
Bento-making is an act of care. Each compartment chosen, each item arranged — it's edible art with emotional weight. I wanted to translate that ritual into something digital: a canvas where anyone could compose a bento and send it to someone across the world. The concept was clear. What I didn't have was a conventional path to build it.
No engineering team. No months of runway. What I did have was a clear vision, a weekend, and three AI collaborators I was determined to use like a production studio.
Given precise, well-structured prompts, AI Studio wrote the code and features through prompting and experimentation. Using the integrated agents, it build, fix, and update my full-stack app based on natural language.
Before writing a single prompt for AI Studio, I walked Claude through my full vision: the core features, the UI structure, the UX flow, the art direction. Claude helped me translate all of that into prompts detailed enough to actually build from.
I used Gemini for anything touching infrastructure — APIs, Supabase, Google Cloud Console — and for generating visual assets in line with my style direction.
Once the concept was locked, Stitch was where the UI came to life: color, typography, look and feel. It set the visual foundation that everything else was built on top of.
The 72-hour Sprint
HOURS 0-2
Define the product with Gemini & Claude, write the prompts
I explained the idea on Gemini and Claude, while defining the user journey. With a clear brief, I broke the app into buildable units: the bento container selector, the ingredient panel with a drag-and-drop canvas, the community wall for user creations, and as well as the share functionality. Each unit includes detailed prompts that specifies behavior, constraints, and look & feel.
Define the product with Gemini & Claude, write the prompts
I explained the idea on Gemini and Claude, while defining the user journey. With a clear brief, I broke the app into buildable units: the bento container selector, the ingredient panel with a drag-and-drop canvas, the community wall for user creations, and as well as the share functionality. Each unit includes detailed prompts that specifies behavior, constraints, and look & feel.
HOURS 2-48
Build in Google AI Studio
AI Studio generated each component from my prompts. I used Tailwind CSS and Supabase for storing data. Not everything worked on the first pass, but each failure became a new prompt. The loop was: build → test → diagnose → re-prompt → repeat.
Build in Google AI Studio
AI Studio generated each component from my prompts. I used Tailwind CSS and Supabase for storing data. Not everything worked on the first pass, but each failure became a new prompt. The loop was: build → test → diagnose → re-prompt → repeat.
HOURS 48-72
Polish, QA, and ship
The final stretch was visual refinement and case testing. Rounding out the ingredient library, tuning the canvas feel, testing share links and social exports across devices. I surfaced everything that was broken. Then I deployed, pointed the domain, and launched Bento Atelier.
Polish, QA, and ship
The final stretch was visual refinement and case testing. Rounding out the ingredient library, tuning the canvas feel, testing share links and social exports across devices. I surfaced everything that was broken. Then I deployed, pointed the domain, and launched Bento Atelier.
INGREDIENTS AND ASSETS
See other work