Fable 5 Web Design

The Turning Point

For the last few years, AI coding models have been able to build whatever you describe, but the results usually looked like a developer built them. Generic spacing, default type scales, hero-features-footer layouts. The code was expert-level. The design wasn't.

Fable 5 is the moment that changed. Given nothing but a handful of assets and a single prompt, it produces work with genuine design judgment: considered typographic hierarchy, a coherent spacing rhythm, restrained color, and interactive flourishes like scroll-driven video scrubbing and layered parallax that feel intentional rather than bolted on. AI stopped just coding like an expert and started designing like one.

Watch the One-Shot Demo

The video below is a live, unedited demo: a complex website idea handed to Fable 5 with minimal guidance. Just some basic assets and one prompt. Watch how it makes layout, motion, and typography decisions no one asked for, but that a senior designer would have made:

Why This Guide Outlives Fable 5

Model names rotate every few months. The skill this guide teaches doesn't: briefing an AI the way a creative director briefs a designer. Everything in the next four sections (the prompt anatomy, the design-brief framework, the technique reference, the art-direction checklist) works with any frontier model. Only the final section is specific to Fable 5, and it's clearly marked as a snapshot in time.

Anatomy of a One-Shot Prompt

"One-shot" means the model produces a complete, polished result from a single prompt: no back-and-forth, no incremental patching. That only works when the prompt carries the same information a real design brief would. Here's what the prompt in the demo actually did, piece by piece.

1. It Provided Real Assets Up Front

The demo supplied basic assets before prompting: a logo, product imagery, and a short video clip. This matters more than most people expect, because assets change the output quality:

• The model designs around real content, not lorem ipsum boxes
• Colors get extracted from your imagery instead of invented
• A video asset invites motion design (scrubbing, reveals)
• Aspect ratios and crops are decided against real media

Without assets, the model defaults to placeholder-driven, generic "template" layouts.

2. It Described Intent, Not Implementation

