Gemini 3 Masterclass: Create Landing Pages from Start to Finish
The full blueprint on how to create professional, fully animated landing pages from start to finish using Gemini 3 inside Aura. We're witnessing a disruption in the web design industry—learn how to build at the highest level in a fraction of the time.
On this page
THE MASTERCLASS
From Blank Canvas to Polished Website
This whole animated template was done from start to finish using Gemini 3. We're talking about beam animations, buttons, logos with marquee animations, hover effects, beautiful typography, and fully responsive designs that work on mobile and desktop.
In this comprehensive masterclass, you'll learn the exact workflow for creating professional landing pages that can compete with templates selling for $50-$100 USD on Webflow and Framer. Whether you want to sell templates, speed up client work, or build for your own startup, this tutorial covers everything.
What You'll Learn:
- How to prompt complex animations (beams, noodles, marquees)
- The best resources for finding top-tier design inspiration
- How to use "Edit Mode" to refine specific sections without breaking layouts
- The hero section strategy (spend 50% of your time here)
- Mastering icons (Iconify & Solar) and professional typography
- Building feature sections with Bento Grids
- Creating viral social media assets to market your templates
Disrupting the $100 Template Economy
We're about to disrupt a whole industry—a very lucrative one. People are selling templates from $50 to $100 USD per template on Webflow and Framer. A designer who excels at this can make $5,000-$20,000 out of one template over a long period of time. With multiple templates, you can essentially make a six-figure business ($100,000-$300,000 a year).
The Speed Factor:
Our team used to take about two weeks per template in Figma. Now, we're designing at the level I've always dreamed of for my team. You can create templates in 30 minutes to a few hours, or even a few days if you spend a ton of time customizing every single section and animation. But it's your choice as a creator to spend the time that you want to specialize in.
Finding Top-Tier Inspiration
A screenshot is worth everything with Gemini 3. Instead of prompting maybe 100 words or 1,000 words, you might want to take a screenshot instead. It holds the fonts, the colors, the layout (is it grid or flex?), what font, icons—AI is pretty good at detecting fonts.
Hero Sections
Supahero - A lot of examples of beautiful hero sections. Usually spend about 50% of the time on the hero because this is everything—it's the cover image for your Instagram, TikTok, Twitter.
Feature Sections
Bento Grids - Apple popularized this in their WWDC demo, and now it's becoming common ground in the design space. Great for feature sections with cards laid out in different ways.
Call to Actions
CTA Gallery - Focused on call-to-action sections. Great if you want to call for attention, someone to click and take action.
Real-World Examples
Mobbin - Real product designs. If you get a pro account, you can search specifically for components like "hero section." The designs are organized beautifully, and you can see the exact animations and interactions.
Creative Visuals
Dribbble - Filter by "web design" and look for designs that resonate with your vision. Use these as wireframes, not templates to replicate exactly.
Background Animations
Unicorn Studio - Beautiful animated backgrounds that everyone keeps asking about. Free to use as-is, Pro account for customization.
The Hero Section Strategy
Usually spend about 50% of the time on the hero because this is everything. It's the cover image for your Instagram, TikTok, Twitter. Everyone clicks on it when there's a laser or there's a beautiful composition of that cover.
The Process:
- Collect screenshots from Supahero, Dribbble, or your own designs
- Paste the screenshot into Aura
- Go to Prompt Builder and create the hero section
- Change text, names, numbers
- Specify icon sets and fonts
- Generate multiple variations until you find something that clicks
- Refine colors, animations, and details
The goal is to use these designs as wireframes—not to copy them exactly, but to understand the principles, layouts, and vibes. Change the text, change the colors, change the logos, change the icons, add animations.
Mastering Icons & Typography
One of the main differentiators in the new AI age is your taste. Knowing which icons and fonts to use separates generic designs from exceptional ones.
Iconify & Solar
Iconify is open source and has all icons you can use. Solar is one of the favorites because it has multiple styles: outline, broken, duotone. The more popular something is (like Lucide), the more it becomes a baseline—it becomes "AI slob." Use Solar Duotone Bold for uniqueness.
SVG Logos
Use SVG logo monochrome which has a lot of logos that are super useful. You used to spend so much time gathering all of these Apple logos, Google logos, but now you can just mention the name. You can even mention maybe the logos that you want.
Typography Choices
Inter is by far the most used font in the world right now, but there's definitely a really big need now to be a little bit different. News Reader is a beautiful serif font that works really well with sans-serif fonts. It also has a beautiful italic style.
Font Pairing
Aura has a bunch of font pairs that you can just click and pair directly. You can definitely mention specific fonts in your prompt. At least know some of the names such as Inter, Space Grotesque, News Reader, Playfair Display.
Prompting Advanced Animations
Animations are where AI models traditionally fall short, but Gemini 3 breaks that pattern. You need to know how to prompt for it specifically.
Border Beam Animation:
Add a 1px border beam animation around the
pill-shaped button on hover.Noodle Beam Animation:
Add noodles to connect with the circle.
Animate the noodles with beam animation.Marquee Animation:
Add a marquee infinite loop slow animation
to the logos using alpha mask.Scroll Animations:
Animate when in view: fade in, slide in, blur in,
element by element. Use 'both' instead of 'forwards'.
Don't use opacity 0.Vertical Lines & Grid:
Add vertical container size lines.
Add 0 1 0 2 0 3 steps.Iterating and Remixing Designs
The key is to generate as many variations as possible until you find something that really clicks. Remixing is kind of like the new era—we're all essentially remixing everything.
Iteration Strategies:
- Change colors: "Change to orange" or "Change to light mode"
- Change content: "Instead of matcha make it about oranges"
- Change fonts: "Use serif font" or "Use beige and orange"
- Add details: "Add noodles to connect with the circle"
- Fix specific elements: "Fix the logos to use SVG and not images"
Building Feature Sections & Bento Grids
Once you've nailed your hero section, adding new sections becomes exponentially faster. The model will match the styling, animations, and overall vibe automatically.
The Process:
- Take a screenshot of a section you like from Mobbin or Dribbble
- Click "Add Section" in Aura or use "Adapt New Section" in Prompt Builder
- Reference components if you want specific styles
- Prompt: "Adapt a new section inspired by this image. Change text and names. Use Iconify Solar Duotone icons and maintain the existing color scheme and animation style."
- AI generates a section that matches your existing design perfectly
You can also reference multiple components at once by holding Shift and selecting a bunch. This is really powerful for building consistent sections quickly.
The "Edit Mode" Strategy for Precision
Edit Mode is great for small tasks. It's not as powerful as the default mode where it regenerates everything, cleans your code, and all that stuff. But Edit Mode is great for small tasks where you want to keep pretty much all the same structure.
When to Use Edit Mode:
- Changing all the text to fit the hero concept
- Adding new sections without regenerating everything
- When AI is changing a little bit more than you ask for
- Small color changes: "Change color from red to green in the features section"
Polishing & Responsive Design
AI is not very good at images—it often generates broken images. What you want to do is go to Assets and search the Aura library. Fix at least the broken images—that's the minimum you should do.
Fixing Images
Go to Assets and search for specific categories (orange, food, portraits, headshots). You can also use Nano Banana to generate new images or go to Midjourney and upload them one by one. Make sure to fix at least the broken images.
Responsive Design
Use Aura's Infinity Canvas to check different resolutions. The main thing you're always looking for is horizontal scrolling—this is kind of like what you used to spend so many hours before to adapt designs to different viewports and browsers.
Resources & Tools
Main Tool
- • Aura - The AI-powered design platform
Inspiration & Assets
- • Supahero - Hero sections
- • Bento Grids - Layouts
- • CTA Gallery - Call to actions
- • Mobbin - Real-world apps/sites
- • Dribbble - Creative visuals
- • Unicorn Studio - Background animations
AI & Design Tools
- • Nano Banana - AI Image Generation
- • Iconify - Icon library
Creating Viral Social Media Assets
Creating beautiful covers is super important if you are creating beautiful slides for Instagram or creating a cover or creating different showcases on Instagram, Twitter, LinkedIn.
The Process:
This is the secret sauce for creating viral social media assets. I use this all the time in my tweets, and they generate a lot of engagement. It's very polished, looks professional, but it's all sort of organized and makes it super easy.