Claude Fable 5 Insane Websites

A structured Markdown guide based on Duncan Rogoff's YouTube video and the supplied workflow notes.

• Video: https://www.youtube.com/watch?v=mokCv4xaPWM
• Creator: Duncan Rogoff
• Topic: Building a high-quality product website with Claude through six controlled design and implementation passes
• Core idea: Do not ask Claude to make a finished website in one prompt. Build the site in layers: message, motion, palette, copy, assets, and final structure.

The Six-Pass Website Workflow

This workflow turns one product photo and a few product answers into a polished single-page website. Each step upgrades the same index.html file instead of starting over.

Why This Workflow Works

Most AI-generated websites fail because they try to solve strategy, layout, motion, color, copy, and media all at once. The result is usually generic: gradient text, glass cards, repeated sections, vague claims, and obvious AI aesthetics.

This workflow forces Claude to make one high-leverage decision at a time:

1. What is the site saying?
2. What should scrolling mean?
3. What world does the product live in?
4. What claims are concrete enough to matter?
5. What media does the page need?
6. Does the final site feel intentional, not generated?

The important discipline is that every pass modifies the same file. Claude is not allowed to restart, over-design, or drift away from the original thesis.

Final Site Shape

The final page ships in this order:

1. Hero with hero.mp4 full-bleed
2. Thesis line
3. Feature pair using g1.jpg
4. Feature pair using g2.jpg
5. Gallery band using one image, middle.mp4, and one image
6. Three numbered detail rows
7. CTA
8. Animated footer

The media contract is strict:

Each asset appears exactly once. Reused frames, filler cards, and generic gallery walls are banned.

Step 01 - The Core Messaging

Goal

Start with the product and extract a single thesis line. The first page should be intentionally plain: brand name, thesis line, two-sentence lede, and product image.

This pass is not about beauty. It is about strategic clarity.

What Claude Should Do

Claude should interview you with exactly four questions, one at a time. After the answers, it should distill the product into a short thesis line and create the first index.html.

Prompt 1

Here is my product. [attach one product photo]

Interview me with exactly four questions, one at a time:

1. What is the product or brand, in one line?
2. Who is it for, and what should they feel?
3. What is the one thing they should remember?
4. Do I have an AI render tool connected for footage, or should we use stock video and images?

Then distill my answers into one thesis line the whole site will serve. Short. Specific. No filler.

Create version one of the site: a single index.html with the brand name, the thesis line, and a two-sentence lede. Plain readable type, no styling yet. Put my product photo in an assets/ folder. Serve it locally and give me the URL. We will upgrade this same file five more times, so keep it clean.

Pass 01 Quality Check

Before moving on, confirm that:

• The thesis line is short and specific.
• The page is intentionally plain.
• The product image is stored in assets/.
• The first index.html is clean enough to upgrade repeatedly.
• Claude has not added unnecessary design flourishes.

Step 02 - The Scroll Style

Goal

Choose one scroll behavior that expresses the product. This is the critical design move. Scrolling must mean something, not just decorate the page.

Scroll Style Options

What Claude Should Do

Claude should inspect the product and thesis already in index.html, choose one scroll style, defend the choice in one line, and upgrade the page with motion infrastructure.

The page should now include:

• Hero
• Thesis
• Two feature blocks
• Gallery band
• Three detail rows
• CTA

The two videos and three images should still be placeholders at this stage.

Prompt 2

Look at the product and thesis in index.html. Pick ONE scroll style and defend the choice in a single line:
A · Ambient loop: a hero object that just looks beautiful
B · Scroll-scrub: the product transforms or rotates as you scroll
C · Cursor-spotlight: revealed out of the dark by the cursor
D · Horizontal pan-lock: a place or lineup you move sideways through
E · Exploded view: a built object worth taking apart
F · Push-through: a space the camera flies into
G · Scrollytelling: a process worth watching unfold
Ask: what does scrolling MEAN for this product? Match the motion to the thing, not to taste.
Then upgrade index.html: add smooth inertia scrolling (Lenis) and scroll-triggered reveals (GSAP ScrollTrigger), and lay out the full page top to bottom: hero, thesis, two feature blocks, a gallery band, three detail rows, a CTA. Use clearly labeled placeholder blocks where the two videos and three images will go. Same file. Tell me to refresh.

Pass 02 Quality Check

Before moving on, confirm that:

• Exactly one scroll style was selected.
• The scroll style fits the product, not the designer's taste.
• Lenis and GSAP ScrollTrigger are added cleanly.
• The page has the full top-to-bottom structure.
• Media placeholders are clearly labeled.

