Introduction
I opened Figma and just stared at a blank canvas.
To the Taste — an app to record precious drinking moments with my wife. The idea was crystal clear in my head: a warm, visual-first experience where we could log the taste, the mood, the food pairing, and the memory of that exact evening. But "where do I even start?" is a wall that kills more side projects than anything else.
So instead of drawing wireframes from scratch, I opened Google Stitch.
What is Google Stitch?
Google Stitch is an AI-powered UI prototyping tool from Google Labs. You describe your app idea in plain language, and it generates screen layouts and basic structure for you — no dragging components, no building from zero.
For designers, it eliminates the terror of the blank canvas. For developers, it's the fastest way to visualize an idea before writing a single line of code.
How I used it
I gave Stitch this prompt:
"A mobile app to record precious drinking moments — not just the drink itself, but the mood, taste profile, and food pairing of that evening. Warm and visual-first aesthetic. 5 core screens designed with Flutter development in mind."
Stitch came back with five screens:
 |
| Google-stitch: first result from my initial prompt. |
1. Home — Timeline & Memories: A card-based timeline of past records. Each card shows a photo, a short tasting note, and the pairing from that night.
2. Taste Profile — Your Palette A radar chart visualizing sweetness, acidity, body, and bitterness across all recorded drinks. A quick answer to "what do I actually enjoy?"
3. Log — Quick Entry & Label Scan: The core recording screen. Label scanning, mood input, taste sliders, food pairing — designed to be completed in under a minute while still at the table.
4. Pairing Gallery: A photo-first gallery of drink and food combinations. For those "what did we have with that wine?" moments.
5. Settings / My Page Statistics, account settings, and app preferences.
The design direction: Vintage Glow
Along with the screens, Stitch settled on a Vintage Glow aesthetic — warm beige backgrounds, soft orange accents, champagne gold highlights, and a mix of serif and sans-serif typography to give the "recording a memory" feeling some weight.
Looking at the result, I thought: this is exactly the vibe I had in my head.
But there was a problem — accessibility
Honestly? My first instinct was to ship it as-is. It looked beautiful.
Then I ran an accessibility check. It failed.
The colour combinations Stitch generated were visually stunning but didn't meet WCAG contrast-ratio requirements. Beige text on gold backgrounds. Cream buttons on orange. Fine to look at in a well-lit room — completely unreadable for users with low vision, or for anyone glancing at their phone in bright sunlight.
Here's the lesson: if you don't explicitly tell an AI tool to meet accessibility standards, it won't think about them. Aesthetics and accessibility are separate problems, and the judgment call between them is still a human responsibility.
So I went back and rebuilt the design system from scratch.
Round two: Universal Sip AAA
The first system leaned too heavily into deep burnt orange — it felt like a wine app, not an app for every kind of drink. I wanted something that worked just as naturally for a cold beer on a Friday night, a glass of soju with Korean BBQ, or a whisky by the fireplace.
 |
| Accessibility is a matter |
The new system — Universal Sip AAA — shifted the palette from wine-red tones to Deep Teak and Amber: the colour of aged wood, ripe grain, and warm candlelight. Universally "drink-adjacent" without belonging to any single category.
Three concrete changes:
1. A universal colour palette: Out with the burnt orange. In with Deep Teak and Amber — warm, organic tones that don't read as "wine only." Every drink feels at home in this palette.
2. WCAG 2.1 AAA compliance: Every text-background combination maintains a contrast ratio of at least 4.5:1. Not just passable — actually comfortable to read in any condition.
3. Softer UI elements:
Corner radii rounded up to 8px throughout (ROUND_EIGHT). Small change, big difference in feel — friendlier, less clinical, more like a personal journal than a product catalogue.
One more UX fix: the FAB
While rebuilding the design system, I fixed one UX issue that had been bothering me.
 |
| Google Stitch - add FAB |
In the original layout, the "Log" button sat in the bottom navigation bar alongside Memories, Flavour, Gallery, and Settings. But logging a drink is the single most important action in the app — it shouldn't compete for attention with navigation items.
I pulled it out of the nav bar entirely and turned it into a Floating Action Button (FAB) pinned to the bottom right. Reachable with one thumb from any screen. Immediately visible. The Amber accent colour makes it stand out without breaking the overall mood.
The bottom bar became cleaner too: just four items — Memories, Flavour, Gallery, Settings.
My honest take
Google Stitch is genuinely impressive at one specific thing: turning a vague idea into a concrete visual starting point in minutes. That alone is worth a lot. The blank canvas problem is real, and Stitch kills it.
But don't ship what it gives you without looking closely. Accessibility, UX logic, and real-world usability — these don't show up automatically unless you ask for them explicitly. And sometimes not even then.
AI gives you a beautiful starting point. The judgment of whether it's actually right for your users? That part is still yours.
Note: this Universal Sip AAA system is the design foundation — not the final shipped product. In the next parts of this series, the design will continue to evolve as we move into actual Flutter development. That's kind of the point.
Next up — Part 2: I took a screenshot of this Stitch output, handed it to Claude, and had a complete Figma design system ready in 15 minutes. Here's exactly how that worked.
Comments
Post a Comment