Modern Creator
Zinho Automates · YouTube

ChatGPT-6 Astra Is the Undisputed King of Website Design

A creator builds three full websites live to prove one point: every model can code a page now, but only naming the right animation technique gets you one with taste.

Posted
4 days ago
Duration
Format
Tutorial
educational
Views
45.7K
Part of the collectionThe GPT-6 Astra PlaybookEvery GPT-6 Astra breakdown, synthesized into one page.
Read the playbook
Big Idea

The argument in one line.

Every major AI model can code a landing page now, so the real edge is naming five specific animation techniques and feeding the model visual references instead of vague adjectives like 'premium.'

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • You use ChatGPT or another AI website builder and keep getting generic, templated-looking output despite writing what feels like a detailed prompt.
  • You want to add scroll-driven motion (parallax, rotation, cursor tracking, stacking cards) to a site without hiring a designer or motion developer.
  • You're about to launch a product page and want a repeatable way to pull award-winning references and translate them into a working build.
SKIP IF…
  • You want no-code drag-and-drop instructions, this is prompt engineering for an AI coding model, not a page-builder walkthrough.
  • You're looking for backend or functionality work, the entire video is front-end visual polish and scroll animation.
TL;DR

The full version, fast.

Every major model, ChatGPT, Gemini, Claude, can now code a landing page, so the differentiator is taste: does the site read the brand and design for it, or slap on a template. The video positions ChatGPT-6 Astra, paired with the Higgsfield plugin for images, video, and product shots, as the model that finally does this, then builds three sites (a cocktail brand, a drone brand, and a SaaS brand) to demonstrate five named animation techniques: layered parallax, scroll-trigger text reveal, scroll-driven rotation, cursor tracking, and stacking cards. The actionable throughline: name the technique instead of using adjectives, feed the model real reference sites instead of vague instructions, keep only one animation active at a time, and revise with a note instead of restarting the whole prompt.

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 →
Chapters

Where the time goes.

00:0001:38

01 · Cold open: the taste thesis

Frames the video's core claim, every major model can code a landing page now, so the real question is which one has taste, then teases three finished sites before naming ChatGPT-6 Astra and Higgsfield.

01:3802:39

02 · The setup

Installs the Higgsfield plugin inside ChatGPT so Astra can pull in AI-generated photos, video, textures, and product shots for the sites it designs.

02:3903:49

03 · The animation skills

Names the five animation techniques the rest of the video builds around: layered parallax, scroll-trigger text reveal, scroll-driven rotation, cursor tracking, and stacking cards.

03:4906:08

04 · Build #1: the cocktail brand (Pulp)

Prompts a single-page site for a four-flavor canned cocktail brand with six scroll-tied animations on one page: hero rotation, headline split, mascot cursor tracking, hover-to-cutaway can, and a flavor-morph section.

06:0806:50

05 · Deploy it

Pushes the finished Pulp site live to a real URL using a coding-agent deploy step instead of manually configuring hosting.

06:5008:14

06 · Give it inspiration, not instructions

Argues that vague adjectives like 'premium' don't work on a model, and lists four places to pull concrete visual references: Awwwards, Godly.design, 21st.dev, and Motion sites.

08:1409:25

07 · Build #2: the drone brand (Corvid)

Builds a hardware product site for a drone brand, deliberately sequencing footage first, then the object, then spec numbers, with an aerospace-instrumentation tone instead of a generic gradient hero.

09:2510:04

08 · Mobile preview fix

Catches a broken arrow button on mobile that wasn't visible on desktop, screenshots it, and has the model fix it in one revision pass, the verification loop the video says most people skip.

10:0411:01

09 · Build #3: the SaaS brand (Fathom)

Builds a cold, quiet, editorial SaaS site using the same technique menu as the Pulp build, proving the six-technique toolkit produces opposite tonal results depending on sequencing.

11:0112:02

10 · The four rules

Distills the whole video into four prompting rules: feed references not adjectives, don't stack unnecessary movement, name the technique you want, and revise with a note instead of restarting.

12:0212:40

11 · Outro

Recaps the three builds, points to the free Skool community for every prompt and the design-principles skill file, and closes with the standard subscribe and like ask.

Atomic Insights

