Vibe-Designing with Google Stitch
Over the past year, I’ve been anxiously awaiting an LLM that can generate designs. As a product engineer I have a decent sense of taste, but I find it very time consuming to create quality design directions from first principles. I’ve tried a number of different approaches to speed up my process, like Google Stitch or iterating on designs with Claude, but I haven’t had much success. Behold, Gemini 3 Pro! The day it was added to Stitch I saw it go viral for generating really excellent UX mockups and I knew I had to try it out for myself.
I decided to use it to help me create a travel scheduling app to help find the most ideal dates for traveling with large groups, a pain point I’ve run into repeatedly over the past couple of years. The MVP is pretty simple, largely following the architecture of when2meet but focusing on weeks-long availability windows instead of hours in a day. The high level goal of the project is to surface the ideal date overlap between people’s schedules during a given date range, even if there are conflicts.
The MVP
I started the process by creating some simple wireframes of the core features.
A no account required creation flow and share screen:
A response flow where people can set their availability:
And a results page showing availability overlap and ideal travel dates:
Exploring the UX Design Directions
After this step, the next thing I wanted was to see a design system and UX direction for the app. I had no mood board for this one, so I just gave a brief description of the product and design direction I was looking for in the prompt:
Create a landing page for a group travel scheduling tool call when2travel. description of product: The problem: when2meet is great for “what hour works for a meeting” but nothing serves “what week works for a vacation.” Coordinating family/group trips across a multi-month window is painful. The product: A when2meet-style availability tool for longer date ranges, to find the best window for a group trip. Core flow: Create a plan → name it, set the possible date range, specify trip length (e.g. “7 consecutive days”) share link → fill out with no account needed participants mark availability → drag to select available dates View results → heat map with overlap, x/total counts, click for details, surface best windows Design direction: I want something that is modern, clean, and smooth to use. Expect your primary user to be Millenial or younger, and understand they are dealing with a mundane, frustrating issue. Our UX should evoke the opposite emotions.
The result was definitely a step up from previous gemini models in terms of layout, but it still created a very generic UI with clear signs of being AI generated (unnecessary UI, too much shadow, etc.), which, of course, wasn’t what I wanted:
I continued trying different generations and variants until I hit my usage limit, still unsatisfied with my options. Clearly, something about my prompt needed to change. I did some reading on the subject, and stumbled across an Anthropic blog post describing my exact issue: distributional convergence.
Essentially, LLMs are heavily trained on generic UI and will always default to the same styles that dominate their training data, which will always be generic and bland, aka the “ai slop” aesthetic.
The article goes on to explain that we can correct this by essentially calling out the model and telling it to avoid using the styles, fonts, motion, etc. that result in suboptimal UX.
With my newfound knowledge, I revised my prompt to incorporate the suggestion from the article, and ran a few iterations:
Create a landing page for a group travel scheduling tool call when2travel. description of product: The problem: when2meet is great for "what hour works for a meeting" but nothing serves "what week works for a vacation." Coordinating family/group trips across a multi-month window is painful. The product: A when2meet-style availability tool for longer date ranges - find the best window for a group trip. Core flow: Create a Plan → name it, set the possible date range, specify trip length (e.g., "7 consecutive days") Share link → no accounts needed Participants mark availability → drag to select available dates View results → heat map with overlap, x/total counts, click for details, surface best windows UX Guidelines <frontend_aesthetics> You tend to converge toward generic, "on distribution" outputs. In frontend design,this creates what users call the "AI slop" aesthetic. Avoid this: make creative,distinctive frontends that surprise and delight. Focus on: - Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics. - Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration. - Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. - Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic. Avoid generic AI-generated aesthetics: - Overused font families (Inter, Roboto, Arial, system fonts) - Clichéd color schemes (particularly purple gradients on white backgrounds) - Predictable layouts and component patterns - Cookie-cutter design that lacks context-specific character Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box! </frontend_aesthetics>
Here was the output:
This is better, but still has the classic signs of AI slop: weird, overused gradients, the pattern in the background, unnecessary UI, and a grey color that doesn’t meet WCAG contrast ratios. But I was starting to see the vision! The dark green/lime green aesthetic is admittedly unusual for a scheduling tool, but I cared more about creating something fun. I thought the lime green action buttons and font injected some playfulness into what is usually the most frustrating part of planning a trip, so I ran with it.
Given the green color scheme, I wanted to make it feel more organic. I prompted to use the same colors but with aggressive border radius:
You may notice that it still snuck in some subtle background gradients. Overall though, I liked this a lot, and felt we'd finally nailed the style and aesthetic I was looking for. To codify the style guide, I had gemini generate a brand style guide, which I used to set a theme for a set of shadcn components and followed for all of the other screens in the app:
And finally, the screen I was envisioning from the very beginning. I asked for a results screen that showed a heatmap view of availability, a hero section with ideal dates, and a short explanation of the logic used to calculate them. Here was our first generation:
This was roughly on the right track but has a number of problems with its layout, and is generally a bit too information dense. I really just wanted to show a hero with the ideal dates, and a feature packed heatmap next to them to easily see a user's availability. After making some refinements, here is where it ended up:
This still has some issues, like the unnecessary "Best Option" label, and the font beneath the trip title being too tight, but these things are workable from code.
I decided to exclude the share screen and availability section, as these went pretty smoothly. I also had time to add a lot of extra detail a weekend build wouldn't normally have time for, like dedicated screens for HTTP error codes, and a nice OpenGraph image for share cards.
Generating the Branding
The last step was generating the brand itself. I already had the brand colors, so I just needed an icon, wordmark, and a good (enough) name.
For the name, I knew the app was mostly targeted towards gen Z or younger who are planning group trips for 10+ people. I wanted to play off of the “the get trip out of the group chat” meme in circulation, so I named the app PlanTheTrip.
Regarding the icon, I had a vague idea in my head about an abstract plane traveling to a destination (e.g. making the trip happen). For this step, I figured I’d try my hand at getting an image generation model to fill in the gaps.
I drew this quick sketch and ran it through gemini and ChatGPT image gen with this prompt:
Convert this sketch into a Minimal vector logo on a white background. Single color: bright green (#4ade80). The design shows a small solid circle (origin point) in the upper-left area. From this circle, a thick curved path swoops downward in an S-curve or playful arc toward the top-right. The path terminates in a simple airplane shape pointing diagonally up and to the right. The curved path should be a solid thick stroke, like a ribbon, not a thin line. The overall feel should be playful but clean - like a flight path on a map. Style: flat vector, minimal, modern. No outlines, no gradients, no shadows. Balanced within a square frame. No text.
The prompt specified the following:
- Instructions to create a minimalistic vector icon
- Described my design and ideally what I wanted to see
- A second section reiterating the icon style (I find it hard to get image gen models to create something simple 😅)
Sketch:
Outputs
Gemini:
ChatGPT:
The Verdict
Gemini’s initial batch of icons were just bad. It did follow the exact curve from my reference image, but kept creating images that were too detailed to be an app icon, as seen above with a 3D plane. At face value, ChatGPT was capturing the abstract aesthetic I’d asked for, but unfortunately didn’t follow the curve from my sketch. This was important because it creates a weird visual balance due to the path “stretching”. The result would have been an icon that looks increasingly poor at smaller sizes.
What followed was a ton of back and forth to get this where I wanted, with Gemini ultimately winning out. Of the two models, Gemini was much easier to steer than ChatGPT, which was prone to massive overcorrections.
Now that we finally have our icon, I needed to strip away the pure white background and vectorize it to create an SVG. I used vectorizer.io to trace the icon to an SVG I could actually use for an icon. Here’s the final output for the wordmark!
Conclusion
At last, here's the end result!
What I learned
I built this project to experiment with fully using AI with Google Stitch for design with Gemini 3 Pro, and Claude Opus 4.5 in Claude Code to build the app. Overall AI is getting exponentially better at design and working independently, to the point where I didn’t need to be manually involved with writing code to get things to work or fix issues. That said, it still has a ways to go.
Google Stitch
As I was exporting the stitch files and building them, I unfortunately realized that every mockups Stitch was generating had subtle differences in color, padding, font size, and UX patterns. It took me a while to get everything synced to one source of truth. In general, this is the biggest shortfall of stitch is that you cannot set a color palette that the model would respect.
The other major observation is that these designs are also not conducive to a responsive interface. The app looks substantially better on full screen on a computer, and still functional but not ideal on any other screen size. For something I anticipate will be mobile-first, this was a real problem.
Branding / Icon Generation
Surprisingly, generating the simple icon for this project consumed quite a bit of time. Gemini decisively outperformed ChatGPT for icon generation, and was much more steerable, but even so the model had a tendency to overcorrect and regress on something it previously had right. Claude was quite helpful to generate prompts for the image models.
Code Quality
Since this post is focused more on the UX side, I won’t go too in depth here. Overall I was impressed with Opus - this was the first app I’ve been able to vibe code fully without needing to get claude unstuck from a mess it created. The downside, is that the architecture of the app was not good. Code was monolithic and heavily duplicated, which took a while to clean up.
Well, that's everything! Are you planning a trip and want to take the app for a spin? Check out the finished product here: https://justplanthetrip.com/