Modern Creator
Bart Slodyczka · YouTube

Build a $10K Website With GPT Astra (No Code, Full Tutorial)

One long Codex prompt and Higgsfield turn a made-up outdoor clothing brand into a cinematic, scroll-driven website in fifteen minutes.

Posted
5 days ago
Duration
Format
Tutorial
educational
Views
161.8K
2.3K likes
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.

One long, reusable Codex prompt paired with Higgsfield's image and video generation can take a website from blank brand to a cinematic, scroll-driven desktop and mobile build without writing code.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • A solo builder or small agency that wants to pitch premium-feeling websites without hiring a designer or videographer.
  • Someone comfortable pasting a long, structured prompt into an AI coding tool and iterating through follow-up requests.
  • A creator who already has access to an AI coding agent and is willing to add a Higgsfield subscription for image and video generation.
SKIP IF…
  • You need a production e-commerce backend (payments, inventory, real checkout) — this build is a styled front-end demo, not a working store.
  • You want a completely hands-off result — the process still requires you to art-direct scenes, judge outputs, and request revisions repeatedly.
TL;DR

The full version, fast.

The video walks through building a full marketing website with GPT Astra (Codex) and Higgsfield in six steps: pick your tools, define your brand, design a five-scene visual story for your product, let the AI generate images and video for that story, build the site around those assets, then refine copy, add products, and rebuild a dedicated mobile version. The core mechanism is a long, reusable prompt (posted free on GitHub) that turns Codex into an agent capable of calling Higgsfield's image and video models directly, using one generated image as the seed for its own video, and later using that video as a motion reference for revisions. The practical takeaway: treat the hero visual as a five-beat camera journey, not a single image, and expect several rounds of plain-language revision.

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:41

01 · $10K AI Website Examples

Three finished demo sites (smoothie brand, watch store, pizza shop) are shown desktop and mobile, each scripted around one visual story rather than a generic feature list.

01:4102:15

02 · The 6-Step Website Workflow

The process is broken into six named steps: tools, brand, visual story, generate assets, build/refine the site, mobile experience.

02:1503:34

03 · Setting Up GPT Astra & Higgsfield

Setup: ChatGPT desktop app in Codex mode, GPT-6 Astra on the Light reasoning tier, and a Higgsfield account connected as an integration.

03:3404:32

04 · The AI Website Builder Prompt

The free GitHub-hosted prompt is introduced: an autonomous 'skill' that interviews you on brand, logo, and inspiration before building.

04:3205:59

05 · Defining Your Brand & Visual Story

A fictional outdoor clothing brand and a five-scene rain-jacket visual story (shell, zip, fabric, raindrop, mountain pull-back) are dictated in one paragraph.

05:5906:44

06 · Generating AI Images & Video

Higgsfield generates the jacket keyframe image (Nano Banana), which then seeds a Seedance 2.5 video generation.

06:4408:28

07 · Building the Website

The VEYRA site is assembled section by section as the logo, hero video, and copy finish generating in the background.

08:2809:20

08 · Improving the Visual Story

The first hero video is judged too static; a plain-language revision request (unzip motion, more active camera) is used, with the old video as a motion reference for the new one.

09:2013:12

09 · Refining the Design & Adding Products

Pinterest boards are screenshotted into the chat for style fusion, and a product line (shoes, pants, cap, t-shirt) is generated and added as a shoppable collection page.

13:1214:19

10 · Optimizing the Website for Mobile

The site is checked against an iPhone 15 Pro device frame and found too cramped, prompting a second mobile-specific prompt.

14:1915:22

11 · Final Mobile Website Walkthrough

A dedicated portrait-orientation build ships: its own hero video framing, bigger tap targets, and a fixed menu, then a sign-off CTA.

Atomic Insights

