The argument in one line.
Gemini 3.5 Flash can generate professional-quality animated websites from a single reference image, but it requires iterative error-correction prompts to catch the layout bugs it inevitably introduces.
Read if. Skip if.
READ IF YOU ARE…
- A web designer or freelancer who wants to use AI to dramatically speed up client deliverables.
- A developer curious about how far Gemini 3.5 Flash can go with UI code generation from image references.
- Someone who already uses ChatGPT for design work and wants to extend the workflow to include video assets and full code generation.
SKIP IF…
- You need production-ready code — the output requires significant debugging and is better treated as a prototype starting point.
- You are not comfortable iterating back-and-forth with an AI model to fix layout regressions.
The full version, fast.
Gemini 3.5 Flash, when fed a reference screenshot, can generate an animated fintech landing page in minutes, but it consistently drops previously established elements when asked to add new sections. The real workflow is a three-tool chain: ChatGPT Image 2 generates the redesigned visual and hero asset, Magnific animates that asset into a seamless looping video, and Gemini codes the HTML. The video documents both the impressive capability and the babysitting tax you pay to get to a working result.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:37
01 · Hook
Shows finished animated website examples to establish the promise
00:37 – 01:26
02 · Find reference and redesign with ChatGPT Image 2
Screenshot a reference fintech site, pass to ChatGPT Image 2 to redesign it
01:26 – 02:47
03 · Generate and animate hero background with Magnific
Extract background image from ChatGPT, upload to Magnific Kling v2 with same start/end frame for looping animation
02:47 – 04:17
04 · Code the hero section in Gemini 3.5 Flash
Paste redesign image into Google AI Studio, prompt Gemini to build hero HTML without background placeholder
04:17 – 05:10
05 · Review first output and spot bugs
Result has animated currencies and orbit; compare to reference; identify width alignment bug
05:10 – 06:34
06 · Iteration 1: add video background, fix layout
Paste Magnific video URL, set 100vh, fix trust-badge strip width overflow
06:34 – 07:52
07 · Iteration 2: restore video, remove double orbit, check responsive
Video not rendering, orbit duplicated; iterative prompts fix both; confirms mobile responsive
07:52 – 09:03
08 · Generate remaining sections and fix overlap
Prompt generates full page sections; one section overlaps the previous; corrective prompt fixes it
09:03 – 09:57
09 · Iteration 3: video disappears again, restore it
Background video drops out again after section generation; one more corrective prompt restores it
09:57 – 10:31
10 · Conclusion
Gemini 3.5 Flash is capable but makes avoidable bugs; use it with active supervision
Lines worth screenshotting.
- AI code generators work best when given a visual reference image, not just a text description — feed them screenshots.
- Using the same image as both start frame and end frame in Kling v2 produces a seamless looping video from a single static asset.
- Gemini 3.5 Flash forgets previously established elements — like a video background — when you ask it to add new sections; you must re-state constraints each time.
- GPT Image 2 will flag fintech branding as potential third-party IP, but pushing back with ownership context unlocks the generation.
- Prompting Gemini to build just the hero section first, with a solid color background placeholder, and then swapping in the video asset separately avoids a class of layout bugs.
- Setting hero section height to 100vh ensures full-screen coverage across all screen sizes — prompt for it explicitly, models do not default to it.
- The gap between impressive demo and production-ready code is exactly the iterative prompting loop the video shows: each fix introduces a new regression.
- Three-tool AI web design chain: design AI for visual mockup, video AI for motion assets, code AI for implementation.
Three tools, one pipeline, and the bugs you will hit.
WHAT TO LEARN
Gemini 3.5 Flash can produce animated, multi-section landing pages from a single reference image, but it regresses on previously established elements every time you extend the page.
- Feed AI code generators a visual reference image rather than a text description alone — the model can match layout, color, and component structure far more precisely.
- Use the same static image as both start and end frame in a video generation model to produce a seamless looping background from a single asset, no video shoot required.
- Build the hero section first with a solid-color background, confirm it works, then swap in the animated asset — doing both at once multiplies the surface area for bugs.
- Each new section you prompt Gemini to add can silently drop constraints from earlier in the conversation; re-state the critical ones such as video source and section height each time.
- A layout regression is not a sign the tool failed — it is a signal to add one corrective prompt and continue; the iterative loop is the actual workflow, not an exception to it.
- ChatGPT Image 2 will flag fintech or branded imagery as potential third-party content; stating ownership unlocks the generation without needing a different prompt strategy.
Terms worth knowing.
- Kling v2
- A video generation model available through Magnific that animates a static image by treating it as both the starting and ending frame, producing a seamless loop.
- Magnific
- An AI creative platform (formerly Freepik AI) offering image upscaling, generation, and video animation tools including Kling-based video generation.
- Google AI Studio
- Google's browser-based interface for accessing and testing Gemini models, including Gemini 3.5 Flash, with support for multi-modal inputs like images.
- 100vh
- A CSS unit meaning 100% of the viewport height — ensures a section fills the full visible screen area regardless of device screen size.
- Hero section
- The top-of-page visual area that visitors see first, typically containing the headline, call-to-action, and primary brand imagery.
Things they pointed at.
Lines you could clip.
10:17
“Gemini 3.5 Flash is pretty good in design, but it does some dumb mistakes that could have been avoided altogether.”
00:30
“All of this can be created with Gemini 3.5 Flash.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
00:01Google just released its biggest update ever, and it is Gemini 3.5 Flash. And this is the level of websites that you can create with Gemini 3.5 Flash.
00:12As you see, all of these animations, this is a section, this cube right here, and this section, and this color animation, and also this sleek website as you see.
00:28All of this can be created with Gemini 3.5 Flash. In this tutorial, I'll be showing you how can you create amazing websites like these using Gemini. Let's get into it.
00:38So first things first, we need to find we need to find some inspiration because AI works best by getting references. So I'm just going to take a screenshot of this reference, and I'm going to pass it to Chad GPT to redesign it. So I'm just going to pass it to chat g p t and write, can you redesign this website and make it look better?
01:03And it's going to redesign this website because GPT image two is the best model for redesigning and doing image changes. So I'll be back once it finishes the changes. Okay.
01:14So it freaked out a little bit and said, we are sorry, but the image created my violet, our guy our our guardrails. And I said, bro, it's my own. And then we got this design, which looks pretty amazing.
01:27And what we're going to do right now is we need GPT to give us the background image, and we are going to animate it so that it looks pretty cool. So I I can just type in, can you please give me the background for the hero section?
01:46And I'm gonna make it the background only, the background only for the hero section. So it should give us the image behind right here. So I'll be waiting for it to give us this image.
01:56Okay. So it gave us two options. I think I'm gonna go with this.
02:00And what I'm gonna do now, I'm gonna animate this. I'm gonna animate this image.
02:05So what I'm gonna do is go to magnific. I was just creating some background. So we're gonna go to magnific, which was called free pick before.
02:16And we're what we're gonna do is that we're going to choose c dance two point o model, which is this. And we're going to add the image as the start image and also add it as the end image because we want it looping.
02:30And then we're going to type in the prompt and you made this and make it noticeable. And what we're going to do now is that we're going to generate. I'm just waiting for it to upload and then we will generate.
02:41Okay. Let's generate. So it's going to animate the background for us.
02:45And once it finish, I will come back. Okay. So I'm back.
02:49I'm just going to do some stuff until it finished, and I'm just gonna get the design that we got right here.
02:57Uh, I'm gonna add it to my computer, and then I'm going to go to Gemini and make sure that you choose Gemini 3.5 flash as your default. And then we're go I'm gonna paste this image, and I'm going to tell it, can you create this hero section text and content only, or can you create this hero section without a background image?
03:28You can keep it black for now, or let's say, can keep it as a color for now and create every part of the hero section such that it's identical to the image.
03:49Okay? I'm just gonna build it. And so I'm waiting for two things right now.
03:55I'm waiting for Google to finish this design, the for the hero section, and I'm waiting for the video to generate. Once they finish, I'll come back and show you the results.
04:05Okay. So it came up with the results and the results are insane actually. Like, it doesn't imagine that it will come up with animations for this.
04:13Like, it has an orbit like this and it has the these these currencies moving, which looks pretty good, actually.
04:22But I think, um, let's try it in full screen. Maybe we can spot some mistakes.
04:28Yeah. So basically here, it's the width of of this section is larger than this section, which does not look that good.
04:36And maybe let me actually show you the original design. Like, this is the original design, and it looks pretty much like it.
04:47Looks pretty much like this. And, um, with just maybe some minor some minor, uh, differences, but that's pretty cool.
04:57And, um, so what I'm gonna do now, I'm going to replace the hero background with the video that we got.
05:06So let's see the video that we got. We see this video. This video is looking amazing.
05:12And, um, I'm just going to copy the URL, click on share, copy to clipboard, and then we're going to write in. One, can you change the the background for the hero section to be that video?
05:33Number two, can you make the hero section 100 v h, which means that it should be the same height of the screen of the user and such so that it looks better.
05:49The width of this thing these these things right here, I'm just gonna copy them off.
06:00Section is larger than the section above it.
06:08And let's see what that comes up with.
06:15I'm actually not sure if it's going to look good on the 100 v h, but let's try to do it like this and see what it comes up with. I'm just gonna pause until until we we fin the Gemini 3.5 flash finish, and then we're gonna come back.
06:33Thank you. Okay. So, basically, I think it didn't add my video or it could have added it, but there is something above it.
06:41And and, actually, this section right here is more than this section on bigger screens, which is what I wanted.
06:51But I think I need to reiterate again over the orbit thing. I don't want it, and I'm going to see what's the problem with this.
06:59Let's just prompt it prompt our rate through it. I still don't see the looping video, and I still see an orbit over the animated orbit that you created.
07:20Okay? And, yeah, we can just do this, and let's see what it comes up with.
07:31Okay. So I think it it yeah.
07:36We see our video and our animations right here. You see? This looks pretty cool as you see.
07:45Right now, what we can do is actually, uh, I just wanna make sure that it's responsive, so I'm just going to click on mobile. Yes.
07:53It's responsive. And what we can do now, uh, to test out the the power of Gemini 3.5 flash is ask it to generate the rest of the sections.
08:07Can you please generate the rest the sections?
08:15I'm going to show you how beautiful they are gonna look. So I'm just going to wait for it and come back to you.
08:23Okay. So it generated the rest of the sections. So let's see how does it look.
08:30Oh, disappointing me. But the rest of the sections looks pretty good.
08:36The rest of the sections look pretty good. So what we're gonna do is we can just take this and we're going to say this section is overlapping with the section before before it.
08:52It. Okay? And we're going to wait and see how it fixes this.
08:59Okay? So I'm just gonna leave it for now and come back. So it did finish.
09:06Let's see.
09:09Oh my god. It removed the background video for some reason, but the rest of the sections look pretty cool.
09:17But I can just say, I cannot see the video in the hero section anymore.
09:31Let's say the looping video in the hero section anymore. And let's see what does it come up with.
09:42Okay. So let's see the fix. Okay.
09:46So the video is back again, and we we see these items and particles right here. So and we can see the rest of the sections.
09:56They look cool. So yeah.
10:00And that's it for today. Uh, I hope you really enjoyed the videos, and I will be posting more tutorials about AI web design.
10:08And all in all, Gemini 3.5 Flash is pretty good in design, but it does some dumb mistakes that could have been avoided altogether.
10:18So if you wanna use Gemini 3.5 flash, make sure you use it properly and make sure that you are aware of any small bugs that it might cause in the middle. Thank you so much for watching.
The Hook
The bait, then the rug-pull.
The claim lands in the first second: a brand new AI model just rewrote the economics of web design. Then the screen fills with animated fintech landing pages — floating currencies, orbital rings, looping video backgrounds — and the hook earns its right to exist.
Named ideas worth stealing.
00:37list
Three-Tool AI Web Design Chain
- ChatGPT Image 2 — visual redesign and asset generation
- Magnific / Kling v2 — static image to animated looping video
- Gemini 3.5 Flash — HTML/CSS/JS code from image reference
A sequential workflow where each tool handles a distinct layer: aesthetics, motion, and code.
Steal forAny client web design project where speed matters more than pixel-perfect output from scratch
02:47concept
Same-Frame Looping Trick
Use the same static image as both the start frame and end frame in Kling v2 to get a seamlessly looping animated background from a single asset.
Steal forAny hero section that needs motion without full video production
How they asked for the click.
VERBAL ASK
10:04next-video
“I will be posting more tutorials about AI web design.”
Verbal only, no on-screen card or link shown. Low friction but also low conversion surface.
MENTIONED ON CAMERA
Visual structure at a glance.
