Step 01
Access Claude Design
1
Open claude.ai on a desktop browser
Use Chrome, Safari or Firefox on a Mac or PC. Claude Design is not available on mobile — desktop only.
2
Make sure you have the right plan
Claude Design requires a Pro, Max, Team or Enterprise subscription. Free accounts do not have access.
3
Find the palette icon in the left sidebar
Look for a small paintbrush or palette icon on the left nav bar. Click it to open Claude Design. If you don't see it, wait a day — it's rolling out gradually.
4
Choose High Fidelity and name your project
Select High Fidelity (not Wireframe) for a polished, fully styled result. Type a project name and click + Create.
Step 02
Build Your Prompt
Copy the template below into the chat box on the left side of Claude Design. Fill in the bracketed sections with your own topic and ideas, then press Enter. The more specific you are, the better the result.
Create a single-page website about [YOUR TOPIC HERE].
Make it visually stunning, animated and immersive.
AESTHETIC:
Describe the vibe — dark or light, minimal or bold, what colors,
what fonts, what feeling you want the visitor to have.
Example: Pure black background, electric blue accents, cinematic feel.
HERO SECTION:
What should visitors see first? A big title? A tagline? A moving
object? Describe it.
Always include: "Animate the title dramatically on load."
SECTIONS (list 3–4 as you scroll down):
For each section write what it shows and what mood it creates.
Example: Section 2 — Large stats that count up when scrolled into view.
INTERACTIVE ELEMENTS:
What can people do? Hover effects? Clickable cards? Parallax
scrolling? Animated counters? Tell it exactly what you want.
CLOSING SECTION:
How should the page end? A call to action? A powerful quote?
A glowing button?
ALWAYS END YOUR PROMPT WITH THIS LINE:
"Smooth scroll between sections. Scroll-triggered animations on
every section. Make it feel alive, cinematic and beautiful."
Step 03
Refine It
After Claude generates the first version, keep chatting in the left panel to improve it. Here are prompts that work well:
Looks too static?
"Make everything more animated — more motion, more particle effects, more scroll-triggered transitions. Everything should feel like it's breathing."
Colors or contrast look off?
"Increase the contrast on all text. Make headings brighter and body text more legible against the background."
Want it more cinematic?
"Make all transitions between sections slower and more dramatic. Add a subtle zoom effect as each section enters the viewport."
Something specific looks wrong?
Just describe it exactly — "the hero text is too small", "the cards need more spacing", "the button doesn't stand out enough." Claude will fix it.
Step 04
Export and Share
When you're happy with the result, hit the Export button in the top right corner of Claude Design.
- Standalone HTML file — open in any browser, works offline
- PDF — great for screenshots and sharing as an image
- Canva — sends the design to Canva for further editing
- Internal URL — share with your team directly
Bonus
Pro Tips
- Always pick High Fidelity — Wireframe is just a skeleton with no styling
- The first version is a starting point, not the final result — always refine
- Be specific. "Dark blue glowing button" beats "nice button" every time
- You can upload reference images to guide the style of your design
- If it generates something you love, export it immediately before making more changes