Lines worth screenshotting.

  • A single Codex prompt can carry a website through brand definition, visual storytelling, asset generation, and full build in one continuous session.
  • Seedance 2.5 can take a previous AI-generated video as a literal motion reference for the next revision, correcting movement without re-briefing the whole shot from scratch.
  • Nano Banana costs fewer credits than GPT Image while producing comparable keyframe quality, making it the cheaper default for AI website hero images.
  • Treating a product page as a five-shot camera journey (object alone, macro detail, human context, payoff, pull-back) gives an AI video model enough structure to generate a coherent scroll-triggered hero.
  • Pinterest boards of three or four competitor sites, dropped directly into the chat, function as a style reference the AI can fuse into a new design rather than copy outright.
  • A single AI-generated model image can double as the starting frame for a video generation, so one asset produces both a static hero image and its own motion sequence.
  • The same prompt skill that builds the desktop site can be re-run with a second, mobile-specific prompt to regenerate a dedicated portrait-orientation experience rather than just reflowing the desktop layout.
  • Uploading rough personal product photos into the chat lets the AI use them as reference frames to relight and clean up, instead of requiring studio-quality source images.
  • The workflow deliberately starts on a lower reasoning tier because the creator found it produced results as good as the higher tier once the prompt itself was refined.
  • A long, autonomous 'skill' prompt can build an entire fictional brand, including logo, name, and visual story, from a single one-paragraph creative brief with no real product to reference.
Takeaway

The Visual Story Beats The Website Every Time

VISUAL STORY METHOD

The site's design didn't come from a template or a feature list, it came from scripting one continuous camera-move story for the product and then generating the site around that story.

01$10K AI Website Examples
  • Showing three finished, polished demo sites first sets a concrete design bar before any actual building starts.
  • Each demo site was scripted around one visual story, a product transforming into use, rather than a generic feature list.
02The 6-Step Website Workflow
  • Breaking site-building into six named steps gives a non-technical builder a checklist instead of an open-ended AI conversation.
  • Visual story is treated as its own dedicated step, happening before the site is built, not as an afterthought.
03Setting Up GPT Astra & Higgsfield
  • The stack pairs an AI coding agent for the site with a separate tool for image and video generation, connected through an integration.
  • A lower reasoning tier was chosen deliberately after testing showed it matched the higher tier's output once the prompt itself was refined.
04The AI Website Builder Prompt
  • The entire method is packaged as one long, reusable prompt file, posted publicly, so it can be re-run for a different brand from scratch.
  • The prompt is structured as an autonomous skill that interviews you for brand basics, then keeps going on its own toward a finished site.
05Defining Your Brand & Visual Story
  • Even a brand invented on the spot with zero real assets was enough input, because the visual story description drives the output, not brand facts.
  • The visual story was described as one continuous camera move across five beats rather than a list of separate, disconnected shots.
06Generating AI Images & Video
  • One still image becomes the seed for the video generation step, so a single generated asset produces two finished deliverables.
  • A cheaper image model was picked over a pricier one specifically because it produced comparable quality for fewer generation credits.
07Building the Website
  • The site is assembled section by section as assets finish, so building and asset generation happen in parallel, not in sequence.
  • Longer video generations take several minutes, so the workflow expects you to keep directing other work while a render is in progress.
08Improving the Visual Story
  • A hero video judged too static was fixed with a plain-language revision request, not a from-scratch regenerate.
  • The revision model reused the original generated video as its own motion reference, refining movement instead of resetting it.
09Refining the Design & Adding Products
  • Screenshotted competitor sites, dropped straight into the chat, were used as a style-fusion reference for sections the builder didn't know how to design himself.
  • Rough, low-quality product photos can be uploaded and touched up by the same pipeline instead of requiring a real product photoshoot.
10Optimizing the Website for Mobile
  • Mobile wasn't a responsive reflow of the desktop layout, it was rebuilt from a second, mobile-specific prompt with its own hero video framing.
  • The mobile build was checked against a specific device frame in the browser rather than just shrinking the window.
11Final Mobile Website Walkthrough
  • The finished mobile experience intentionally differs from desktop, different hero framing, bigger tap targets, rather than being a pixel-identical shrink.
  • Small consistency details, like matching an accent color across a product photo, a button, and the logo, were flagged as the polish that makes an AI-built site look intentional.
Glossary

Terms worth knowing.

GPT Astra
A reasoning tier inside ChatGPT's Codex coding agent, used here to plan the brand, generate assets via Higgsfield, and write the actual website code from one long prompt.
Codex
OpenAI's AI coding agent interface, used in this video as the environment where the long build-prompt is run and the site's code gets written.
Higgsfield
A separate AI creative platform for generating images and video, connected to Codex as an integration so the coding agent can request new visual assets directly.
Seedance 2.5
The video generation model used inside Higgsfield to turn a still keyframe image into a short cinematic clip for the site's hero section.
Nano Banana
An image generation model used for keyframe stills, chosen here over GPT Image specifically because it costs fewer generation credits for similar quality.
Scroll scrub effect
A web design technique where a generated video is split into frames that advance one by one as the visitor scrolls, making the video feel driven by scroll position instead of playing on its own.
Visual story
A five-beat camera-move concept (the product alone, close-up detail, use in context, payoff, pull-back) written before any building starts, used to direct what the AI generates and how the site is structured around it.
Resources

