How I Redesigned My Homepage with Gemini 3 (No Code Required)

Gemini 3 is out (Google’s new model) and I can verifiedly say it is a real “beast”.

I tested it immediately, and it is easily on the level of Claude 4.5 for programming tasks, probably even better. I gave it a prompt in Google AI Studio, and on the first try, it built a fully functional web app.

But today I want to talk about something else.

I wanted to test its eye for UX and Design.

So I used Windsurf AI (which already supports Gemini 3) to completely redesign my homepage.

In today’s newsletter, I’ll quickly explain how I guided the model through a conversation to turn a boring website into a modern storytelling experience.

How I upgraded my website with Gemini 3 to “storytelling”

Most people think you need to be a pro designer or developer to get a custom, high-quality feel. Not true. You just need to know how to direct the AI.

I recorded a quick video of the final result here:

Here are the 3 key principles I used to get this result.

Principle 1: The Story Dictates the Layout

I didn’t start by asking for a “hero section” or “three columns.” I started with the narrative.

I asked the model to structure the page like a person’s journey: The Struggle → The Obstacles → The Solution.

I specifically asked for a visual “connecting line” that guides the user down the page, physically linking these stages together.

So I wanted it to build a narrative flow.

Principle 2: Create Depth

I wanted the page to feel alive, not “flat” or static.

I wanted two specific visual effects that usually require complex CSS:

I said it should look like the scrolling line travels through the card, hovering above the background but below the text.
When the user finally scrolls to the “Solution” section, I wanted it to glow or pulse. To create a feeling of relief after scrolling past “Obstacles”.

I described the feeling I wanted, and the AI took care of the code.

Principle 3: Polishing

The first version looked fine, but it had issues: the connecting line was covering text on mobile phones and animations were stuttering badly on Safari.

In the past, this would be a debugging nightmare. With Gemini 3, it was a simple conversation:

“The line covers text on mobile. Move it.”

“The animation stutters on Safari browser. Fix it.”

It instantly refactored the code for performance and responsiveness.

It’s Your Turn

So next time, try to articulate the experience.

Start with the Big Picture: Define the story (Struggle -> Solution).
Add the “Wow”: Ask for specific visual interactions (depth, glow, motion).
Refine: Don’t accept lag or bad mobile layouts. Tell the model to fix it.

In the following newsletters I will surely test Gemini 3 even more. Especially how it comes in handy in business, not just in coding. Although I didn’t code anything, just commanded. 😉

Talk soon,

Primož

PS: Have you tried Gemini 3 yet? Hit reply and let me know how it compares to Claude for your workflow.

Appendix: Similar instructions to those I used

Want to try this yourself? Here is the exact 6-step conversation I had with the model.

Step 1: The Big Picture

Goal: Turn a boring homepage into a story.

“I want to redesign my homepage to tell a story about my customer. Instead of just listing features, show their journey: first ‘The Struggle’, then ‘The Obstacles’, and finally ‘The Solution’. Can you create a layout where we scroll through these stages one by one, maybe with a connecting line that guides us down?”

Step 2: Fixing Mobile View

Goal: Make sure it works on phones.

“The scrolling line looks cool on my computer, but it’s blocking text on my phone. Can you detect when someone is on mobile and move that line to the side? It should still look good, just out of the way.”

Step 3: Cleaning Up & Copywriting

Goal: Organize the content better.

“Let’s organize this better. Can we make the top menu ‘sticky’ so it follows you as you scroll? Also, please move the ‘Hosting Platform’ card to a separate page called ‘Experiments’. For the main text, I want to change the message to focus on ‘Less Theory, More Execution’. Update the headlines to match that vibe.”

Step 4: The “Wow” Moment

Goal: Make the solution section shine.

“When the user finally scrolls down to the ‘Solution’ section, I want a big visual payoff. Can you make that specific section glow or pulse as it comes into view? It should feel like a relief after scrolling past the obstacles.”

Step 5: The Magic Card Effect

Goal: Add a cool 3D layering trick.

“I have a specific design idea for the middle card in the ‘Obstacles’ section. On big screens, I want the scrolling line to look like it’s passing through the card—floating above the background color but underneath the text. Can you make that happen?”

Step 6: Smooth Sailing

Goal: Fix laggy animations.

“I noticed the scrolling animation stutters a bit on Safari and iPhones. Can you optimize the code so it runs buttery smooth on all devices? Check for any performance issues with the animations.”