Build $50,000 websites using Claude Fable 5 (full tutorial)

Video. Build $50,000 Websites Using Claude Fable 5 (Full Tutorial) · id 5ZAsjUoMx1Y · 25:16 · reviewed 02-08-2026 · author Viktor Oddy

The process he shows

Pinterest, 20-30 minutes. Collect references into a Figma moodboard: one for layout and text placement, one for colors, several for graphics (branches, butterflies, purple 3D objects). He takes only the text placement from a design, never the design itself.
Higgsfield image chat. Compose the references into one hero design: "the first image is the website; replace the content with a meditation app; remove the navbar and the tree; add the branch from images 2-3 across the hero; keep the branch style of image 2 on the background of image 1."
Color pass. Same chat, with the color reference: dark gradient background, same moss texture, and an explicit ban ("do not add the yellow circle").
Split the approved design into two build plates. (a) Background only: "same image in 4K/8K, remove all text, buttons, icons — only the background." This plate gets animated. (b) UI only: "keep the text and icons in the same positions, on a plain black background." This plate is what Claude codes the layout from, with nothing to distract it.
Find the font by eye. Google Images search "Google fonts best free fonts", compare the sheets against the design → Instrument Serif. Claude imports it by name.
Claude Code, model Fable 5, new folder: "build the hero on pure black; position text and content as on the reference images; use this font; import an icon library for the three icons; mobile responsive."
Animate the background plate with Kling 3.0 (inside Higgsfield or direct): "animate this, no zoom in or zoom out", 10 seconds, 1080p — 4K not needed.
Effect transfer. He screen-records ~7 seconds of an animation he likes on some site (CleanShot), then gives the clip to Seedance as a video reference: "animate the first image; take only the effect from the second video, none of its colors or elements."
Video into the hero. "Add this video as the background, no overlay." Then readability: all fonts −10-15%, headline −30%, remove dividers.
Rest of the site in one prompt. Alternating cards (video left / text right, then swapped), three icon features, testimonials, footer; uppercase headlines.
De-slop passes. Remove the fills and strokes AI puts on cards ("just the video and the text"), remove dividers, equalize section spacing.
Dividers from assets. A branch cutout PNG absolutely positioned across the boundary of two sections; and a video generated on a pure black background, placed on the black page so its edges disappear.
Model routing. Fable 5 builds; Sonnet takes the minor edits.
Taste note. Energetic motion for a 20-30 year audience; a calmer video for older readers.

What is genuinely new for us

The two-plate build. One approved design image becomes a background plate (to animate) and a UI plate on black (to code from). Our AI Studio note holds design-as-image and mask pairs; the split "animate this half, code that half" is the missing production step between design approval and build.
Effect transfer by screen recording. Any animation on the web, recorded for 7 seconds, becomes a motion reference for Seedance. Nothing in our holdings moves an EFFECT (rather than a look) between assets.
Two invisible dividers. The cutout PNG straddling two sections, and the black-background video that melts into a black page.
Font by image-sheet comparison. Faster than scrolling Google Fonts.

What we skip and why

The $50,000 claim and motionsites.ai promotion — sales.
Figma's paid AI features — he does not use them either.
The de-slop passes (kill fills, strokes, dividers) — they confirm our anti-slop rules, already held.
Fable-builds / Sonnet-edits routing — Frank's model routing already says this.
The reference discipline (one board, 20-30 minutes) — already in the first decoded tutorial.

Fold-in candidates

Two-plate build (background plate to animate + UI plate on black to code from) → sitio-cinematico skill (~/.claude/skills/sitio-cinematico/), as a named step between design approval and build.
Effect transfer by screen recording into Seedance → 9 - System/ui-ux/motion/motion-design.md §5 making the assets.
Black-background video as an invisible seam + cutout PNG straddling two sections → 9 - System/ui-ux/motion/motion-design.md §3 technique shelf.
Motion energy matched to the audience's age → 9 - System/ui-ux/motion/motion-design.md §6 taste rules, one line.
Font found by comparing Google Images sheets with the design → sitio-cinematico skill, one line in the font step.

Deserves a full reference page with frames: no

The two real additions are prompts and one recording habit; this digest carries them whole. The rest of the video repeats the flow our sitio-cinematico skill already encodes.