The prompt described the feeling and purpose of the site (who it's for and what impression it should leave) rather than dictating components. Compare:

The weak version gets you the median of every landing page the model has seen. The strong version forces design decisions. Cinematic implies dark, full-bleed media and large type. "Scroll drives the video" implies a scrubbing interaction. "Earns its place" licenses the model to cut filler.

3. It Set Constraints That Raise Quality

Counterintuitively, constraints improve one-shot output. An open-ended prompt produces safe, average work. Constraints eliminate the average option:

• "One accent color maximum"
• "No stock illustration style, no gradient blobs"
• "Type does the heavy lifting, imagery is secondary"
• "Vanilla HTML/CSS/JS, no frameworks, single page"
• "60fps scroll performance is non-negotiable"

4. It Named References

Frontier models have deep knowledge of well-known design language. Naming a reference ("like Linear's marketing site," "editorial like Stripe Press," "brutalist like a fashion lookbook") transfers an entire visual system in a few words, far more efficiently than describing spacing and type choices individually.

The Design-Brief Framework

This is the evergreen core of the guide: a reusable prompt template structured like a real creative brief. It works with Fable 5 today and will work with whatever model replaces it. Copy it, fill in the brackets, attach your assets, and send it as a single message.

The Template

## PROJECT
[One sentence: what this site is and its single most
important job. e.g. "Launch page for X that convinces
design-conscious developers to join the waitlist."]

## AUDIENCE
[Who lands here, what they already know, what they're
skeptical about, and what should convince them.]

## TONE & REGISTER
[3-5 adjectives + one sentence of nuance.
e.g. "Cinematic, precise, quietly confident. Premium
without being cold. Closer to A24 than to enterprise SaaS."]

## REFERENCES
[1-3 named references and WHAT to take from each.
e.g. "Linear (restraint, type hierarchy), Apple product
pages (scroll-driven media), NOT generic SaaS templates."]

## CONTENT & HIERARCHY
[The sections/messages in priority order. Mark what is
primary vs. supporting. Include real copy if you have it.
Real copy beats lorem ipsum every time.]

## MOTION & INTERACTION
[What should move, why, and how it should feel.
e.g. "Scroll scrubs the hero video. Parallax on the
feature imagery: subtle, physical, never carnival.
Respect prefers-reduced-motion."]

## ASSETS (attached)
[Manifest of every file: logo.svg, hero-clip.mp4 (12s,
1920x1080), product-01.jpg ... and how each may be used.]

## CONSTRAINTS
[Tech stack, performance budget, accessibility floor,
things to avoid. e.g. "Vanilla HTML/CSS/JS, single file,
WCAG AA contrast, no external dependencies, 60fps scroll."]

## DELIVERABLE
[Exactly what to produce. e.g. "One complete index.html,
production quality, fully responsive, ready to deploy."]

A Filled-In Example

Here's the framework applied to a realistic project, the kind of brief that produced the result in the demo video:

## PROJECT
Launch site for "Meridian," a mechanical keyboard for
programmers. One job: make visitors feel the build quality
before they can touch it, then pre-order.

## AUDIENCE
Developers who already own 2+ keyboards. They're skeptical
of hype and allergic to marketing speak. Specs and material
honesty convince them. Adjectives don't.

## TONE & REGISTER
Industrial, tactile, engineered. Think camera-lens product
photography, not gamer RGB. Confidence through restraint.

## REFERENCES
Teenage Engineering (industrial honesty), Apple AirPods
pages (scroll-driven product cinema). Avoid: dark-mode
crypto-landing aesthetics.

## CONTENT & HIERARCHY
1. Hero: the keyboard, full-bleed, scroll scrubs the
   360° rotation clip (primary)
2. Materials story: CNC aluminum, PBT caps (primary)
3. Switch specs with real actuation data (supporting)
4. Pre-order CTA with honest ship date (primary)

## MOTION & INTERACTION
Scroll scrubs the hero video frame-by-frame. Materials
imagery parallaxes at two depths, max 8% translation.
Everything honors prefers-reduced-motion.

## ASSETS (attached)
logo.svg · rotation-clip.mp4 (8s, 1920x1080, 240 frames)
· detail-01.jpg through detail-04.jpg (macro shots)

## CONSTRAINTS
Single index.html, vanilla JS, zero dependencies. WCAG AA.
No layout shift on video load. 60fps scroll on mid-range
hardware.

## DELIVERABLE
One production-ready index.html, responsive from 360px to
4K, deployable as-is.

Why the Structure Matters

Deconstructing What Fable Built

The demo's most impressive moments came from two techniques. Understanding them matters for two reasons: you can ask for them by name in your brief, and you can evaluate whether the model implemented them well. Both are copy-paste ready.

Scroll-Driven Video Scrubbing

The standout effect from the demo, used across multiple sections of the site: as the user scrolls, the video's playhead advances, so the footage plays exactly at scroll speed. The classic implementation pins the video and maps scroll progress to currentTime:

<section class="scrub-section">
  <div class="scrub-sticky">
    <video id="scrubVideo" src="rotation-clip.mp4"
           muted playsinline preload="auto"></video>
  </div>
</section>

/* The section is tall and the video stays pinned while
   the user scrolls through it. Section height controls
   how "slow" the scrub feels. */
.scrub-section {
  height: 400vh;
  position: relative;
}
.scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.scrub-sticky video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

const video = document.getElementById('scrubVideo');
const section = document.querySelector('.scrub-section');

// Pause playback. Scroll owns the playhead now.
video.pause();

let targetTime = 0;

function onScroll() {
  const rect = section.getBoundingClientRect();
  // 0 when section top hits viewport top,
  // 1 when section bottom leaves viewport bottom
  const scrollable = rect.height - window.innerHeight;
  const progress = Math.min(Math.max(-rect.top / scrollable, 0), 1);
  targetTime = progress * video.duration;
}

// Decouple seeking from scroll events: seek at most once
// per frame, and ease toward the target for smoothness.
function render() {
  if (video.duration) {
    const delta = targetTime - video.currentTime;
    if (Math.abs(delta) > 0.01) {
      video.currentTime += delta * 0.25;
    }
  }
  requestAnimationFrame(render);
}

window.addEventListener('scroll', onScroll, { passive: true });
requestAnimationFrame(render);

JS Parallax Done Right

The demo's parallax was subtle: a few percent of translation at different depths, which is exactly why it read as premium instead of gimmicky. The performant pattern is to read scroll position once per frame and write only transform:

<div class="parallax-scene">
  <img class="parallax-layer" data-depth="0.15" src="back.jpg" alt="">
  <img class="parallax-layer" data-depth="0.35" src="mid.png" alt="">
  <img class="parallax-layer" data-depth="0.60" src="front.png" alt="Product">
</div>

const layers = document.querySelectorAll('.parallax-layer');
const reduceMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

let ticking = false;

function updateParallax() {
  const scrollY = window.scrollY;
  layers.forEach(layer => {
    const depth = parseFloat(layer.dataset.depth);
    // translate3d promotes the layer to the compositor:
    // no layout, no paint, just a GPU transform.
    layer.style.transform =
      `translate3d(0, ${scrollY * depth * -0.1}px, 0)`;
  });
  ticking = false;
}

window.addEventListener('scroll', () => {
  if (!ticking && !reduceMotion) {
    requestAnimationFrame(updateParallax);
    ticking = true;
  }
}, { passive: true });

Modern CSS can now do this with zero JavaScript via scroll-driven animations. See our Scroll-Driven Animations guide for the animation-timeline: scroll() approach:

/* CSS-only parallax (Chromium, progressively enhanced) */
@supports (animation-timeline: scroll()) {
  .parallax-layer {
    animation: drift linear both;
    animation-timeline: scroll(root);
  }
  @keyframes drift {
    to { transform: translateY(calc(var(--depth) * -120px)); }
  }
}

Deeper dives on each technique: Scroll-Driven Animations, CSS Transitions, and CSS Animations.

Art-Directing the Output

A one-shot is a first pass from a very fast, very skilled designer, and you're the creative director. The skill is knowing what to check and how to give notes. Accepting the first render uncritically is how AI sites end up shipped with 3am-demo energy.

The Evaluation Checklist

Hierarchy & Layout

• Can you tell what the most important thing on each screen is within one second?
• Does whitespace concentrate around what matters?
• Is there one spacing scale, or ad-hoc values?

Typography

• Display type: tight line-height, negative tracking?
• Body type: 45-75 characters per line?
• Is the scale consistent (every size on the ratio)?

Color & Contrast

• One accent doing real work, or five fighting?
• WCAG AA contrast on all text (4.5:1 body, 3:1 large)?

Motion

• Does motion communicate (depth, progress, causality) or just decorate?
• prefers-reduced-motion respected?
• 60fps on a mid-range phone, not just your machine?

Responsiveness

• Check 360px, 768px, 1440px, and ultrawide
• Does the hero still work when the video can't autoplay (iOS Low Power Mode)?

Code Quality

• Semantic HTML (real headings, landmarks, alt text)?
• Scroll handlers passive + rAF-throttled?
• No layout shift as media loads?

Giving Notes Like a Creative Director

Follow-up prompts work best when they're notes on intent, not micro-instructions. The model that designed it can redesign it, if you tell it what's wrong at the level of the design rather than the CSS:

When to Iterate vs. Re-Shot

Fable 5 Today

Where Fable 5 Excels

• Genuine layout judgment: hierarchy and whitespace decisions that previously required human taste
• Motion design: scroll-driven interactions implemented correctly (rAF throttling, passive listeners) unprompted
• Typographic systems: cohesive fluid scales and optical letter-spacing without being asked
• Asset awareness: extracts palette and mood from provided imagery
• Long-context: holds an entire multi-section site in one shot without drift between sections
• Code quality: semantic HTML and accessibility basics arrive by default, not as an afterthought

Where It Still Needs Direction

• Defaults to dark, cinematic registers. If you want light/editorial, say so explicitly
• Can over-animate when the brief mentions motion, so set a budget ("two moments of motion maximum")
• Video encoding assumptions: it writes correct scrub code but can't fix a badly-encoded source file
• Brand voice in microcopy is serviceable, not distinctive. Supply real copy for key moments
• Still benefits from an explicit performance budget in the constraints section

Practical Setup Tips

• Send everything in one message. Brief plus all assets in a single prompt outperforms drip-feeding context across turns.
• Use the highest reasoning setting available in your tool for the initial one-shot. Design coherence benefits from it more than iteration turns do.
• Name techniques from this guide ("scroll-scrubbed hero," "two-depth parallax"). Fable 5 knows the implementations, and the vocabulary gets you the good version.
• Pair with project rules if you're working in an agentic editor. See our Cursor Rules and Context Engineering guides for persistent design-system instructions.