Lines worth screenshotting.

  • Every major AI model can now code a landing page, so the real differentiator has shifted from 'can it build a site' to 'does it have taste.'
  • Telling a model to 'make it look premium' does almost nothing, because the model has no fixed, shared definition of premium to draw on.
  • Naming an exact animation technique, like 'scroll-driven rotation on the hero,' gets a precise result where a vague instruction gets nothing.
  • In scroll-driven rotation, an object's position is tied directly to scroll position rather than a timed animation, so scrolling back up reverses the spin.
  • Layered parallax moves a background, midground, and foreground at different scroll speeds so a static page reads as having real depth.
  • In scroll-trigger text reveal, the words for a headline don't exist on screen until the viewer's scroll reaches that point.
  • Cursor tracking reads as more convincing when a character's eyes move further than its head does, exaggerating the sense that it's watching the pointer.
  • Stacking cards keep each new section sliding over the last one instead of pushing it off screen, which reads as one continuous surface.
  • A single product page held six separate scroll interactions, rotation, headline split, hover cutaway, mascot eye tracking, flavor morph, while still feeling calm because only one animation moved at a time.
  • For a hardware product, the order information appears in matters: footage first, then the object, then the spec numbers, since specs presented first reads as backwards.
  • Four numbers appearing on screen at once reads as a table; the same four numbers fading in one at a time reads as calm, deliberate pacing.
  • The most effective reference move isn't copying a site, it's handing the model an actual award-winning site and asking it to explain why the layout and motion logic work.
  • A revision prompt that only names what feels off, without asking for a fresh page, keeps everything that already worked and changes only what's flagged.
  • Testing a build on mobile after it looks perfect on desktop caught a real layout bug that a screenshot and a follow-up prompt fixed in one pass.
  • The same six-technique toolkit produced a warm, maximal cocktail site and a cold, quiet SaaS site just by resequencing which technique leads.
Takeaway

Name the Technique, Don't Describe the Feeling

PROMPT DISCIPLINE

The gap between a templated AI site and a tasteful one isn't the model, it's whether you name concrete animation techniques and feed real references instead of vague adjectives.

03The animation skills
  • Naming an animation technique like 'scroll-driven rotation' gets a specific, controllable result; asking a model to 'make it nice' gets nothing usable.
  • Layered parallax fakes depth by moving background, midground, and foreground at different scroll speeds instead of relying on a flat, static image.
  • A cursor-tracking effect reads as more alive when the tracked element's eyes move further than its head does.
04Build #1: the cocktail brand (Pulp)
  • Six separate animations can live on one page and still feel calm as long as only one of them is moving at any given moment.
  • A hover-to-reveal effect, like a can going transparent to show the pour inside, does more storytelling work than a paragraph of copy would.
  • Tying rotation directly to scroll position, rather than a timed animation, lets a viewer reverse an effect just by scrolling back up.
05Deploy it
  • Getting a build from sitting on a local machine to a real, shareable URL can be handed to a coding agent as a single deploy step.
06Give it inspiration, not instructions
  • A word like 'premium' carries no fixed meaning to a model; a real reference site gives it something concrete to match instead.
  • Curated design-inspiration sources should be matched by category, don't pull cocktail-brand references when the product is industrial hardware.
  • The highest-leverage move isn't copying a reference site, it's asking the model to explain why the reference's layout and motion logic work before building anything.
07Build #2: the drone brand (Corvid)
  • For a physical product, the order information appears in matters: footage first, then the object, then the spec numbers; reversing that order reads like a spec sheet, not a story.
  • Four numbers appearing on screen at the same instant reads as a table; the same four numbers fading in one at a time reads as calm and deliberate.
  • A stated tone like 'aerospace instrumentation, not consumer tech' steers a build away from the default dark-hero-plus-gradient template most AI-generated sites fall back on.
08Mobile preview fix
  • A build that looks perfect on desktop can still break on mobile; always check it separately before calling it done.
  • A screenshot of the broken state plus a plain description of what's wrong is enough for a single revision pass to fix it.
09Build #3: the SaaS brand (Fathom)
  • The same six-technique toolkit produced a warm, maximal cocktail site and a cold, quiet SaaS site just by changing which technique leads and how it's sequenced.
  • A type-driven hero, letting the scale and weight of the text do the work, can replace the need for a photographic or illustrated background entirely.
10The four rules
  • Feed a model references, not adjectives, since it has no shared internal definition for words like 'clean' or 'premium.'
  • Add movement only where it earns its place; every animation in a genuinely calm design owns its own section instead of competing with the others.
  • A revision prompt should name what's off and ask for a fix, not a fresh page; restarting loses everything about the build that already worked.
