Gemini 3.5 is Insane upgrade for web designers!

Gemini 3.5 is Insane upgrade for web designers!

· 2 min read

Overview

Viktor Oddy demonstrates how Gemini 3.5 Flash completely changes the game for web designers. In this 18-minute walkthrough, he builds a premium animated website worth $50k using nothing but AI-generated prompts and Gemini's new capabilities.

What You'll Learn

  • Setting up Gemini 3.5 Flash for web design workflows

  • Using animated prompts from MotionSites.ai for one-click designs

  • Building responsive layouts with premium typography

  • Creating smooth scroll animations and micro-interactions

  • Exporting production-ready code from Gemini

Step-by-Step Breakdown

1. Setting Up the Workspace

Viktor starts by opening Google AI Studio with Gemini 3.5 Flash selected. He demonstrates how to structure your initial prompt to get a complete website layout rather than individual components.

2. Crafting the Hero Section

Using a detailed prompt that specifies typography (font sizes, weights, letter-spacing), color palette (HSL values), and layout structure, Gemini generates a stunning hero section with gradient overlays and animated text.

3. Adding Animated Sections

The key insight: Viktor uses MotionSites.ai's prompt library to inject pre-crafted animation instructions. Scroll-triggered fades, parallax backgrounds, and staggered card reveals all come from structured prompts.

4. Responsive Design

Instead of fixing breakpoints manually, Viktor prompts Gemini to generate mobile-first CSS with clamp() values and fluid grids. The result works across all devices without additional tweaking.

5. Final Polish & Export

The final step involves prompting for micro-interactions — hover states, button animations, and smooth scrolling. Viktor exports the clean HTML/CSS and demonstrates the final result.

Tools Used

  • Google AI Studio (Gemini 3.5 Flash)

  • MotionSites.ai (animated prompt library)

  • VS Code (code review)

  • Chrome DevTools (responsive testing)

Key Takeaways

  • Gemini 3.5 Flash produces significantly cleaner code than previous versions

  • Pre-crafted prompts save hours compared to writing from scratch

  • The $50k quality comes from attention to typography and animation details

  • Mobile-first with clamp() is the winning strategy for responsive AI-generated sites