Step 03 - The Color Palette

Goal

Create the color system from a real scene, not from the product category. The palette should feel like a place, a time of day, and a lighting condition.

Palette Rules

• Use OKLCH only.
• Never use #000 or #fff.
• Tint every neutral toward the brand hue.
• Neutral chroma should stay between 0.005 and 0.02.
• Commit to one saturated accent.
• Everything else should stay quiet.
• Reduce chroma as lightness approaches 0 or 1.

Required Tokens

What Claude Should Do

Claude should write one scene sentence, choose dark or light from that scene, derive the palette, apply it to index.html, and add two fonts:

• One display face for headlines
• One clean body face for paragraph text

Prompt 3

Write one sentence: who is using this product, where, and in what light. Choose dark or light from that scene.
Then build the palette from the scene, never the category:

OKLCH only. Never #000 or #fff.
Tint every neutral toward the brand hue (chroma 0.005 to 0.02).
Commit to ONE saturated accent. Everything else stays quiet.
Reduce chroma as lightness approaches 0 or 1, or it turns garish.

Apply the four tokens (bg, ink, muted, accent) to index.html, and add the fonts: one display face for headlines, one clean body face. Then show me the scene sentence next to the live page so I can judge whether the colors tell that story.

Pass 03 Quality Check

Before moving on, confirm that:

• The palette comes from a scene, not a category cliché.
• All color values are OKLCH.
• There is only one saturated accent.
• Text remains readable.
• The fonts support the mood without looking like a template.

Step 04 - The Copy

Goal

Replace all placeholder language with specific, concrete copy. This is where the site stops sounding like AI output.

Copy Rules

• Headlines must be short.
• Captions must be 3 to 5 words.
• Each caption should contain one accent word.
• Specific beats generic.
• Concrete claims beat vague adjectives.
• Remove spec-sheet clutter.
• Avoid feature lists.
• Avoid jargon.
• Do not restate headings.
• Do not write an intro that repeats the title.
• Do not use em dashes.
• Every claim must be concrete enough to be falsifiable.

Required Copy Inventory

Each feature block needs a heading plus two sentences.

Prompt 4

Write the full site copy and put it straight into index.html, replacing every placeholder line:

• Headlines short. Captions 3 to 5 words, one accent word each.
• Specific beats generic: "two-thirds less acid" beats "smooth and delicious."
• Kill spec-sheet clutter. No feature lists, no jargon.
• No restated headings, no intro that repeats the title.
• No em dashes. Anywhere. Ever.
• Every claim concrete enough to be falsifiable.

The page needs: one eyebrow line, one lede, one thesis line, three captions, two feature blocks (heading + 2 sentences), three numbered detail rows, and one CTA line. Nothing else. Tell me to refresh and read it on the page, not in chat.

Pass 04 Quality Check

Before moving on, confirm that:

• Every placeholder has been replaced.
• Claims are concrete.
• Captions are short.
• No section is padded with generic marketing language.
• The copy is readable on the page itself.

Step 05 - Photo and Video

Goal

Create or source the exact five media assets the site needs: two videos and three vertical images.

The assets should not feel like random decoration. They should extend the product thesis, match the palette scene, and support the chosen scroll style.

Media Requirements

Video Laws

• Lock the camera to the scroll axis.
• No drift.
• No zoom.
• Use constant velocity.
• Motion blur must be off.
• The user controls time.
• The two videos must be siblings.
• Reuse the hero prompt's lighting and material language.
• Change only the motion or framing.
• For a transform, the start object must equal the end object.
• If consistency is weak, fall back to a loop.

Example Hero Render Prompt

A single hand-forged carbon steel pan, floating centered on warm slate, low amber forge light, crisp contact shadow, ultra-detailed product photography, 16:9. Motion: rotates slowly around its vertical axis, locked camera, constant speed, no zoom, no motion blur.

Prompt 5

Write 5 render prompts for my product: 2 videos + 3 vertical images. Each asset appears on the site exactly once.
Video laws:

• Lock the camera to the scroll axis. No drift, no zoom.
• Constant velocity. Motion blur OFF: the user controls time.
• The two videos are siblings: copy the hero prompt's lighting and material language, change only the motion or framing.
• For a transform: the START object must equal the END object, or fall back to a loop. Consistency over spectacle.

Example hero render:
"A single hand-forged carbon steel pan, floating centered on warm slate, low amber forge light, crisp contact shadow, ultra-detailed product photography, 16:9. Motion: rotates slowly around its vertical axis, locked camera, constant speed, no zoom, no motion blur."
Images: one context shot, one extreme macro, one hero still. All vertical.
Now GENERATE all five with my connected image and video tool. If I have no render tool, find five matching stock assets instead. Save them as assets/hero.mp4, assets/middle.mp4, assets/g1.jpg, assets/g2.jpg, assets/g3.jpg and wire each one into its placeholder in index.html. Tell me to refresh.

