Claude Design
Projects & Artifacts — Claude's creative canvas
Build interactive apps, documents, diagrams, and visuals you can edit live. Organize work into Projects with shared knowledge, and shape Claude's voice with custom styles.
Total per person
$24.15
The big picture
Claude's creative canvas
Artifacts turn Claude's output into something you can see, use, and edit live. Projects keep your work organized with shared knowledge and instructions. Together they're how you build and create with Claude.
Live preview
Substantial output opens in a side panel you can see rendered — not buried in chat scroll.
Interactive apps
Ask for a calculator, dashboard, or tool and get a working React app you can click and use.
Diagrams & visuals
Generate flowcharts, charts, and SVG graphics, then refine them by talking.
Documents
Formatted docs, slide outlines, and downloadable files — drafted and edited in place.
Publish & share
Turn an artifact into a link anyone can open. No Claude account required to view.
Projects
Bundle chats, files, and custom instructions into a reusable workspace per topic.
Your roadmap
From first artifact to interactive apps
Learn to create, then organize, then build genuinely useful interactive things.
Make something you can see
- 1
Ask for something substantial
In a normal chat, ask for content with structure — “make a one-page resume,” “build a simple budget calculator,” or “create a flowchart of this process.” Claude opens it as an Artifact on the right. - 2
Watch it render
Code runs, documents format, and diagrams draw in the preview panel. You see the finished thing, not just the source. - 3
Iterate by talking
Say “make the header blue,” “add a column for dates,” or “shorten the summary.” The artifact updates in place — no copy-paste. - 4
Switch between preview and code
Use the tabs at the top of the panel to flip between the rendered Preview and the underlying Code or markup. - 5
Copy or download
Use the panel controls to copy the content or download it as a file when you're happy.
If you don't see an artifact
Keep it handy
Quick reference
Working with artifacts
| Control | Where | Does |
|---|---|---|
Preview / Code | Top of panel | Toggle between rendered output and source. |
Edit | In the panel | Tweak directly, then send back to Claude to refine. |
Publish | Share button | Create a public link others can open. |
Copy / Download | Panel menu | Grab the content or save it as a file. |
Versions | Panel history | Step back to an earlier take of the artifact. |
One Project per job
Separate knowledge and instructions keep results on-target.
Custom styles
Teach Claude your voice from a writing sample.
Iterate in place
Refine artifacts by conversation, never copy-paste.
Describe interactions
Say what should happen on click, not just how it looks.
Ask for variations
Compare layouts and styles side by side.
Publish to share
Send a link; viewers don't need an account.
Common questions