Claude Design Builds Beautiful 3D Websites Instantly (full tutorial)

Summary

The presenter demonstrates how to use Claude Design to turn an existing site or a fresh idea into a polished, animated website, then move the project into Claude Code, GitHub, and Vercel for deployment. He says he rebuilt two sites in about 20 minutes each, preserving their original copy and brand identity while making them more dynamic.

Tutorial Highlights

• Start with a plan: For a new site, the presenter first asks Claude Chat to develop a brand concept, positioning, voice, visual identity, site sections, and draft copy. For an existing site, you can provide Claude Design with its GitHub repository or project folder.
• Create assets and a prototype: In the walkthrough, Claude helps develop a concept for a sleep-drink brand called “Lull.” The presenter uses prompts generated with Nano Banana 2 to create a hero image, then SeaDance 2.0 to animate it into a looping video. He notes that video uploads have a size limit of roughly 30–40 MB.
• Build in Claude Design: He creates a high-fidelity prototype, adds a simple sketch of the hero layout, uploads the video, and provides the brand brief and copy guidance. Claude generates the design system and site. The presenter recommends monitoring the build and stopping it early if it heads in the wrong direction, to avoid wasting usage.
• Find design inspiration: Motion Sites is presented as a source of animated backgrounds and website examples. The presenter used a scroll-based 3D design as inspiration for his AI Automation Society site, adapting the concept to his brand rather than copying it wholesale.
• Iterate visually: Claude Design supports comments attached to specific elements, inline text and size edits, drawing on the canvas to identify areas, and a Tweaks panel for trying options such as colors, fonts, spacing, layout, and headline styling. The presenter says these visual controls can be more efficient than repeatedly prompting and reverting changes. He also notes that the product is in research preview and some interface issues remain.
• Build section by section: For further animation or content, he recommends splitting a site into sections and developing each one at a time. He describes a scroll-linked video effect in which scrolling forward or backward advances or reverses the video frames.

Exporting and Deploying

1. Download the Claude Design project as a ZIP, or use the handoff option to open it in Claude Code.
2. Open the project in Claude Code and ask it to publish the files to a GitHub repository. The presenter recommends checking that the project runs locally before deployment.
3. Connect the GitHub repository to Vercel and deploy it. Subsequent pushes to GitHub trigger Vercel to update the live site.
4. In the example, the first deployment returned a 404 because the site’s entry file was not at the repository root. Claude Code fixed this by renaming the file to index.html.
5. Check the mobile layout separately. The presenter found the initial layout was not mobile-friendly and says Claude Design and Claude Code do not automatically optimize for mobile. They need explicit instructions to adjust the design for different screen sizes.

Usage Limits and Prompting Advice

• Claude Design has its own usage quota, separate from other model usage. The presenter says larger builds, repeated iterations, and design-system creation can consume it quickly; Opus 4.7 is more costly than lighter models.
• To conserve usage, he recommends giving Claude clear context up front—such as a sketch, brand specification, assets, and explicit requirements—so the first result is closer to the target. He suggests considering a wireframe before a high-fidelity build and using a lighter model, such as Sonnet 4.6, for less demanding work.
• Other tips include making one major visual change per prompt, specifying what to avoid, using concrete references rather than vague requests, and using canvas comments and drawings to clarify edits.
• A design system can be exported and reused in Claude Code. If a design session becomes very long or unproductive, he suggests exporting the project and continuing in a fresh session or in Claude Code.
• Projects can also be exported to formats or tools such as Figma, Canva, and PowerPoint.

Main speaker/source: Nate Herk, presenter of the tutorial. Additional inspiration source mentioned: Aiden, who introduced him to Motion Sites.