Pass 05 Quality Check

Before moving on, confirm that:

• There are exactly two videos.
• There are exactly three images.
• Every asset is saved with the required filename.
• Every asset is wired into index.html.
• Each asset appears exactly once.
• The videos share lighting and material language.
• The images are vertical.

Step 06 - The Spine

Goal

Rebuild the page into its final shippable structure. This is the editorial and design pass where the whole site gets tightened.

Final Section Order

1. Hero with hero.mp4 full-bleed
2. Thesis line
3. Feature pair using g1.jpg
4. Feature pair using g2.jpg
5. Gallery band using image, middle.mp4, image
6. Three numbered rows
7. CTA
8. Animated footer

Hard Rules

• Use two videos and three images.
• Each media asset appears exactly once.
• No card grids.
• No gallery walls.
• No reused frames as filler.
• Use one committed accent.
• Never use #000 or #fff.
• Hero text must sit on a soft dark halo.
• Hero video must move before the first scroll.
• Ban gradient text.
• Ban glassmorphism.
• Ban identical cards.
• Ban the big-number hero metric.
• If the page looks AI-generated, it fails.

Prompt 6

Final pass. Rebuild index.html into this exact section order: Hero (hero.mp4 full-bleed), Thesis line, two Feature pairs (g1 and g2), Gallery band (image, middle.mp4, image), three numbered Rows, the CTA, an animated footer.
Hard rules:

• 2 videos + 3 images, each used exactly once. No card grids, no gallery walls, no reused frames as filler.
• One committed accent. Never #000 or #fff.
• Hero text sits on a soft dark halo so it never washes out.
• The hero must be moving before the first scroll.
• Final gate: if someone could look at it and say "AI made that," it failed. Gradient text, glassmorphism, identical cards, the big-number hero metric: all banned.

Serve the finished site, give me the URL, and list what changed in this pass. This is the site we ship.

Pass 06 Quality Check

Before shipping, confirm that:

• The section order is exact.
• The media usage count is correct.
• The hero is moving immediately.
• The hero text is readable.
• The accent color is disciplined.
• There are no obvious AI design clichés.
• The final page has a local URL.
• Claude lists the final changes clearly.

Complete Workflow Checklist

Use this checklist when running the process inside Claude.

Inputs

• One product photo attached
• Product or brand name ready
• Target audience roughly known
• Desired feeling roughly known
• Render tool or stock media choice decided

Build Passes

• Pass 01: Core message created
• Pass 02: Scroll style selected and implemented
• Pass 03: OKLCH palette and fonts applied
• Pass 04: Copy written into the page
• Pass 05: Two videos and three images generated or sourced
• Pass 06: Final section order rebuilt and shipped

Final Gate

• The page has one thesis.
• Scrolling has meaning.
• The palette tells a scene.
• The copy makes falsifiable claims.
• Media is intentional, not filler.
• The final design does not look AI-generated.

Practical Notes

Do Not Skip the Interview

The first four questions are not busywork. They prevent Claude from generating a generic site. Without the thesis line, every later pass becomes decoration.

Do Not Pick Motion by Taste

The scroll style must come from the product. A technical object may suit an exploded view. A sensory product may suit an ambient loop. A process-based product may need scrollytelling.

Do Not Let the Palette Come from the Category

A coffee site does not automatically need brown. A pan site does not automatically need black. A skincare site does not automatically need beige. The palette should come from a concrete scene.

Do Not Let Claude Overwrite the System

Each pass upgrades the same index.html. That is the point. Starting again usually reintroduces generic AI layout patterns.

Do Not Accept Generic Copy

Words like premium, seamless, innovative, elevated, smooth, delicious, powerful, and beautiful are weak unless attached to something concrete. The copy should make claims someone could verify or dispute.

Recommended Folder Structure

project/
├── index.html
└── assets/
    ├── hero.mp4
    ├── middle.mp4
    ├── g1.jpg
    ├── g2.jpg
    └── g3.jpg

Summary

This method is a six-pass system for building an AI-assisted product website without producing obvious AI slop. The discipline is simple but strict: extract the message first, make scroll meaningful, derive color from a scene, write concrete copy, use only necessary media, and finish with a hard editorial gate.

The site is not done when Claude produces something attractive. It is done when the page feels specific to the product and difficult to mistake for a template.