Glossary

Terms worth knowing.

Layered parallax
A scroll effect where background, midground, and foreground images move at different speeds, creating a sense of depth instead of a flat page.
Scroll-trigger text reveal
Text that stays hidden until the viewer's scroll position reaches it, rather than appearing all at once on page load.
Scroll-driven rotation
An animation where an object's rotation is tied directly to the scroll bar's position instead of playing on a timer, so scrolling backward reverses it.
Cursor tracking
An interactive detail where an on-screen character or element visually follows the user's mouse pointer.
Stacking cards
A scroll pattern where each new page section slides over the previous one instead of pushing it off the page.
Higgsfield
A plugin that connects ChatGPT to third-party AI image and video models, used here to source product photos, textures, and footage for a site being built inside ChatGPT.
Resources

Things they pointed at.

Quotables

Lines you could clip.

00:00
ChatGPT-6 Astra just dropped and everyone is calling it the best model that's ever been released.
cold open hook lineTikTok hook↗ Tweet quote
00:24
Every single model out there can build websites now... the question is who builds one with some actual taste?
clean thesis statementIG reel cold open↗ Tweet quote
06:36
Give it inspiration, not instructions.
quotable rule, short and punchynewsletter pull-quote↗ Tweet quote
11:11
However good the model gets, a bad prompt can literally ruin everything.
sets up the four closing rulesTikTok hook↗ Tweet quote
11:26
Premium means pretty much nothing to a model.
sharp contrarian one-linerIG reel cold open↗ Tweet quote
The Script

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.

