The whole thing fits on a whiteboard
This is literally what was on my whiteboard:
That's it. No design degree. No code. You're going to talk to Claude like you'd talk to a designer, and these three things make sure it actually listens.
Here's why each one matters:
Impeccable stops Claude from building the same beige, purple-gradient, card-in-a-card website every AI builds. It gives Claude a design vocabulary.
GPT Image 2.5 or Seedance 2.5 gives your site real visuals. Without them, Claude reaches for stock photos and empty boxes, and your site feels flat and boring.
Three.js is what makes it feel premium. Real 3D, smooth scroll, transitions that make people stop and screen-record.
One thing you need before any of this: Claude Code. It lives in the Claude desktop app and in your terminal. Download link is in the resources at the bottom.
Step 1: One skill, not 50 (Impeccable)
Stop collecting skills. You need one. Impeccable is free, open source, and has over 70,000 stars on GitHub. Its own tagline says it best: "The missing design vocabulary for agents."
Here's what it actually does for you:
- It gives you options before it builds. Ask it to design something new and it shows you a few visual directions first. You pick one. Then it builds that. No more "I hate it, start over" after 20 minutes of waiting.
- It gives you design words. Around two dozen commands (24 in the README right now) that point Claude in the right direction. "Make it bolder." "Tone it down." "Fix the fonts." "Add motion." Each one is a whole design playbook behind one word.
- It catches AI slop. A built-in detector with 61 checks for the stuff that screams "a robot made this": the tiny label above every heading, italic serif headlines, beige everything, gradient text, cards inside cards.
How to install it
Open Claude Code and paste this one line:
Install this skill for me: https://github.com/pbakaus/impeccable
Claude reads the repo and runs the official installer for you. When it's done, restart Claude Code.
Prefer to do it yourself? Two options, both straight from the official site:
Inside the Claude Code chat, paste this (one line):
/plugin marketplace add pbakaus/impeccable
Then type /plugin, choose Discover, and install Impeccable.
Or in your Terminal, open your project folder and run (one line, needs Node.js 22.18 or newer):
npx impeccable install
It asks which coding tool you use and whether to install for this project or all of them. Pick Claude Code, then reload Claude Code.
Then run this once per project
/impeccable init
It asks who your website is for and what those people need to do. Answer like you're talking to a new employee. It saves your answers to a file called PRODUCT.md and reads it before every design job after that.
If it asks how new designs should start, pick mockup first. That's the mode that shows you picture comps of each direction before it writes a line of code. It's the one I use.
The design words that matter most
You type /impeccable plus the word, plus what you want it on. Like /impeccable polish the pricing section. Here are the ones I actually use:
That's the whole workflow: generate a few directions, pick the best one, then refine it with design words. You never have to know what "vertical rhythm" means. Impeccable does.
Step 2: Give it real visuals (GPT Image 2.5 or Seedance 2.5)
A website without real visuals feels flat. Period. This is the step most people skip, and it's why their AI site looks like a template.
GPT Image 2.5 (images)
OpenAI released it on September 8, 2026. In ChatGPT it's called ChatGPT Images 2.5. In the API it comes as two models: Flare (fast, the everyday default) and Sunburst (slower, more precise). I used it for every single image on the sites in my reel: hero shots, architecture photos, portraits, textures, and the silhouettes that power the particle effect (more on that below).
Three ways to get it:
- Higgsfield (easiest if you also want video). GPT Image 2.5 and Seedance 2.5 live in the same account. Sign up here: higgsfield.ai
To let Claude use it directly, connect Higgsfield to Claude: in the Claude app go to Settings, then Connectors, then Add custom connector. Name it Higgsfield and paste this URL:Click Connect and sign in to Higgsfield. Now Claude can make the images itself while it builds.https://mcp.higgsfield.ai/mcp
- ChatGPT (zero setup). Images 2.5 is on every ChatGPT plan, free included (with limits). Make your images there, download them, drop them into your website folder, and tell Claude "use the images in the img folder."
- The OpenAI API (what I did). Claude writes a tiny script that calls GPT Image 2.5 directly. You need an API key from platform.openai.com. Put it in a
.envfile in your project. Never paste an API key into the chat.
The one tip that changes everything: clean plates
Never ask the image model to write your headline or draw your buttons. It'll garble the text and you can't edit it later. Generate clean plates: the photo, the scene, the texture, with zero text. Then Claude puts real, editable type on top in code. Every prompt below is built this way.
Bonus trick: ask for a transparent background and you get a cutout (a person, a product, a building) that Claude can layer and float for a parallax effect.
Seedance 2.5 (video)
Seedance 2.5 is ByteDance's newest video model. You give it one of your GPT Image stills and it turns it into a moving shot. I took a still of a library GPT Image made for me and turned it into a slow cinematic push-in with people walking through it. Drop that behind your headline and your hero goes from nice to "wait, how did you do that?"
Where to get it:
- Higgsfield: Seedance 2.5 is live there, same account as GPT Image 2.5. higgsfield.ai
- Arcads: also has Seedance 2.5 inside its Claude connector. My Arcads connector guide is linked in the resources.
Two things nobody tells you:
- Keep it short. 5 to 8 seconds is plenty for a background. It loops.
- Kill the sound. Seedance 2.5 can generate audio, but browsers only autoplay background videos when they're muted. Your hero video is silent. That's normal.
Step 3: Animate it (Three.js)
This is where "nice website" becomes "$10K website." Smooth scroll. Real 3D. Transitions that feel like an Apple product page.
Three.js is a free library that draws real-time 3D right in the browser. No Blender. No 3D artist. Claude writes it for you.
Claude also pulls in two helpers:
- GSAP ScrollTrigger: ties animations to your scroll. Scroll down, the 3D camera moves, the text reveals, the scene changes.
- Lenis: makes scrolling buttery smooth instead of choppy.
You don't install any of this. Claude loads all three from a free public CDN with one line of code each. Nothing to download, nothing to set up. You just say "use Three.js" in your prompt.
One gotcha: if you double-click your index.html and the 3D part is blank, it's not broken. Browsers block some 3D features on files opened straight from your computer. Tell Claude: "Serve it on localhost and open it for me." Done.
Then you send one prompt
Once you have the skill and an image tool connected, this is the exact prompt from the reel:
Use the /impeccable skill to design a premium website for my architecture studio. Give me 3 directions, then build the one I pick. Create every image with GPT Image 2.5 and turn the hero into a video with Seedance 2.5. Use Three.js for real 3D, scroll animations and smooth transitions.
That's it. Every other prompt below is for when you want to push harder.
Copy-paste prompts
The reel prompt, for any business
Change the brackets. Leave everything else alone.
Use the /impeccable skill to design a premium website for my [TYPE OF BUSINESS]. Give me 3 directions, then build the one I pick. Create every image with GPT Image 2.5 and turn the hero into a video with Seedance 2.5. Use Three.js for real 3D, scroll animations and smooth transitions. About the business: [ONE SENTENCE ON WHAT YOU DO]. Who it's for: [YOUR CUSTOMER]. The one thing I want visitors to do: [BOOK A CALL / BUY / CALL US / JOIN].
The "go all out" version
This is the long version of what I actually sent Claude to build my sites, rewritten so it works for any business. Use it when you want Awwwards-level, not just "nice."
Use the /impeccable skill to design and build a premium, award-level website for [BUSINESS NAME], a [TYPE OF BUSINESS] that helps [CUSTOMER] get [RESULT]. The main action I want visitors to take: [ACTION]. THE GOAL The most jaw-dropping, animation-rich website you can build. Every section needs a wow moment, the hero most of all. Someone should want to screen-record it. Show me 3 directions first, then build the one I pick. HOW IT SHOULD FEEL Premium and professional, not gimmicky. Think Apple product pages, Stripe, Linear, Awwwards Site of the Day. The sophistication comes from craft: typography, grid, lighting, motion, 3D quality, and restraint in the copy. No puns, no costume props, no themed button labels. Buttons say what they do. REAL 3D Use Three.js for real 3D in the hero and at least two more sections. It must look like a studio made it: proper lighting, soft shadows, antialiasing, no cheap default-material look. Smooth 60fps on a laptop. Pause the 3D when it's off screen. Lighter settings on phones, but still impressive. SCROLL AND MOTION Use GSAP ScrollTrigger and Lenis smooth scroll. The 3D should respond to scroll like a directed camera telling a story, not just spin. The mouse adds a subtle parallax. Headlines reveal line by line. Numbers count up. Buttons feel magnetic. One signature motion idea per section. Never the same fade-up on everything. Add a short, elegant preloader (under 2.5 seconds). IMAGES AND VIDEO Create every image with GPT Image 2.5. First make one "north star" image of the hero to set the art direction, then build to match it. Generate clean plates only: no headlines, no buttons, no text inside images. Put real text on top in code. Open and check every image after you make it and redo any weak one. Turn the hero image into a short, slow, muted background video with Seedance 2.5. SECTIONS 1. Hero: business name, a killer headline, one line explaining what we do, main button plus a second button. 2. The problem: why the old way is broken, as a dramatic scroll-driven reveal. 3. What we do: our services, each with its own presentation. 4. How it works: 3 simple steps. 5. Proof: leave clearly marked placeholders like [ADD REAL REVIEW] and [ADD REAL RESULT]. Do not invent testimonials, numbers, or client names. 6. A quiet moment: one bold line alone in a big empty space. 7. FAQ: the 5 questions customers always ask. 8. Final call to action: big and clear. 9. Footer. HARD RULES - Mobile first. It must look designed at phone width (390px), not just "not broken." No sideways scrolling at any size. - No em dashes anywhere. Use periods, commas and colons. - No AI tells: no tiny labels above headings, no gradient text, no grids of identical icon cards, no 01/02/03 section numbers, no emoji icons. Avoid the fonts every AI site uses (Inter, Space Grotesk, Playfair, DM Sans, IBM Plex, Instrument Sans). - Content must be visible even if animations fail. Respect "reduce motion" settings. - Fast: compress images, lazy-load everything below the first screen. WHEN YOU'RE DONE Serve it on localhost and open it for me. Screenshot every section on a laptop size and a phone size, fix everything you find in one pass, check once more, then show me the result and list the signature animations.
Refinement prompts (the design words)
Once it's built, don't start over. Refine. One at a time, look, then the next.
/impeccable critique the whole site. Tell me the 3 biggest problems, then fix them.
/impeccable polish the whole site. Keep the colors and the 3D. Remove every AI tell.
/impeccable bolder the hero. It's too safe. Bigger type, more drama, keep it professional.
/impeccable quieter the services section. Too much going on. Let it breathe.
/impeccable animate the "how it works" section. One signature motion idea, not a fade-up on everything.
/impeccable overdrive the hero. Make the 3D feel technically extraordinary. Keep 60fps on a laptop and a lighter version on phones.
/impeccable typeset the whole site. Better font pairing, clearer hierarchy, comfortable reading width.
/impeccable layout the page. Fix spacing and rhythm so every section feels intentional.
/impeccable adapt the site for phones. Test it at 390px wide and make it feel designed for mobile, not squeezed.
/impeccable audit the site before I ship it. Speed, mobile, accessibility. Fix everything you find.
GPT Image 2.5: hero image template (clean plate)
This is built from the real prompts that made the photos on my architecture site. Swap the first sentence for your business.
[DESCRIBE THE SCENE: e.g. "The exterior of a modern dental clinic at golden hour, floor-to-ceiling glass, warm interior light, a calm tree-lined street"]. Professional editorial photograph for a premium brand website. Shot on a medium-format camera, eye-level or slightly elevated viewpoint, verticals perfectly straight. Soft natural light, gentle soft shadows, calm muted palette of [2 TO 3 COLORS FROM YOUR BRAND]. Realistic material detail, crisp but not oversharpened, true-to-life color, subtle film grain. Leave clean open space on the [LEFT / RIGHT] side for a headline. No text, no signage, no lettering, no logos, no watermark.
Settings: landscape (1536x1024), high quality for the hero.
The silhouette for the particle effect (this is the exact style that powers my 60,000-particle site):
A clean solid black silhouette of [A SINGLE PERSON STANDING / YOUR PRODUCT / A BUILDING], full shape visible, centered, filling about 88 percent of the image height. Pure flat #000000 silhouette with crisp sharp edges on a pure flat #ffffff white background. No shading, no gradients, no ground shadow, no floor line, no texture, no text.
Seedance 2.5: turn that still into a hero video
Upload your GPT Image hero as the start image, then use this. With image-to-video, describe the motion, not the picture. The model can already see the picture.
Slow cinematic dolly push-in toward [THE MAIN SUBJECT]. Subtle, natural motion only: [e.g. a few people walking slowly in the background, leaves moving gently, soft light shifting]. Stable geometry, straight vertical lines, the architecture and objects do not warp or morph. Smooth, steady camera with no camera shake. Keep the lighting and colors of the original image. No text, no logos, no captions. 5 seconds, 16:9, suitable for a seamless looping website background.
"Less gimmicky, more premium"
True story. My first round of sites was a money-printing factory, a noir film poster, and a giant banknote. Fun. Also way too gimmicky. This is basically what I told Claude next, and round two is where the good stuff came from.
This is too gimmicky. Make it feel more professional and premium, while keeping insane animations and real 3D. Think Awwwards Site of the Day, Apple product pages, Stripe, Linear. The sophistication should come from craft: typography, grid, lighting, motion curves, and 3D quality. Not from props, costumes, or puns. Remove the gimmick layer: no themed button labels, no puns, no costume props. Buttons say what they do. Section names are plain and confident. The personality lives in form, material, light and motion, not in themed wording. Copy voice: direct, confident, calm. Short sentences. Honest, no hype. Plain enough for a 45-year-old small business owner to get instantly. Keep real Three.js 3D in the hero and at least two more sections, with studio-quality lighting, smooth 60fps, and lighter settings on phones.
"I love this one. Give me 3 more."
When one direction hits, don't settle for it. Make it the floor.
I love this version. Make 3 variations of it. Study it first and keep everything that makes it great: [THE 2 OR 3 THINGS YOU LOVE, e.g. "the 3D particle hero, the scroll story, the clean grid"]. Each variation must be at least as good as the original. Change [WHAT YOU WANT EXPLORED, e.g. "the color world, the typography, the hero concept"]. Build each one in its own folder. Never delete or overwrite the original.
What I built with this
One brief. Ten website concepts. Two that made me say "that's insane." Both are demo sites for made-up businesses. No clients, no revenue numbers, nothing invented. Just what the stack can do.
How the particle trick works (no code, promise)
- GPT Image 2.5 draws a black silhouette on white. A person, a skyline, a shape. That's the prompt in Prompt #4.
- The page reads every black pixel and turns it into a point. Tens of thousands of them. Now that silhouette is a cloud of dots in 3D space.
- Each shape is a "target." Person, crowd, skyline. Same dots, different positions.
- Scrolling moves the dots from one target to the next. Your graphics card does the math, which is why 60,000 points still run smooth. A "curl noise" effect makes them swirl like liquid on the way, instead of just sliding.
That's the whole secret. An image model draws the shape. Three.js turns it into something alive. You just describe it.
Want it? Add this to any prompt:
Build the hero as one Three.js particle system. Use GPT Image 2.5 to make solid black silhouettes on white for each shape: [SHAPE 1], [SHAPE 2], [SHAPE 3]. Sample the black pixels into particles and morph between the shapes on scroll with a GPU shader and curl noise. Mouse movement ripples the particles. Lighter particle count on phones.