Most founders assume great web design is a negotiation — a $10K agency quote, a six-week timeline, a dozen rounds of feedback. I have been testing a different approach. Claude Code, Anthropic's AI coding tool, can design and build production-quality websites from a single well-structured prompt. Not just layouts. Full interactive experiences with real-time 3D graphics, animation systems, and audio.
To show what Claude Code design is actually capable of, I gave it one prompt and asked it to build a SpaceX-themed marketing site. No starter template. No component library. No back-and-forth. The result is below.
What Claude Code Built
The output is a single HTML file — no build step, no npm, no framework. It opens directly in a browser. Every visual is procedurally generated. No external images.
What you are looking at: a real-time Three.js WebGL scene rendered at 60fps. The Martian terrain is a procedurally displaced plane geometry. The Starship is built from stacked cylinder and cone geometries with an emissive window strip. The stars are 8,000 points scattered on a sphere. The reddish atmospheric haze is exponential fog. All of it is running live in the browser — not a video, not a static image.
Each of the six routes — Home, Starship, Falcon, Dragon, Starlink, Missions — triggers a camera dolly to a different framing of the same persistent Three.js scene. The canvas never tears down. The Falcon route pivots to the night side of the scene and swaps in a Falcon 9 model. The Dragon route reveals an Earth sphere with an atmosphere shader. The Starlink route pulls back to an orbital view with 200 satellite instances tracking great-circle paths.
The loading screen shows a percentage counter while the Three.js scene initializes, then plays an iris-out reveal. Scroll within any route triggers IntersectionObserver-based animations: section text reveals, number count-ups, card lift-and-settle. The ambient audio drone is four sine oscillators with a slow LFO, generated entirely in Web Audio — no audio files, no external assets.
The Prompt That Built This
Claude Code design outputs like this do not come from a vague brief. They come from a prompt that makes architectural decisions in advance, specifies exact library versions, describes behavior per case, and includes an explicit success checklist. Here is the full prompt:
Build a SpaceX-themed marketing website as a single self-contained index.html that opens directly in a browser. No build step, no npm. Use CDN imports for Three.js (r160+) and anime.js (v3). Inline all CSS and JS. Architecture: 5-route SPA, hash-routed in one file. Routes: #/ (Home), #/starship, #/falcon, #/dragon, #/starlink, #/missions. A persistent top nav with brushed-metal underline indicator. Page transitions: 600ms anime.js fade + slight Y-translate, with the Three.js canvas persisting across routes — never tear down the scene. Hero WebGL scene (persistent background, full viewport): - Martian horizon: low-poly displaced terrain with reddish PBR material. - Starship silhouette — stacked-cylinder + nosecone with emissive window strip; add fin geometry. Slight idle sway. - Two-sun lighting: warm key (Sol) low on horizon + cooler rim from opposite. Atmospheric haze via fog (color #c97a4a). - 3000 instanced dust particles drifting on a wind vector. - Starfield using custom shader on sky sphere (procedural, no texture). - Distant Phobos crescent, slow rotation. - Postprocessing: bloom on emissives, film grain, vignette. EffectComposer. Per-route camera framings (smooth tween via anime.js on a proxy object): - Home: wide cinematic, Starship centered, slow truck-in. - Starship: close orbit around the vehicle, parallax dust. - Falcon: pivot to night-side starfield, Falcon 9 model swaps in. - Dragon: tight on capsule against Earth limb (procedural blue sphere). - Starlink: pull back to orbital view, 200+ satellite instances. - Missions: top-down map view. Scroll choreography: IntersectionObserver drives anime.js timelines. Text reveals line-by-line, numbers count up, stat cards lift+settle. Typography: Space Grotesk (700/500) + Inter (400/500) from Google Fonts. Hero h1 at clamp(3rem, 9vw, 9rem), -0.04em tracking, uppercase eyebrow at 11px/0.2em. Background #000, text #f5f3ee, accent #ff5b3a. Content (real public SpaceX info, labeled "as of 2024"): - Home: 4 stat cards — Total Launches, Landings, Reflights, Starlink sats - Starship: Super Heavy + Ship specs, IFT test milestones - Falcon: Falcon 9 vs Falcon Heavy side-by-side comparison - Dragon: Crew + Cargo specs, Polaris Dawn, Inspiration4, Axiom-1 - Starlink: constellation size, coverage, latency specs - Missions: 6 notable missions as vertical timeline Interactions: - Custom cursor: ring that scales on hover. Disable on touch. - Mute/unmute ambient hum via Web Audio API — procedural low drone. - Loading screen: percentage counter, then iris-out reveal. Performance & a11y: - Cap pixel ratio at min(devicePixelRatio, 2). - prefers-reduced-motion: skip tweens, freeze particles, static framing. - Mobile ≤768px: 800 particles, skip bloom, hamburger nav. - Pause render loop when tab is hidden. Constraints: - One file. CDN-only. No images (everything procedural or inline SVG). - Typographic wordmark "SPACEX" only — no official trademarks. - All numbers labeled "as of 2024" — nothing reads as live data. Success criteria — verify before reporting done: 1. Open index.html in Chrome — no console errors. 2. All routes navigate without scene teardown; camera tweens smoothly. 3. Scroll animations trigger per section. 4. 60fps on a 2020+ laptop; degrades gracefully on mobile. 5. prefers-reduced-motion behaves correctly. 6. No layout shift on font load.
Why Claude Code Design Works for Complex Builds
The prompt above produced the SpaceX site on the first pass — no iterations, no corrections. That is not luck. It is what happens when the prompt makes architectural decisions before asking for output. Here are the six structural moves that made the difference.
- 01 Delivery format before everything else. "Single self-contained index.html, no build step, no npm" appears in the first line. This eliminates every framework, bundler, and multi-file architecture the model might otherwise choose. Every line of code written after that sits inside a known container.
- 02 Exact library versions, not vague references. "Three.js r160+" and "anime.js v3" tell Claude Code which specific API surface to write against. Three.js r140, r155, and r170 have meaningfully different APIs. Specifying the version eliminates a whole class of subtle bugs that look like model errors but are really version mismatches.
- 03 Scene description layered macro to micro. Environment first (terrain, lighting, fog), then subjects (Starship, Phobos), then effects (particles, postprocessing). This order matches how a 3D artist builds a scene. Claude Code follows the same mental model.
- 04 Per-case behavior for every stateful element. Each of the six routes gets its own camera framing description. Without this, you get one camera position applied everywhere. Listing each case explicitly is what makes the route system actually work.
- 05 Constraints appear twice — early and late. "No build step, CDN only" in the first paragraph. "One file, no images, CDN only" near the end. The late repetition functions as a pre-flight checklist that runs just before code generation completes. Anything that slipped past the first constraint gets caught by the second.
- 06 Explicit success criteria at the end. Six numbered, verifiable checks. "Open in Chrome — no console errors." "All routes navigate without scene teardown." Claude Code attempts to satisfy them the same way a developer runs a QA checklist. Without them, the model stops when the code looks complete — not when it has been tested.
The implication for founders: Claude Code design at this level is not about knowing Three.js. It is about knowing how to specify what you want precisely enough that nothing is left to chance. The prompt is the design brief, the technical spec, and the QA checklist all in one document. Once you understand that structure, the output ceiling rises dramatically.
What This Changes for Web Design
Design agencies charge $8,000 to $25,000 for a site at this interaction quality level. The timeline is typically six to twelve weeks. The process involves discovery sessions, wireframes, rounds of feedback on mockups, handoff to development, QA, and launch.
Claude Code collapsed that to an afternoon. The output is not a template with your logo swapped in. It is a bespoke, custom-coded interactive experience. The Martian scene is designed for SpaceX. The camera framings are matched to each content section. The particle count and bloom settings are tuned for the dark aesthetic. Nothing about it is generic.
The constraint that makes this work at this quality is the "single self-contained file" requirement. By eliminating build tools, the model cannot defer complexity to a bundler. Everything must be explicit: how dependencies are loaded, how the render loop is structured, how routes share state, how cleanup is managed. The constraint forces correctness. A site built this way has no hidden dependencies that break in production.
I use Claude Code design for client landing pages, experiment variations, and concept prototypes. For anything that would normally require a design agency conversation, I now start with a structured prompt. The first version is good enough to test against. Most of the time, it is good enough to ship.
Architecture before aesthetics
State the file format, stack, and dependency strategy in the first sentence. Every design decision that follows sits inside that container. Leaving it implicit produces inconsistent output.
Pin the library version
Three.js, anime.js, GSAP, D3 — any library with API churn needs a version. "Three.js r160+" writes against a known surface. "Three.js" writes against whichever version training data most represents.
List every state explicitly
Per route, per breakpoint, per user type — any behavior that changes per case needs each case listed. Claude Code infers well within a case. It does not reliably infer across a matrix of cases it has not seen.
End with verifiable success criteria
Numbered, testable checks. Not "make sure it looks good." "Open in Chrome — no console errors." These turn the output from best-effort into tested-against-requirements.
Specify the degradation path
Mobile behavior, reduced motion, low-power mode — name them in the prompt or they will not be handled. The SpaceX site's mobile hamburger menu and 800-particle fallback both appeared in the first pass because the prompt required them.
Constraint is a design tool
"No external images, everything procedural" forced a more technically impressive output than an unconstrained prompt would have produced. Constraints create coherence. The single-file requirement made every dependency explicit.
Using Claude Code for your product or site?
I help early-stage founders ship product faster using Claude Code — landing pages, growth experiments, and full product flows. If you want to talk through how to structure your build or prompt, book a session.
Book a Growth Chat