metaphoranalogy
Chat GPT, Asta just adopted and everyone is calling it the best model that's ever been released. but nobody's actually telling you what has actually changed. Basically, every single model out there can build websites now.
You have ChatGPT, you have Gemini, you have Claude. Now, they can all code a landing page. Now, that was never really the question.
The question is, who builds one with some actual taste? One that doesn't just look like every other AI website that's out there on the internet. Now, that's the thing that Asta has finally cracked.
It finally has some real taste. It doesn't just slap the same template on everything. It reads what a site is supposed to be and then it designs for it.
So a luxury brand gets space and restraint. A product launch gets some actual energy and motion. It knows the difference, the depth, the rhythm, where the ice should actually land.
You know, the important things, the stuff that used to need an actual designer. And on top of that, it QA's its own work, catching what's broken before you. you ever see it.
Now take a look at these three. Every single one of them looks like a professional designer created them. These are the kinds of sites that make you stop and just go, wait, how did they do that?
Now, in this video, I'm gonna be showing you how to actually use it, the prompting formula behind it, and where to steal your inspiration, and why this model just became the undisputed king of website design. Every single prompt is free, and it is inside our free school community. The link is down in the description below, but right now, let's get started, and let's hop over to the laptop.
Now, before we build a website, we need to connect ChatGPT to one tool, and that tool is Higgsfield. And that's basically because it gives GPT access to the top AI image and video models out there so that we can generate the best visuals for our website. Now, Aster is a brilliant designer, okay?
But it needs a source for actual visuals, like photos, videos, textures, product shots. Now, that's what Higgsfield gives it. So I'm gonna leave a link to Higgsfield down in the description below.
And the setup is very quick. all you're gonna do is just click on plugins on the top left bar then you're gonna search for higgs field and then you're gonna download the plugin then after that you're gonna authorize your higgs field account and just like that you are done so now i'm also going to be loading a skill file worth design principles that's baked in so layering spacing this thing and i'm going to be leaving that in the description as well in the free school community okay so now let's discuss the animation terms So you need to know five animation techniques because you can't ask for something that you can't name.
And these will help you build websites better than like 99 % of people. Because if you say something like make it nice, and then you'll basically get nothing. But if you say scroll driven rotation on the hero, hover cutaway on the product.
then you are going to get exactly that so first up is the layered parallax okay the background the mid ground and foreground all move at different speeds as you scroll so next is the scroll trigger text reveal now the words don't really exist until you reach them and then this one's scroll driven rotation the object isn't playing an animation your scroll position is turning it so scroll back up and then it turns the other way and now we have cursor tracking so the character's eyes is actually watching my mouse and its eyes move even further than its head does now lastly we have stacking cards so each section slides over the last one instead of pushing it off the screen and we are using every single one of that today Now, first up, we have build number one, and I'm gonna be going straight into the hardest thing that I could possibly think of.
So I'm gonna be doing a cocktail brand called Pulp. It's gonna be four flavors, one can, a white background, and I'm asking for six separate animations on one page, okay? So the prompt is going in right now.
Okay, now we're just gonna give it a few moments. Okay, and there it is. Okay, it's already looking super stunning, and let's just go through it slowly so we can make sure.
Now, yeah, as you can see, there's a lot of things that's happening here. But now watch what happens as I scroll, okay? There you can see it's rotating, okay?
And this isn't an animation that's playing on the trigger. It's literally tied to my scroll position. So I can scroll back up and then it turns the other way.
And this is where Higgs field really earns it, okay? Because the can has to hold up from every single angle. And as you can see, it's doing that.
I mean, if you keep scrolling, the headline splits. taste the up top pressure underneath okay and the foam literally grows into the gap between them as i scroll okay that's so cool and the text was never on the screen at once So that's a skill trigger reveal doing the work of a whole hero section.
And then we have this guy, the little pulp mascot here down in the corner. And yeah, his eyes that he follows my cursor. But this next one is the section that I actually built the whole page around, okay?
So hover the can. And then the aluminum goes transparent and you can see the pour inside, okay? The pulp, the juice, the ice, the whole bowl stacked up.
And it's basically like someone sliced the can open without even opening it. And then you can also see the flavor section, scroll and the can morphs and the color and label changes. And yeah, there's one scroll gesture, four products, six interactions on one page.
Okay, now here's the part that really matters about this, okay? Only one of them, is ever moving at a time.
That whole page is what agencies charge the most for because hand building any single one of these literally would have taken days without older methods.
and now that the website is sitting on our machine let's put it on the internet and i'm not opening the cell to do it i'm just adding codecs to deploy it and ask the runs of the commands itself okay now it's building the project and there's the url so let me open it up Okay, there we can see that's now live, a real server, a real link, and I can send this to anyone that I want to right now.
The rotation works, the cutaway works, the mascot tracking works, and on a phone or someone else's laptop, anywhere, this is now still going to work. So now, let's build a few more and in different niches so that you can really see what else Asta is really capable of.
Okay, now one quick note before we carry on, one thing I really need to mention, this is so important, okay? Always give it some inspiration, okay? Not instructions.
So Make It Look Premium basically gets you... a certain section of the way, because premium means nothing to the model, okay? It doesn't really understand what your definition of premium is.
If you're giving it an actual reference, then it will give you everything that it possibly can, because now it understands exactly what you mean. Now, this is where most people really get stuck, so here's where to actually look. First is awards, so award -winning sites.
sorted by category so you're not pulling cocktail inspiration for a hardware product then there's godly design it's the same idea plus also individual components that you could simply just grab separately so heroes footers ctas then there's also 21st .dev so it's a real code components that you can hand state your agent and lastly motion sites for background animation specifically but looking at these isn't the move, okay?
The real move here is handing Asta a real site and asking it to the verse engineer why it works. Not simply just copy it, but actually understand it. The layout system, the motion logic, where the distinct is.
now let's build a site for a drone okay it's a completely different job and want to really test this thing out now the order really matters here footage goes in first and then the body goes in second then specs go in last okay so show me what it sees then show me what it is then show me the numbers now most product sites do that backwards and then they open on a spec sheet now the prompt is going in the brand name the positioning and i'm naming the sequence explicitly okay and now just look at that website the hero is pure footage full bleed aerial no headline fighting it just the mark and scroll q and It's a real footage that proves the drone as a product is good.
And then you also have the specs arrive like one line at a time. Now four numbers fading in together would read as a table, but arriving separately, they actually start to read as calm. Now that is the same six pieces as the Pulp Sight, but it's just been resequenced.
Now that's the whole point. You are not learning six effects. You are simply just learning a menu.
But on top of that, we are not done, okay? Because here's the part that nobody shows you. On desktop...
this looked perfect on mobile it really doesn't so i screenshot the part where it doesn't look the best on mobile then i hand it straight back and then i tell it exactly what's wrong and then what does it do astellity fixes it now that's the verification loop and it's the step that everyone skips both builds so far i gave some real direction brand references i named the techniques now the last one is a software and a service brand so it looks a little bit different okay now we are over to build number three okay and the last one is for fathom so it's going to be a sass brand and it's a different problem again but he's field can even generate these kinds of brand assets okay so the prompt is going in and now i want you to take a look at that as you can see it's clean cold confident the type scale is doing all the work in the hero and just watch what happens as i scroll okay so the cards they stack the interaction is the pitch and it's showing you the
instead of just describing it. Now, it's the same workflow as the pulp site, and it's completely opposite results. One's warm and maximal, and this is sharp, and it's also quiet.
And I didn't change my process between them at all. Now that is three sites, three completely different jobs, and it's all completed in just one afternoon.
Okay, so now there are four rules that you need to know because however good a model gets, a bad prompt can literally ruin everything. So first is to feed the references, not adjectives. Premium means pretty much nothing to a model.
A gaudy design link means everything, okay? Now, second thing is to never add too many movements unless it's actually needed. The six interactions on the pulp site and it still felt calm because each one, owned its own section now number three is name the technique that you want scroll driven rotation gets you scroll driven rotation okay make it cool basically gets you a simple gradient now that's why i told you about the menu at the start okay now lastly is to give it a note okay don't restart if something feels just a little bit off that's basically a revision and not a refresh prompt so what you want to do is you want to direct it you don't necessarily want to gamble with it perfect So now we have three bolts and that is three completely different jobs.
One connection and making all of it run. And that is Higgs field linked state into Aster. Now the links are in the description below.
If you haven't checked them out yet. And also I want to mention that every single prompt from today's video, plus the skill file, all of it is inside our free school community and that is all for free. Okay.
The link is down below and please subscribe to the channel. Turn on this bell notification so that you never miss another upload and please give it a like because it really does help. the channel and also check out one of the videos popping up in the screen right now and also check out some of the other videos on the channel because i know you are going to love it and as always i'll catch you on the next one
The Hook

