Artifacts shipping

A side panel that renders.

When Claude builds you a webpage, a React component, a chart, or a Mermaid diagram, the result lands in an Artifact panel — rendered live, editable, exportable. You iterate by talking; the preview updates in seconds. This is the single most underused feature on claude.ai.

The vocabulary.

Five minutes from idea to shippable.

1. Open a fresh chat at claude.ai.
2. Describe what you want in one paragraph: who it's for, what they should do, what mood, what brand colors.
3. Drop a reference if you have one — screenshot of a site you like, a logo, a photo. Claude reads images.
4. Iterate. "Hero too tall, push CTA above fold, swap green for #d97757." The Artifact updates in place.
5. Hit copy at the top of the panel and paste the HTML into your CMS / static site / repo.

Things to ask for first.

• Hero section. "Build a hero for {company}, audience {who}, action {do this}, mood editorial-warm, brand color {hex}."
• Pricing page. Three tiers, monthly/yearly toggle, comparison table.
• Calculator. "Mortgage calculator with sliders for principal, APR, term — display monthly payment and total interest."
• Dashboard mock. "Admin dashboard for a property manager — stat cards, table of tenants, sidebar nav."
• Chart. "Recharts bar chart of monthly revenue 2024 vs 2025, brand color {hex}."
• Mermaid diagram. "Sequence diagram of OAuth flow, four actors."

Deeper walkthroughs live at /design.

Get it out.

• Copy — the canonical button. Pastes the source.
• Publish — claude.ai can publish an Artifact to a sharable URL. Useful for showing someone without sending a file.
• Hand off to Claude Design for prototype-grade refinement.
• Hand off to Claude Code when the artifact graduates into a real codebase.

Related products.

Every Anthropic surface has its own page on this guide.