AI Tools Resource

A 3D website in Claude Design — a checklist

Steps from a description to a published site with a moving background and 3D elements in Claude Design — with check points and the spots where your limit leaks away. Open it while you work and tick things off.

This is the version to keep at hand. Open it while you put a site together in Claude Design and tick off the steps — from the idea, through the background and revisions, to publishing. Every point starts with a verb and you can check that it's actually done.

The guiding rule in one sentence: the more context you give at the start, and the more revisions you make in the tweaks panel instead of through new prompts, the less usage you burn.

0. Before you start

  • Confirm you have a paid plan — Claude Design won't run on a free account.
  • Remember three terms that come back below:
  • Render — showing the page the way a visitor will see it.
  • Token — the chunk of text the model operates on; usage is counted in tokens.
  • Opus 4.7 — the model Claude Design runs on (stronger image understanding than earlier versions).
  • Decide which path you're starting from: rebuilding an existing site or starting from an idea (see step 1).

1. Choose your starting path

  • If you already have a site whose code sits in a GitHub repo or a folder on disk, hand it to Claude Design — that's the rebuild path, keeping your colors, copy and brand feel.
  • If you're starting from an idea, talk to plain Claude first and ask for a spec: what the product does, how the hero section should sound (hero — the first screen a visitor sees), the brand's position and style.
  • Confirm Claude returned a finished description — name, character, color palette, list of sections — and keep it to paste into Claude Design as your starting point.
  • Give as much context as possible up front: the more now, the fewer revisions later (and revisions burn the most tokens).

2. Prepare the background and sketch the layout

  • Ask Claude for an image description that fits the brand.
  • Generate an image from that description in a separate tool, then turn it into a looping video a few seconds long.
  • Confirm the camera doesn't move in the background — it should be a calm, looped animation that text can sit over comfortably.
  • Watch the video file size: Claude Design accepts video up to roughly 30-40 megabytes, so a clip several dozen seconds long won't fit.
  • Sketch the layout right in the tool — mark where the background goes, where the hero text sits, where the nav and logo are. It doesn't need to look good; it just needs you and the model looking at the same thing.
  • Attach the video file, paste the brand spec, and describe what should get built in one prompt.
  • Watch how the model starts — it shows its reasoning and a task list. If it heads the wrong way, stop it right away instead of letting it build something you don't need (every step costs).

3. Revise on the preview, not through prompts

In Claude Design you see a working preview of the site and revise it directly on it. That's the biggest difference from writing code through prompts.

  • Comment on an element. Click a specific button or heading and describe the change — the model gets an exact pointer to which element you mean.
  • Edit in place. Delete a piece, change the text or its size; the change happens live.
  • Circle it and add a note. Select an area and add a comment, e.g. that the transition between sections is too abrupt.
  • Use the tweaks panel for look-and-feel experiments — the sliders on the right. Test the color palette, font, heading size, spacing between sections and the hero layout in real time with them, instead of sending a separate prompt for every version.
  • Leave in the panel only what you approve.
  • When you're out of ideas, ask the model to propose what could be added and what's worth trying.
  • For inspiration you can check motionsites.ai (a library of backgrounds and scenes): copy the description of a scene you like, hand it to Claude Design, and ask it to swap in your own video, copy and colors. Treat an example like that as a starting point, not something to copy wholesale.

4. Publish the site

Only you see the preview itself. For the site to be reachable on the internet, run it through publishing.

  • Download the project from Claude Design as a ZIP package.
  • Open the package in Claude Code (the tool where Claude works on files and commands).
  • Push the project to a GitHub repository and connect that repo to a hosting service (e.g. Vercel) — GitHub stores the files, Vercel serves them on the web at an address.
  • Check the site locally first, opening it at a localhost address, before publishing anything. Remember localhost is visible only on your own machine — sending that address to someone won't show them your site.
  • If you see "404 — not found" after the first deploy, rename the main file to index.html. The usual cause: hosting looks for a start file in the root folder, and yours has a different name.
  • Either way, you can describe the problem to Claude Code and ask for a fix.
  • Keep working on two versions from here: revise the working copy locally, and once changes are ready, push them to GitHub — hosting picks them up automatically and updates the live version.

5. Fit it to phones

  • Remember that Claude Design and Claude Code don't adapt the site to phones automatically — it's built for a desktop screen.
  • Check how it looks on a phone in the browser: press F12 and switch to mobile view.
  • Only once you ask for a mobile-friendly layout will the model rebuild it. The desktop version won't suffer for it.

6. Watch the limit

Claude Design has its own weekly limit, separate from a regular session's. It can run out fast: on the $20/month plan, one larger site plus one brand system can nearly close it out; on the top plan there's room for several sites and video projects. Treat these numbers as an order of magnitude from the paid plans, not official figures.

Most usage leaks away when you do everything with the priciest model, when you build a brand system with no good starting point, and when you revise a site through a long back-and-forth of prompts. Hence habits worth checking off:

  • Match the model to the stage. Save Opus 4.7 for planning and bigger changes; a lighter Sonnet 4.6 covers most of the building, if you describe precisely what you want.
  • Make one visual change per prompt. Cram several big changes into one prompt and the model usually gets one or two right and skips the rest.
  • Say what you don't want too, and point to specifics. "Denser, in the style of 2023 interfaces" works better than "make it nice."
  • Open a fresh session on long threads. When a project drags on with no result, export it and reopen it — you're revising a finished piece on fresh context, not starting from zero.
  • Export once the rest is simpler by hand. You can take the whole project out as a ZIP or into other tools (Figma, Canva, PowerPoint) and finish small details there.

What to watch for

  • An unstopped model. If it heads the wrong way, stop it right away — every unnecessary step costs tokens.
  • Oversized or moving video. Keep the background under roughly 30-40 MB, and the camera in the footage should hold still, no motion.
  • A localhost address sent to someone. It's visible only on your own machine; sending it won't show anyone your site.
  • "404" after deploy. Usually a missing index.html in the root folder — rename the start file.
  • Assuming it fits phones. The site won't adapt to phones on its own; check it and ask for the fit separately.
  • Revising through prompts instead of sliders. Do look-and-feel tests in the tweaks panel — every version sent as a prompt is a separate request and render.
  • Copying a ready-made example verbatim. Scenes from motionsites.ai are a starting point, not something to copy wholesale.

When the limit in Claude Design runs out and you want to keep working, export the project to Claude Code and continue there — it has its own separate usage. Once the Design limit resets, you go back to it.