20:34Nate Herk | AI Automation · Review
Claude Code vs. Codex: An 8-Site Head-to-Head Design Test
Same prompts, same brand kits, two coding agents — one landing page built by each, eight times over, scored on design and on the bill.
August 26thThe argument in one line.
A single AI prompt only produces a starting point, not a finished design, and the real skill is matching each editing task — full structural rebuilds versus small fixes — to the right-sized model.
Read if. Skip if.
READ IF YOU ARE…
- You use Codex, Claude Code, or a similar coding agent to build or restyle websites and want a repeatable video-reference workflow.
- You've gotten a flat or generic result from a one-shot AI landing-page prompt and want to know what step comes after that.
- You're deciding when to reach for a slower, more powerful model versus a faster one during an AI-assisted build.
SKIP IF…
- You want a no-code, drag-and-drop page builder tutorial — this is a prompt-and-AI-agent driven workflow, not a visual editor.
- You're looking for a head-to-head benchmark of GPT-5.6 against other models — this video only tests Sol and Terra against each other, not competitors.
The full version, fast.
The video tests OpenAI's new GPT-5.6 model family — Sol, Terra, and Luna — by rebuilding a landing page inside Codex. Instead of screenshotting a reference site, the creator records a slow scroll-through video so the AI can see load animations, transitions, and scroll behavior, then prompts Codex with an explicit keep-this/change-this split: preserve structure and motion, replace brand, copy, and color. Sol handles the full video-analysis rebuild; Terra handles the smaller fixes after — a broken card-drag loop, a flat pricing section, a weak hero. The core conclusion: one-shot prompts are always a starting point, never a finished product, and picking the right model per task matters more than always reaching for the most powerful one.
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:24
01 · GPT-5.6's three new models
Introduces Sol, Terra, and Luna, and narrows the video's focus to Sol and Terra — the two models most people will actually use inside Codex.
00:24 – 00:58
02 · Why one-shot results aren't the whole story
Argues the final result matters more than a single flashy one-shot prompt, and that a strong prompt still requires writing skill and experience.
00:58 – 02:14
03 · Finding a reference site and recording the scroll
Picks a random inspiration site on Framer, then records a slow scroll capturing unload animations, layout, scroll effects, and transitions rather than taking a screenshot.
02:14 – 03:33
04 · Uploading the reference video to Codex, prompting Sol
Uploads the scroll-capture video to Codex and writes a prompt with an explicit keep-list (structure, layout, animation, interaction) and change-list (brand, copy, images, color).
03:33 – 04:30
05 · The first one-shot result: what worked, what didn't
Reviews the first Sol output — new AI-generated imagery, a hero section that needs stronger word reveal, and a section meant to be sticky that isn't pinning yet.
04:30 – 05:55
06 · A strong starting point, then a second reference
Calls the first pass an impressive but imperfect starting point, then brings in a second animation reference to combine ideas rather than clone one source.
05:55 – 06:51
07 · Why Sol for the big pass, and the truth about 'one shot'
Explains why the full-video, multi-section combine pass stays on Sol, and states plainly that anyone claiming a true one-shot result is describing a project they'd already finished before.
06:51 – 07:33
08 · Reviewing the improved site, spotting weak sections
Walks the updated page and flags the pricing and FAQ sections as still boring, while noting the testimonial section is strong but missing interaction.
07:33 – 08:26
09 · Switching to Terra for faster iteration
Moves from Sol to Terra for everyday iteration — quick design changes and smaller improvements rather than another full structural pass.
08:26 – 09:41
10 · Fixing the drag interaction, pricing cards, and a lost voice
Diagnoses a broken infinite-loop drag interaction on the pricing cards, writes a precise fix prompt for Terra, and switches to a cloned AI voice mid-recording after losing his voice.
09:41 – 10:24
11 · Rebuilding the hero section and wrap-up
Calls the hero section the part that normally takes the most time, points to animated imagery and tools like Spline or WebGL as options, then signs off.
Lines worth screenshotting.
- A one-shot AI landing page is a first draft, not a finished product — every visible 'one shot' build online is actually the last of many iterations.
- Recording a slow scroll-through video of a reference site captures load animations, hover states, and transitions that a screenshot can never show an AI.
- Splitting an AI prompt into an explicit 'what to keep' list and a 'what to change' list produces a more targeted rebuild than one freeform request.
- The goal of using a design reference is not to copy it — the brief itself should state the result must feel like a different brand, not a clone.
- Full video analysis and page-wide structural reasoning call for a model's higher reasoning tier; bug fixes and small tweaks don't need it.
- Combining ideas from two separate reference videos, instead of cloning one, is what keeps a rebuilt design from reading as a copy of either source.
- A section that includes real interaction, like a testimonial carousel, reads as more finished than a section that is just styled text.
- The hero section is where creators spend the most iteration time because it's the first thing a visitor sees — it rarely survives the first draft.
- Debugging an interactive component works better when you describe the exact broken behavior and the exact desired behavior, not just 'fix the drag.'
- Reserving the most expensive, slowest model for only the tasks that truly need deep reasoning keeps a multi-hour build moving without wasted usage.
The lesson isn't the model — it's the iteration loop.
WORKFLOW
One AI prompt only produces a starting point; the real work is a keep/change brief up front and matching each fix afterward to a model sized for that task.
01GPT-5.6's three new models
- GPT-5.6's three new models — Sol, Terra, and Luna — trade power for speed, so the reasoning-heavy tasks and the quick tasks call for different models, not always the biggest one.
- Picking a single 'best' AI model for every job is the wrong question — what a model is optimized for matters more than a leaderboard ranking.
02Why one-shot results aren't the whole story
- A one-shot AI prompt result is a starting point, not a finished product — treating it that way prevents disappointment with early output.
- Generic 'AI slop' comes from vague prompting, not weak models — a detailed, specific prompt still requires real writing skill and domain experience.
03Finding a reference site and recording the scroll
- Recording a slow scroll-through of a reference site, instead of screenshotting it, captures load animations, hover states, and transitions a static image would miss.
- The goal of using a reference isn't to copy it — stating up front that the result must feel like a different brand keeps the rebuild from reading as a clone.
04Uploading the reference video to Codex, prompting Sol
- Separating instructions into an explicit 'what to keep' list (structure, layout, motion) and a 'what to change' list (brand, copy, color) produces a more targeted AI result than one freeform request.
- Complex requests that require full video analysis and page-wide reasoning call for a model's higher reasoning tier, not its fastest one.
05The first one-shot result: what worked, what didn't
- Even an impressive one-shot AI result usually needs its animation and transitions refined afterward — the biggest early gap is that generated micro-interactions read flat.
- Auditing a first draft means checking what the AI kept against what it should have kept — structure, direction, differentiation — not just reacting to whether it looks good.
06A strong starting point, then a second reference
- Mixing ideas from two separate reference videos, instead of cloning just one, is how a final design ends up distinct from both sources.
07Why Sol for the big pass, and the truth about 'one shot'
- A request that requires re-processing an entire video and understanding how sections interact is worth staying on the higher-reasoning model for, even though it's slower.
- Claims of building something 'in one prompt' are misleading — the real process is one strong starting prompt followed by many rounds of smaller, targeted fixes.
- A true one-shot result is only possible after a design is already finished, when the final prompt can just describe the completed product back to the model.
08Reviewing the improved site, spotting weak sections
- After a big structural pass, isolate which specific sections still feel weak — pricing, FAQ, testimonials — rather than re-prompting the whole page again.
- A section with genuine content interaction, like a testimonial carousel, reads as more finished than a section that is just styled text.
09Switching to Terra for faster iteration
- Faster, mid-tier models are the right tool for everyday polish work — bug fixes, small tweaks, iteration — once the heavy structural decisions are already made.
- Reserving the most expensive, slowest model for only the tasks that truly need deep reasoning keeps a project moving without burning unnecessary usage or time.
10Fixing the drag interaction, pricing cards, and a lost voice
- Debugging an interactive component means describing the exact broken behavior and the exact desired behavior, rather than a vague 'fix the drag.'
- When a recording problem happens mid-session, having a backup plan — like a cloned voice — keeps a project shippable instead of scrapping the footage.
11Rebuilding the hero section and wrap-up
- The hero section is worth disproportionate time because it's a viewer's first impression — pulling in outside animation tools or references for that one section specifically is normal.
- Most of a real design timeline goes to fewer, higher-impact sections, with the hero getting reworked last rather than first.
Terms worth knowing.
- Codex
- OpenAI's coding agent, used here inside a chat-style interface to analyze an uploaded reference video and generate or edit website code.
- GPT-5.6 Sol
- The most powerful model in OpenAI's GPT-5.6 family, used for complex tasks needing stronger reasoning, full video analysis, and control over an entire project.
- GPT-5.6 Terra
- A mid-tier GPT-5.6 model built for everyday coding, quick iteration, and smaller design changes without the cost or speed of the top-tier model.
- GPT-5.6 Luna
- The fastest model in the GPT-5.6 family, named but not directly tested in this video; positioned as the lightest-weight option.
- One-shot prompt
- A single AI request expected to produce a finished result in one pass, as opposed to a result reached through multiple rounds of iteration.
- Scroll-capture reference video
- A screen recording of a slow scroll through an existing website, used to give an AI model visual context on load animations, transitions, and scroll behavior that a static screenshot can't convey.
- Sticky / pinned section
- A page section that stays fixed in place while the user keeps scrolling, often used to hold attention on a visual before releasing to the next section.
- AI slop
- Generic, low-effort AI-generated output that looks templated or interchangeable, typically the result of a vague or under-specified prompt regardless of model power.
Things they pointed at.
01:27toolFramer
Lines you could clip.
00:58
“Let's be honest, creating a very detailed prompt that give you a beautiful blended page in just one shot still require AI strong writing skill and a lot of experience.”
06:15
“When people say, I just made it in one shot pro, that's a lie.”
06:33
“The only way to have a one shot prompt is when I'm done with my landing page — I just create a sort of one prop shot with the code inside the prompt so you will get the exactly same result.”
03:29
“The goal is not to copy the original website — at the end, the result must be different.”
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
Hi, everyone. Welcome back. So OpenAI just really GPT 5.6, and this time, we don't only have just one model, but we have three different version, SOL, Terra, and Luna.
SOL is the most powerful model. LUNA is designed to be faster and TERRA sits somewhere in the middle. So for this video, I'm going to focus on GPT 5.6 SOL and TERRA because these are probably the two model that most people will use inside Codex.
Of course, I'm also curious to see which one is better between plus 5.5 and GPT 5.6. Right?
But I need to test GPT 5.6 properly before making a real comparison and telling you which AI model is the best. And honestly, I don't think that one shot prompt result is the only thing that matter.
The final result is more important. Let's be honest, creating a very detailed prompt that give you a beautiful blended page in just one shot still require AI. Strong writing skill and a lot of experience.
You can use any more powerful model, but if you promise to sample, you can still end up with generic AI slot.
So the model matter, but the way you guide it matter too. So I'm going to use my usual workflow is to find a website that inspire me.
So you can go to Framer or any website that you want. So I'm just going to choose a random website.
I'm not going to spend hours searching for the perfect candidate. So this won't look attractive to me.
So let's use this. And then I record a video while slowly scrolling to the enter landing page.
So when I record a video, I make sure it capture the unload animation, the layout, the cold effect, the transition and different interaction.
The goal is not to copy the original website. So at the end, the result must be different. After that, I jump into Codex.
So I upload the video to Codex and ask it to analyze the full experience.
Of course, I'm gonna start with Soul using medium reasoning. SOL is designed for more complex tasks.
So this is the model I will use when I need stronger reasoning, better planning and more control over a complete project.
So the prompt is this, so analyze the provide video and reboot the landing page with high visual fidelity, preserve the same page structure, layout logic, section order, onload animation, on school animation, transition and interaction pattern, reproduce the same sticky section, pin effect, review, parallax, culling, fade and transform when they appear in the reference.
However, change the brand name, all the tags, the product or services, the images and the color palette.
The final result should feel like the same interaction system and animation experiment that re designed for a complete new brand.
So you can see that it's actually generate new images. And of course, if I don't like the images, I can just replace it.
So let's see the result. Okay. So it still need more word especially on the arrow because the arrow is the most important part of a landing page.
And for this section, the text review line by line.
So the animation is not noticeable. I want to change it to a camera okay style animation where the word review one by one has use code.
And this section is supposed to be sticky, but right now, nothing very happen.
It's just a sample sample scrolling. So I need to make it stay pinned. Honestly, this is a very impressive one shot result.
It's not perfect, but overall, it give me a very strong starting point.
So one, the structure is here, the visual direction is clear, the branding feel different, but I don't think the one school animation is fully there yet.
It still feel like it missing a stronger woah effect and this is completely normal because the beginning of the design is almost never the same as the final result because I usually spend much more time refining it.
So what you can do is find another animation somewhere and another reference and just ask Kodak to change because you don't want to have the same structure or design.
So we're going to work more. So the on school experience is actually very interesting.
What I'm going to do is combine it with my current landing page. So instead of copying only one reference, I'm going to take the strongest idea from both.
By the end, the final result should feel completely different from the two original reference.
Since I want it to analyze the full video, I'm going to use again a soul to be safe. This is not a small iteration, so it need to understand the complete code experience, the structure, the animation logic, and how the different section work together.
And when people say, I just made it in one shot pro, that's a lie because they're to have a stronger result, you know.
But yes, they create the starting point in one shot prompt, but the final is not just one only prompt. That's impossible. The only way to have a one shot prompt is when I'm done with my landing page.
I just create a sort of one prop shot with the code inside the prompt so you will get the exactly same result.
Normally, I spend way more than ten minute creating a template and the error section is usually the power I spend the most time.
Okay. This is already much more interesting.
Alright. Let's see the other section.
Oh, now it's been.
Okay. It's better. There are still a fifth section that feel a little boring to me, especially the pricing, the FA FAQ section.
The testimonial section is great, but it's missing some interaction. So now I'm going to use DERA to iterate the change that I want to make them more engaging and add more personality to the overall experience.
So Terra is designed to give you strong performance without using the most expensive model for every task. It seemed like a better option for everyday cutting, quick iteration, design change and smaller improvement.
Alright.
So the drag interaction work, but what?
The car don't return to the back of this track. So after I drag out the three card, there are no card left. So I need to fix the looping behavior.
Okay. So the FAQ look better now with more detail and over effect, and the testimonial section is perfect.
So the next thing is I'm going to pick the drag and direction and the pricing section and start thinking about how to improve the arrow section.
Alright. So here is my prompt to fix the drag interaction and the pricing card.
Again, I'm going to use Terra.
Sorry. My voice is completely broken suddenly, so I have to use the AI voice I cloned because, otherwise, it's almost impossible to understand me.
I had already started recording, and suddenly, I almost completely lost my voice.
The drag issue is now fixed. So the main thing left is to focus on the hero section. Normally, this is the part that takes me the most time because I like to look for inspiration and test different ideas.
To make a hero section more interesting, you can animate the image, which is something a lot of designers do, or use tools like Spline, Unicorn Studio, or WebGL to create a more immersive experience.
Thank you so much for watching this video. I'll be back as soon as my voice recovers. See you in the next video.
Bye.
The Hook
The bait, then the rug-pull.
OpenAI just shipped three GPT-5.6 models instead of one, and the video's real question isn't which is "best" — it's which one earns its place at each stage of actually building something.
Named ideas worth stealing.
04:13list
Keep-list / change-list prompting
- Keep: page structure, layout logic, section order, on-load animation, on-scroll animation, interaction patterns, sticky/pinned/parallax/fade/transform effects
- Change: brand name, all text content, product or service, images, color palette, visual identity
The prompt structure used to hand a reference video to Codex — explicitly separating what the rebuild must preserve from what it must replace, so the result reproduces the motion system without copying the brand.
Steal forany prompt that rebuilds a design off a video or screenshot reference
02:56model
Model-to-task matching (Sol vs Terra vs Luna)
- Sol — full video analysis, whole-page structural rebuilds, combining multiple references, complex reasoning and planning
- Terra — everyday coding, quick design iteration, bug fixes, smaller section-level improvements
- Luna — named as the fastest of the three, not directly tested in this video
The video's working rule for which GPT-5.6 model to reach for at each stage of a build, based on how much reasoning and cross-section context the task requires.
Steal fordeciding when to use a slower reasoning model versus a faster iteration model on any AI-assisted build
How they asked for the click.
Visual structure at a glance.
