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

**Video.** [Build $50,000 Websites Using Claude Fable 5 (Full Tutorial)](https://www.youtube.com/watch?v=5ZAsjUoMx1Y) · id `5ZAsjUoMx1Y` · 25:16 · reviewed 02-08-2026 · author Viktor Oddy

## The process he shows

1. **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.
2. **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."
3. **Color pass.** Same chat, with the color reference: dark gradient background, same moss texture, and an explicit ban ("do not add the yellow circle").
4. **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.
5. **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.
6. **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."
7. **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.
8. **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."
9. **Video into the hero.** "Add this video as the background, no overlay." Then readability: all fonts −10-15%, headline −30%, remove dividers.
10. **Rest of the site in one prompt.** Alternating cards (video left / text right, then swapped), three icon features, testimonials, footer; uppercase headlines.
11. **De-slop passes.** Remove the fills and strokes AI puts on cards ("just the video and the text"), remove dividers, equalize section spacing.
12. **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.
13. **Model routing.** Fable 5 builds; Sonnet takes the minor edits.
14. **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

1. **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.
2. **Effect transfer by screen recording into Seedance** → `9 - System/ui-ux/motion/motion-design.md` §5 making the assets.
3. **Black-background video as an invisible seam + cutout PNG straddling two sections** → `9 - System/ui-ux/motion/motion-design.md` §3 technique shelf.
4. **Motion energy matched to the audience's age** → `9 - System/ui-ux/motion/motion-design.md` §6 taste rules, one line.
5. **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.