Deep Dive: Gemini 3 Pro vs Gemini 2.5 Pro for Building Modern UIs

Google just dropped Gemini 3 last week and it blew some people on Twitter and Reddit with how good it is at reasoning, reliability of output, and vibe coding, all while doing it with less tokens and less time.

I use v0 for experimenting complex animations in the web and Cursor and Claude for everything else. However, what blew me away the most is how good Gemini has improved when it comes to UI and design output, even with zero-shot prompting for complex animations:

So, I decided to put Gemini 3 Pro (Preview) and Gemini 2.5 Pro to the test using zero shot prompting (except for #5). We're going to vibe code using the prompts below without doing any further editing, then we'll evaluate the results.

For this comparison, we will use Google AI Studio. It's a unified playground where you can test AI models of Google for free.

We're going to test the models across five key criteria:

1. Layouts: Handling complex responsive structures with Tailwind CSS.
2. Components: Generating reusable React components.
3. Interactions & Animations: Making components interactive and animate them.
4. Code Quality: Evaluate if the code adheres to TypeScript and Next.js best practices.
5. Image to Code: Converting visual designs into functional code.

Let's begin!

1. Layouts

Layouts are the foundation of any web app. In this test, we asked both models to build a dashboard layout featuring a responsive grid, a collapsible sidebar, and a sticky header using Tailwind CSS.

Prompt

Create a responsive Next.js dashboard layout using Tailwind CSS. Requirements:

1. Collapsible sidebar navigation (hidden on mobile, drawer on click).
2. Sticky top header with search bar.
3. Main content area with a responsive grid (1 col mobile, 2 col tablet, 3 col desktop).
4. Use semantic HTML tags (<main>, <aside>, <header>).

Gemini 2.5 Pro

Gemini 2.5 Pro provides a solid foundation. It correctly uses Flexbox and Grid utils. However, the look and feel reminded me the older versions of the admin dashboard layouts I used to build with Boostrap. Last, the interactivity with the sidebar is basic and occupies the entire screen when expanded on mobile view.

Gemini 3 Pro

Gemini 3 Pro demonstrated a deeper understanding of modern CSS structure and layouts. The LLM model leveraged Tailwind's arbitrary values and calc() functions effectively vs. relying on hardcoded values. Plus, the look and feel of the UI is modern and more polished than Gemini 2.5 Pro's output. Last, the interactivity with the sidebar is more polished and occupies the entire screen when expanded on mobile view.

Winner: Gemini 3 Pro for producing a more responsive, structured, scalable, and modern layouts.

2. Components

Next, let's task the LLM models with creating a reusable "Pricing Card" component, which is a common component used in web apps that integrates with subscription services in exchange for unlocking premium features.

Prompt

Generate a reusable PricingCard component in React/Next.js with Tailwind CSS. Props: title, price, features (array), isPopular (boolean). Features:

1. If isPopular is true, show a 'Most Popular' badge and a highlighted border.
2. Map through features and display them with checkmark icons.
3. Use clsx or tailwind-merge for conditional class handling.
4. Strict TypeScript typing.

Gemini 2.5 Pro

Gemini 2.5 Pro generated a functional pricing card component. It used template literals for class names, which can get messy. Also, despite being given the clsx and tailwind-merge requirements, it did not follow use any of them. In terms of interactivity, the CTA has a hover animation but no card hover animation.

Gemini 3 Pro

Gemini 3 Pro nailed the requirements and went extra mile by adding both monthly and yearly discounted pricing. Also, it followed the requirements and imported clsx and tailwind-merge and used them for the className logic. In terms of interactivity, both the CTA and card has a subtle hover animation.

Code Output Review

Below, you can see how the conditional class handling in the Gemini 2.5 Pro output can look complex and messy overtime, particularly when working with more components or adding extra class and inline styles:

// Gemini 2.5 Pro - PricingCard.tsx
 
import React from 'react';
import { CheckIcon } from './icons/CheckIcon';
 
(...)
 
const cardClasses = `
  flex flex-col bg-white rounded-xl shadow-lg transition-transform duration-300
  ${isPopular ? 'border-2 border-indigo-500 scale-105' : 'border border-slate-200'}
`;
 
const buttonClasses = `
  w-full py-3 px-6 rounded-lg font-semibold text-center transition-all duration-300
  ${
    isPopular
      ? 'bg-indigo-500 text-white hover:bg-indigo-600 shadow-indigo-300/50 shadow-lg'
      : 'bg-white text-indigo-500 border-2 border-indigo-200 hover:bg-indigo-50 hover:border-indigo-500'
  }
`;
 
(...)

vs.

Gemini 3 Pro followed the requirements from the prompt. It also created a custom function called cn from tailwind-merge to handle the conditional class logic, which is good for reusability and maintainability.

// Gemini 3 Pro - PricingCard.tsx
 
import React from 'react';
import { Check } from 'lucide-react';
import { cn } from '../lib/utils';
 
(...)
 
<div
className={cn(
  "relative flex flex-col rounded-2xl border bg-white p-6 shadow-sm transition-all duration-300 hover:shadow-lg xl:p-8",
  isPopular
    ? "border-primary-600 ring-1 ring-primary-600 scale-[1.02] lg:scale-105 z-10"
    : "border-gray-200 hover:border-primary-200",
  className
)}
>
 
 
{isPopular && (
  <div className="absolute -top-4 left-0 right-0 flex justify-center">
    <span className="rounded-full bg-primary-600 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white shadow-sm">
      Most Popular
    </span>
  </div>
)}

// lib/utils.ts
 
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
 
/**
 * Merges Tailwind CSS classes safely, handling conflicts.
 */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

🎉 Winner: Gemini 3 Pro won this round by accurately following the requirements and ensuring the component is reusable and more maintainable.

3. [TODO] Interactions & Animations

4. [TODO] Code Quality

5. [TODO] Image to Code

Conclusion

Gemini 3 Pro won by landslide in this comparison.

Gemini 2.5 Pro outputs a familiar look and feel like Bootstrap or Material design, which required more time to polish and lots of follow up edits, especially when matching a product and brand identity.

Often, I use Gemini because of it's large context window and cost-effectiveness: from code documentation, analysis, to debugging code, but not for building modern UIs. While Gemini 2.5 Pro remains a capable LLM model, I find Gemini 3 Pro a really solid upgrade.

I am excited for what's next for Gemini 3 Pro and looking forward to adding it to my workflow for building modern UIs.

If you have any questions, shoot me a message on email!

~

Thank you for your readership,
Joshua de Guzman