Back to the guide
Claude Design · showcase

Three things Claude Design madefrom a single prompt each.

Each of these is the raw HTML/CSS/JS file Claude Design exported — no editing, no follow-up prompts. Try them live, then grab the source.

01 · A rotating D3 orthographic globe, as a loading spinner

Globe Loader

Real country geometry from Natural Earth, orthographic projection rotating at 36°/s, three dashed orbital rings spinning in opposite directions. The whole thing is 200px by 200px.

The prompt

Prototype a loading indicator that shows the globe spinning with real country outlines, full monochrome, no text, 200×200 centered on off-white background. Add a whirl effect around it.

02 · Five interactive WebGL animations

Shader Wallpapers

Liquid chrome, aurora, plasma lattice, neural orb, refraction glass. Cursor warps the field; click drops a shockwave. All five shaders, UI chrome, and keyboard shortcuts included.

The prompt

Imagine you’re creating a wallpaper for a futuristic operating system. We want it to feel interactive and fun to fidget with. Create five different interactive shader wallpapers that react to mouse position, and maybe clicks.

03 · A live editor that conjures weather out of words

Text Particle Effects

Type “fire” and it burns. Type “electric” and lightning cracks through it. Thirteen trigger words (fire, smoke, water, ice, electric, gold, shadow, leaves, sand, rain, snow…), each with bespoke CSS styling and canvas particles.

The prompt

Create a very large editable text box, pre-filled with sample text. For certain words like "Fire", "Smoke", "metal", "wind", render visual + particle effects that match the word.

04 · In the wild

Videos

People are already making things with Claude Design worth watching. Here's one from Peter Yang.

@petergyang on X

Peter Yang's walkthrough of Claude Design.

View on X