The bait, then the rug-pull.

Every model can code a landing page now, so Zinho Automates opens by reframing the fight: not who can build a site, but who builds one with actual taste. He answers with ChatGPT-6 Astra, then proves it by building three websites live on screen.

Frameworks

Named ideas worth stealing.

02:39list

Five Animation Techniques

  1. Layered parallax
  2. Scroll-trigger text reveal
  3. Scroll-driven rotation
  4. Cursor tracking
  5. Stacking cards

A named vocabulary for scroll-tied motion, the video's claim is you can't get a specific animation out of a model without naming it first.

Steal forany product or landing page prompt handed to a coding AI
07:04list

Four Places Worth Stealing From

  1. Awwwards
  2. Godly.design
  3. 21st.dev
  4. Motion sites

Curated reference sources for design and motion inspiration, matched by category so a hardware product doesn't get cocktail-brand references.

Steal forsourcing visual references before prompting a design AI
11:03list

Four Rules Before You Build

  1. Feed references, not adjectives
  2. Don't add movement unless it earns its place
  3. Name the technique you want
  4. Give it a note, don't restart

The prompting discipline that determines whether a build looks templated or intentional.

Steal forany AI website or design prompting workflow
CTA Breakdown

How they asked for the click.

VERBAL ASK
12:11link
every single prompt from today's video, plus the skill file, all of it is inside our free school community... please subscribe to the channel... turn on this bell notification... please give it a like

Soft CTA delivered twice, once near the intro promising free prompts in the Skool community, once at the outro combining the community plug with the standard subscribe, bell, and like ask.

Storyboard

Visual structure at a glance.

open
hookopen00:00
Pulp prompt
valuePulp prompt03:49
Pulp site live
valuePulp site live04:31
Corvid site
valueCorvid site08:17
Fathom site
valueFathom site10:24
CTA / community
ctaCTA / community12:02
Frame Gallery

Visual moments.

One-click upgrade to your Google

Get more breakdowns in your search results

Add Modern Creator as a preferred source and Google shows you more of our breakdowns in Search, Top Stories, and AI Overviews. It only changes what you see, and you can undo it in your Google settings anytime.

Add to Preferred SourcesOpens your Google source preferences with us pre-loaded. Tick the box and you're done.
Watch next

More from this channel + related breakdowns.

12:43
Zinho Automates · Tutorial

Claude Design 2.0 Just Became Unstoppable

A hands-on tour of Claude Design 2.0 — shared usage pool, live canvas editing, brand-locked design systems, and a two-way Claude Code handoff — proven by building a landing page, pitch deck, and database-wired dashboard for a fictional fragrance brand in one sitting.

July 1st