Building Premium Websites with Claude Fable 5
Duncan Rogoff | AI Automationgo watch the original →
the gist
The author demonstrates how to build high-end websites using Claude Fable 5 and Claude Code by iterating through six design components—messaging, scroll style, color palette, copy, media, and layout—or by using a custom plugin to automate the workflow via sub-agents.
The Breakthrough
The author uses Anthropic's Fable model within Claude Code to generate high-fidelity, agency-grade websites by either manually iterating through a six-step design prompt sequence or by using a custom plugin to trigger autonomous sub-agents that draft and self-evaluate site designs.
What Actually Worked
- Structured Interview Prompting: The author initiates the design process by uploading a product image and using a four-question interview prompt to define the brand identity, target audience, emotional goal, and asset generation method.
- Contextual Color Palette Generation: Instead of generic color selection, the author prompts the model to visualize a specific scene involving the product (e.g., "a buyer takes his new R8 out alone at dusk on an empty canyon road") to derive a contextually accurate color palette.
- Constraint-Based Copywriting: The author enforces specific copywriting constraints to ensure a premium feel: headlines must remain short, captions are limited to three to five words, and the model is instructed to avoid em-dashes and restated headlines.
- Dynamic Workflow Automation: By setting the Claude Code effort level to "Ultra Code," the system spawns sub-agents to draft multiple site versions and a secondary agent team to score the designs against established design principles.
- Asset Integration: The author connects Fal AI via an API key to the Claude Code environment, allowing the model to automatically generate photorealistic images and videos based on the established brand aesthetic.
Context
The author aims to replicate the output of high-end design agencies by leveraging the reasoning capabilities of the Fable model. By moving from manual, piece-by-piece construction to an agentic workflow, the author demonstrates how to reduce the effort required to produce complex, scroll-optimized landing pages from a single product image and brief description.