Things they pointed at.

02:10toolChatGPT desktop app (Codex mode)
02:30toolGPT-6 Astra (Light tier)
03:02toolSeedance 2.5
06:14toolNano Banana
09:58toolPinterest
Quotables

Lines you could clip.

00:58
You're walking in to buy a watch and you want to leave with it on your wrist.
compact analogy for what a hero video should be sellingTikTok hook↗ Tweet quote
07:05
I tried to imagine myself, what would I want out of the experience of visiting this website?
one-line design philosophy, usable outside the AI-tools contextnewsletter pull-quote↗ Tweet quote
11:46
I don't even know this is possible, to be honest.
genuine on-camera reaction to the video-model using a prior clip as motion referenceIG 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.

analogystory
For the last few days, I've been building a prompt that lets GPT Astra build websites like these. On the left -hand side, this is what it looks like on your computer. And the right -hand side, this is what it looks like on your mobile phone.
So the desktop view first, we see the berries drop, some strawberries, raspberries, and they get mixed up into a healthy smoothie. As you scroll through, the website looks fresh. The design looks very nice as well.
The mobile view has to be a little bit different because it's not horizontal -based view now. It's like a vertical view. So same thing, the berries goes into this beautiful shade.
And the website looks the same across both the desktop and the mobile view, but we have some different elements for mobile view because it's optimized for the smaller screens. Our next demo is this luxurious watch store. As we scroll through the watch expands into the different components, we zoom in really close.
And as we start zooming out, we see the watch and it's on your hand. And this is something that I wanna speak about in this video. This is a visual story of your product and that looks amazing as well.
It's a visual story of your product, which means as you walk into the store or like the purpose of you visiting this. places because you want to leave with something. So here you're walking in to buy a watch and you want to leave with it on your wrist.
So just an interesting way to think about how to build your website and get that story across. And our final example is this very tasty pizza store. Can you guess the visual story?
So we throw the dough into the air and the pizza gets made, it gets cooked, and then finally drops into a box ready for you to take home. And for this design, I actually found some inspiration online and I think it does look really, really cool. And for the mobile view, we have the same kind of visual story.
The dough goes into the air, it gets made, it gets cooked and lands in that pizza box ready for you to take home. In this video, I'm going to give you the prompts that I used as well as walk you through the entire process start to finish so you can build a website like this for yourself. I'll break this video down into six simple steps.
For step one, we'll start with the tools that we need to get the job done. For step two, we'll learn about your brand. For step three, I'll show you how to create your own visual story that represents your product or your service.
In step four, GPT Astra builds out the entire site for us, kind of putting all those things together. In step five, I'll show you how to refine your website. So how to fix your copy or look for additional inspirations.
You can actually build out the rest of your website. And then finally, in step six, once we're happy with everything, I'll show you how to build out your website. into a mobile experience.
So if you open up your phone, everything looks good as well. All right, let's start with step one. So for our setup today, I wanna be using the ChatGPT desktop app.
I'll be inside the codex mode. I've got a blank project folder created and I'll be using GPT -6 Astra. And actually I'm gonna bring us down to light mode.
When I first started this process, I was using high, but the more that I refined my prompts, I actually found that I can get away with light and still have really good results. The next thing we'll need are the prompts from this GitHub repo. These are the prompts that I made custom for ChatGPT 6 Astra.
This first prompt is going to help us build out the entire site. It's going to help us understand our brand. It's going to help us ideate our visual story.
And then finally, it's going to build out the entire site. Once we're happy with how the website looks on a desktop, we're then able to call the second prompt, which is the mobile refinement. This is going to convert the desktop view down to a mobile view that's been optimized for that smaller screen.
Then finally, in order for us to create that visual story, we'll be using Cdense 2 .5 inside Hicksfield. Hey guys, just want to take a couple of seconds and say if you're enjoying this process, I'd appreciate if you can like the video or subscribe to my channel or drop a comment below. Thank you.
So the first thing you need to do is create a Higgs field account. I'm going to leave my referral link in the first comment below. I'd appreciate if you could use it.
After you've created your account, go across to plugins, go to the search bar and let's search for Higgs field. I've already authenticated mine, but you'll see a little plus icon over here. Complete the signup process and then come back into chat GPT and let's go back into a new chat.
So at this stage, we're ready to start building our website. So let's go ahead and get the first prompt. I'm going to copy the entire prompt.
Now quick note here is that the prompts can be pretty long. So if you do want to conserve your tokens, maybe you want to optimize the prompt before you use it. This is still early days for me using it with GPT.
So I think over time, I will also optimize it as well. And I'm just gonna paste it into here. Now this prompt is structured like a very autonomous skill.
So it's gonna get your GPT to take you through the process of learning about your business or your brand, getting your logo, getting your website URL. It's gonna ask you for inspiration of different shapes or colors or elements that you wanna include. Maybe you wanna give different URLs of competitors to draw inspiration from as well.
It's then going to really focus on getting your visual story. It's going to use the Higgs field MCP to actually generate all the different assets that it needs. And then finally, it'll create that website and then work with you until you're happy with the final product.
Now, on the other hand, it doesn't have to be so rigid. It can actually create things from scratch with very little guidance. And that's exactly what we're going to be doing today.
Please take this skill and build a website for my outdoor clothing brand. I don't actually have a clothing brand, so I don't have like a name or a logo or anything. So you have to create all that by yourself.
And I want the visual story to be about a weatherproof rain jacket. At the start, we just see the rain jacket. But as we start zooming in, we start seeing the fibers of the rain jacket, the zippers, the different parts of it.
And eventually we start seeing like rain pebbles land on the jacket. And we keep zooming in, we keep zooming in until eventually it gets a little bit blurry. And then as we start...
zooming out we then see the rain jacket but it's actually being worn by a hiker who's atop a really high mountain and it's a beautiful view all around him and then it kind of zooms out and yeah we just end with that frame so let's see how well gbt astralite is able to take my fictional my fictional brand and actually build out that visual story as well And this is one of the first things that we see.
We actually get the layout. This is a massive bunch of scenes over here. Maybe I was a little bit too descriptive.
But the main thing that we want to focus on for when we're starting to build a website is actually get that visual story component down pat. So over here, we start off with a single orange jacket suspended against a dark and misty background. We then start moving the camera towards a zipper, the seams, and a tightly woven fibers.
Then it starts to rain. The droplets go into the jacket. The weave fills the seam, slips softly out of focus.
And as we go back into focus and start zooming out, we see that hiker wearing the jacket on top of a beautiful mountain as well. So this is going to be pretty complex. And let's see.
So we're already starting to work with the Higgs field MCP. So the first thing we're doing now is just generating that start scene. So I think it's just going to be the jacket suspended kind of in midair.
And the awesome thing is that GPT understands all the scenes that it has to create. So it can dynamically create that first. starting frame using an image generation model here so i actually should have chosen gpt image too but also nano banana is a little bit cheaper on credits and it also gives us really good results so There we go.
That's the very first scene. That's a pretty cool jacket as well. And at the same time, we're also able to get the Higgs field MCP and actually use this image as a starting frame for a video in Seedance 2 .5.
And that video is later on what we get. We kind of split it up into the scroll scrub effect where each frame is embedded and it kind of moves through as you scroll on the website. So it looks like we created that first part of the website.
We have the Veyra brand over here. I'm not actually able to scroll or anything yet. And this is exactly what happens.
We build that first section of the website. And I think in the background, we'll start working on the logo and then next the video. And we'll start embedding the website piece by piece as well.
There we go. Generating the video as well now. Now, this video generation process, especially for longer clips, can take a couple of minutes.
So you just have to be a little bit patient. Now, one of the things that I like about this process is that like for those first three websites that I showed you at the start of this video, I just had a bit of fun. I kind of sat back in my chair and I just thought about a visual story that I thought would like look cool.
I tried to imagine myself like what would I want out of the experience of visiting this website? For example, the pizza, I want like a pizza box with a steaming pizza inside it. And the same thing here, like if I buy a jacket, like what's that final scene that I want?
And it's like to wear the jacket, to be up on a beautiful mountain, like breathing the fresh crisp air. If it's raining, then it's totally fine as well. Like I'm completely cool.
And that's the kind of scene that I wanted to recreate here. It looks like the video has been generated. Let's give it a play.
So we have the jacket. We're zooming into the zipper. we then zoom into the fabric we have the raindrops we zoom into one of the droplets and looks like we've lost a bit of focus and as we zoom out we have the person standing on top of the mountain and now let's actually see how that transfers to the site so i'm just scrolling through we're zooming in into the fabric into the raindrop and zoom out we see the person standing there as well and the site in general is still pretty basic so we need to do some work here to fill it up with maybe like different products but there was probably a little bit more that i want to do here i mean i like it it's in my opinion it's a very soft kind of visual effect i guess i did like the the three effects we had to start with the pizza the watch and the the smoothie i want to give a bit more action into the camera as well hey can you take the scene that we have and i want to make two changes when we're zooming into the jacket i actually want to have the jacket kind of like unzip and move around a little bit and then the camera has a bit more like active motion we zoom in we go into the textile and the fabric and maybe we actually see the fabric itself like a cross stitching as if it's like really thick strands because we're zoomed in so much and then as we start zooming out we see the person i want him to actually take his last few steps
and not just be standing there statically but i'm going to take the last few steps and then finally take the last step and kind of then stand there and admire the view so there we go we've got a bit more creative direction in here revise the film so the jacket unzips shifts as the camera moves into an extreme close -up of thick woven strands on the pullback the hike will take his last few steps awesome so while we wait for that video to be generated which i think is already starting over here 24 seconds now a little bit longer i want to spend some time filling out the rest of this website And I don't really know myself exactly how it should look.
So I want to get some inspiration from other really awesome websites. And I also want to generate some photos of different products that I want to put onto here as well. So I'm going to be using the Higgsfield MCP for that.
But if you do have your own products and you have photos, even if they're not the sharpest, I actually found that you can just upload them into the conversation. And then Astra can actually use your images as like reference frames inside Higgsfield to touch them up, improve the lighting, make them a little bit clearer, whatever has to be done to make them look really good on your website as well.
So a great place that I like to go to for inspiration of like really nice looking websites. One great place actually is Pinterest. And if I just open up this, this is that pizza website that we created before.
So just bringing our pizza website here, you can see this hero section. We have a very similar hero section for us as well. We have the button and then the transparent button just like here, the feature section, the pizza selection.
We also have that here, features and pizza selection. And we have that same part here as well. So you can see going through this website, we drew some inspiration from here.
So I'm just going to use Pinterest again to draw some inspiration for an outdoor clothing website. And let's just open up a couple of these. I like how this is pretty fresh.
Just going to take a screenshot of this. Let's see what else we're working with. Gear for every summit.
Yeah, I like that as well. Going to get a screenshot of this. And is there anything else?
and maybe yeah i like that as well so i think from these three we can get some some kind of theme for ourselves like a fusion of all the three just gonna drop these three into the chat Hey, I've got some inspiration for the rest of the website that I want to make. And I want to list some additional products.
For now, I want to start with a pair of hiking shoes, a pair of like these like canvas weatherproof pants, and also maybe like a hat and a t shirt. So can you generate some nice similar style clothes, list them, follow this kind of design from these three websites that I'm giving you but fuse them into our own unique design as well, please.
Let's see how we go with that. Okay, so the second video has been created. Let's see if it's any different.
So what are we doing here? We're zooming in.
Okay, we see the fabrics as well.
So I didn't even know this was possible because that video was pretty... shit to be honest but the revised film was finished i'm checking its motion while the product image is finished and i'm going to connect both into the existing preview but the first revision has magnified woven woven strands but it kept too much of the original static jacket and hiker motion i'm making a targeted correction without the old video as a motion reference so i think it just gave the original video as a motion reference for generating the next one it was able to review it which is i don't even know this is possible to be honest and it's going to make a revised second version that hopefully is going to be better because that previous one wasn't that much better so looks like the product images are ready and we can view the collection so i'm just gonna go into the site and scroll down good gear for the horizons all equipment shoes pants shirt we can click on the shirt as well and see some information about it the pants as well and there's a filter work apparel accessories we have another hero section the best part is being outside or being out there that's nice less between you and the outside
So it's getting better and better. Let's go experience again. And it brings us to the very top.
I want to skip story, dude. Just brings us. Yeah, nice.
So nice little additions that we're getting from chat GPT, actually. This is such a great model I just designed. It's very intuitive.
All right, it looks like the corrected film is ready. And it looks like it's been embedded to the website as well. So we unzip.
We have the fibers, the raindrop. We zoom in all the way. And now we have the person standing at the very top.
Yeah, and that little look to the right is very nice as well. So now at this stage, I'm happy with where the website's at and I want to focus on the mobile view. So we can just look at the device toolbar.
We can just pop down here and go to iPhone 15 Pro and let's scroll through. So it actually transfers pretty well. This is the like basically like a vertical, vertical frame, vertical image.
So I guess we've just like ultra zoomed into the center and that center seems to be the focal point, which is pretty cool. But we still are missing like that hamburger menu to be able to like click. Because just clicking that button takes us to the section of the website where the products are listed.
And here, I think things are just a little bit too small for mobile view. That's not really going to work for me. But that's no problem at all because if we come back to the GitHub page, we have the mobile refinement skill.
So I'm just going to copy that, paste it into here. Hey, that looks awesome. Can you now also get this mobile ready as well?
Thank you very much. And at this stage, what we're most likely going to get is this initial scene that we see with the hiker. That's most likely going to be reproduced as a separate clip specifically for this viewport.
So like the vertical viewing. But yeah, we'll see what Astra decides. All right, so it looks like the video was created.
So we have a custom sized one for the mobile view. Let's check it out. So we're scrolling through.
So we have a zip, but actually zips back up. So it looks like, yeah, that's a little bit different. We go in, we have the raindrop, and now we have the person from the front, but still in the beautiful mountains.
So I guess we just need to make sure that the consistency is there between the desktop view and a mobile view, or maybe we're okay with this because it's like a different experience. Going through the website, the buttons are now a little bit bigger across the width of the screen. That's pretty cool.
Can we still click this and see? Yeah, that's awesome. And then going through.
And actually, one thing I noticed is this orange on the person of the jacket, the V is orange and also this is orange. So that does look nice. It's like a nice consistent style between the clothing, the buttons and the actual brand icon of the logo.
That is pretty cool. And there we go. We were able to complete the process.
We have the desktop view and then the specialized mobile phone view for our website as well. I hope you guys enjoyed this video. And if you did, I appreciate if you could like and subscribe to my channel.
Thank you and I'll see you in the next one.
The Hook

The bait, then the rug-pull.

The video opens with three finished demo sites, a smoothie brand, a watch store, a pizza shop, each built around one cinematic visual story, before walking through the exact prompt and tool combination used to build a fourth one live: an outdoor clothing brand invented on the spot.

Frameworks

Named ideas worth stealing.

01:41list

The 6-Step Website Workflow

  1. The tools
  2. Your brand
  3. Your visual story
  4. Build the website
  5. Refine the details
  6. The mobile experience

The whole build is scoped as six sequential steps before any prompting starts, turning an open-ended AI conversation into a checklist.

Steal forany AI-assisted website or landing page build
05:28concept

The Visual Story Method

  1. Establish the product alone
  2. Push into a macro detail
  3. Introduce the human/use-in-context
  4. Payoff moment
  5. Pull back to reveal the full scene

A five-beat continuous camera-move description, written in plain language before any generation happens, that becomes the brief for both the hero image and the hero video.

Steal forlanding page hero videos, VSL cold opens, product launch pages
CTA Breakdown

How they asked for the click.

VERBAL ASK
15:15subscribe
I hope you guys enjoyed this video. And if you did, I appreciate if you could like and subscribe to my channel.

Soft sign-off ask, spoken not shown on screen. The real monetization sits in the description, not the video: a tagged Higgsfield referral link, a free GitHub repo as the lead magnet, and a link to paid one-on-one/team coaching.

Storyboard

Visual structure at a glance.

talking-head cold open
hooktalking-head cold open00:00
demo site 1: smoothie brand
hookdemo site 1: smoothie brand00:13
six-step workflow slide
promisesix-step workflow slide01:49
GPT-6 Astra chat setup
valueGPT-6 Astra chat setup02:24
visual story scene table generated
valuevisual story scene table generated05:28
jacket keyframe image generated
valuejacket keyframe image generated06:23
first hero video embedded in site
valuefirst hero video embedded in site07:44
product images + collection page ready
valueproduct images + collection page ready12:23
switching to iPhone 15 Pro preview
valueswitching to iPhone 15 Pro preview13:20
final mobile hero + CTA
ctafinal mobile hero + CTA15:16
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.