Claude Artifacts: What They Are, How to Use Them, and 10 Examples (2026)

By Marcin, founder of Markloop · Last verified October 2026

What counts as an artifact

Claude's help center says it creates an artifact when the content is "significant and self-contained, typically over 15 lines", and is something you'll likely "edit, iterate on, or reuse outside the conversation". A two-line answer or a quick list stays in the chat. A report, a chart or a tool you'll keep using becomes an artifact.

In the Claude app, an artifact can be a document, a code snippet, a single-page website, an image, a diagram or flowchart, a dashboard or a small interactive tool. On paid plans you can also start from three templates (beta): Docs for documents you write with Claude and your team, Slides for presentations that export to PowerPoint or PDF, and Design for mockups, prototypes, one-pagers and landing pages.

An artifact can also call Claude itself, which turns it into a small AI app: a writing coach, a quiz that grades free-text answers, a chatbot for one document. There are no API keys, and when you share it, usage counts against each viewer's own plan limits, not yours. One catch: an artifact that uses Claude can't be shared with "Anyone with the link".

In Claude Code, an artifact is one web page that the session publishes to a private claude.ai URL and keeps updating as it works. Anthropic's launch post gives examples like "an incident page that grows as you investigate and becomes the postmortem" and a PR walkthrough reviewers can follow.

How to create a Claude artifact

In the Claude app

1. Check the setting once. Artifacts need Cloud code execution and file creation turned on in Settings > Capabilities. On Team and Enterprise, an Owner controls it in Organization settings > Capabilities.
2. Ask for the thing, not the topic. "Build an interactive budget calculator with sliders for rent, food and savings" gets you an artifact. "Tell me about budgeting" gets you a chat reply. If Claude answers in the chat anyway, add "as an artifact".
3. Iterate by asking. "Make the chart a bar chart and add a total row." Each change updates the artifact in the panel. In artifacts made from a template you can also edit directly, and in a doc you can highlight a passage and use Edit with Claude to change only that part.
4. Or start from a template. Open the Artifacts tab and pick Docs, Slides or Design (beta, paid plans; on Enterprise an Owner turns each template on first).
5. Find it later. Everything you make is saved to the Artifacts tab in the sidebar, so you can reopen it from any conversation.

In Claude Code

1. Check you can publish. Artifacts in Claude Code need a Pro, Max, Team or Enterprise plan and a session signed in with /login, in the CLI or the desktop app. Sessions running on an API key, Amazon Bedrock, Google Cloud or Microsoft Foundry can't publish, and neither can orgs with customer-managed keys (CMEK), HIPAA or Zero Data Retention turned on. On Team and Enterprise, artifacts are on by default and an Owner can turn them off for the org. In the desktop app you need version 1.13576.0 or later.
2. Ask in plain language. For example: "Make an artifact that walks through this PR with the diff annotated inline." Claude writes the page to an HTML file, publishes it and opens the new claude.ai link in your browser. It asks you first only in plan mode, or when the page calls connectors or offers file downloads.
3. Keep it current. "Add a per-region breakdown below the summary chart and republish." The page updates at the same URL, and each publish becomes a version you can pick from the Share menu.
4. Find it again. Run /artifacts in Claude Code, or open your gallery at claude.ai/code/artifacts. Ctrl+] reopens the session's most recent artifact.
5. Share it from the Share control in the page header. Who you can share with depends on your plan (next section).

Claude Code can also start from the templates. Run /slides with a brief for a deck, or /design with a brief like "a settings screen for a mobile banking app" and Claude drafts artboards on one canvas and publishes them as a Design artifact.

The kinds of artifacts, and who can see them

The plan-by-plan rules (roles, email invites, Owner settings) change often, so we keep them in one place: who can comment on a Claude artifact. For what happened to the third column, see Claude live artifacts.

10 Claude artifact examples you can copy

The best artifacts are things that are easier to look at or click through than to read. Here are ten that work well, each with a prompt you can paste as is. The first seven work in the Claude app; the last three are Claude Code patterns from Anthropic's docs.

1. An interactive calculator

Pricing, ROI, a loan, a budget. Anything with inputs and a result is a good first artifact, because you see the value in seconds.

Build an interactive pricing calculator as an artifact: sliders for number of seats and billing period, a monthly and yearly total, and a line that says which plan is cheaper.

2. A dashboard from your data

Attach a CSV or paste a table and ask for charts. Much faster to read than a summary paragraph, and you can ask for a different cut in the next message.

Here's our Q3 sales export. Build a dashboard artifact with revenue by month, the top 5 products, and a filter by region.

3. A one-page proposal or report

Turn rough notes into a document a client can read. For the full loop, from first draft to the client's comments to v2, see how to write a client proposal with AI and how to write a client report with AI.

Turn these call notes into a one-page client proposal: the problem, scope, timeline, three pricing options and next steps. Keep it scannable.

4. A slide deck

Use the Slides template (paid plans) when you need a deck that exports to PowerPoint or PDF.

Make a 6-slide deck from this project update: goal, what shipped, metrics, risks, decisions we need, next month. One idea per slide.

5. A flowchart or diagram

Processes, org charts, system maps. A diagram you can ask Claude to rearrange beats one you drag around by hand.

Draw our signup flow as a flowchart artifact, from landing page to first project, and mark the steps where most users drop off.

6. A landing page or mockup

A single-page site to test a message, or a mockup to show a designer what you mean. The Design template is built for this.

Design a landing page for a dog-walking app: hero with one headline and one button, three benefits, pricing, FAQ. Clean and friendly, mobile first.

7. A quiz or flashcards

A classic for learning: Claude writes the questions and builds the tool that scores you.

Make a 20-question quiz artifact on the causes of World War I. Show one question at a time, score me at the end, and explain every wrong answer.

8. A PR walkthrough (Claude Code)

Reviewers read your reasoning next to the code instead of piecing it together from a description.

Make an artifact that walks through this PR. Render the diff with margin annotations and color-code findings by severity.

9. A progress checklist that updates itself (Claude Code)

For long tasks: anyone with the link can follow along without reading the terminal.

Turn this migration plan into a checklist artifact. Check items off as you complete them and add a note for anything you skip.

10. A dashboard with live data (Claude Code)

The page calls your claude.ai connectors each time someone opens it, using the viewer's own account, so it shows current data instead of a snapshot. You can share it publicly, but people who open the public link without signing in to your org see the page without its live sections.

Build a dashboard artifact of our open pull requests that pulls the live list through my GitHub connector when the page loads.

Tips for better artifacts

• Name the output and the reader. "A one-page summary for a client who hasn't seen the project" gets a better page than "summarize this".
• Give it real data. Paste the numbers, attach the file, or in Claude Code point it at the repo. Artifacts built on placeholder data need a second round anyway.
• Change one thing per message. Small, specific edits ("move the total above the chart") keep the rest of the page stable.
• Set your brand once. In Claude Code, list your colors, fonts and spacing in the project's CLAUDE.md. Claude's docs say it treats your design system as higher precedence than its own choices.
• Ask for a standalone HTML file if the page has to live outside Claude. Claude Code artifacts already inline their CSS and images and load scripts only from a few public CDNs, so the file renders the same wherever you open it. The exceptions are live connector data and download buttons, which only work on claude.ai.

Some teams now write plans and specs as HTML pages instead of Markdown for the same reasons. More on that in HTML is the new Markdown.

The limits people hit

1. Sharing and comments stay inside Claude. Every commenter needs a Claude account, and a public Claude Code link can't take comments. When a client or outside expert has no Claude account, the discussion moves to Slack, email and screenshots. (To share outside your org, see how to share Claude artifacts outside your organization.)
2. One page, no backend of your own. Per the docs, a Claude Code artifact "is a capture of work: one self-contained page with no backend". No multiple routes, no login of its own, and a 16 MiB size cap. External images are blocked, and scripts load only from a few public CDNs.
3. Retention. On Team and Enterprise, admins can auto-delete artifacts on a schedule, so an artifact URL isn't a safe place to keep a deliverable.

Claude artifacts vs ChatGPT and Gemini

Other assistants have their own version of "make me a page, not a reply". The closest matches today:

More on OpenAI's version in ChatGPT Sites explained, and a side-by-side of every option in AI agent artifact sharing compared.

Sharing an artifact and getting comments on it

Inside your team, the built-in Share button is usually enough: see who can comment on a Claude artifact for the rules on your plan. The gap is people outside Claude, such as a client, an agency or an outside expert.

For them, publish the HTML file instead of sharing the artifact link: save or export it as HTML (the FAQ below shows how), then ask Claude: "Publish this artifact to Markloop and give me a link I can send to the client." They comment in the browser without a Claude account, Claude pulls the comments in, and the next version goes up at the same link. For who can see your link and where your data lives, see the Markloop FAQ.

FAQ

Related: Who can comment on a Claude artifact · Claude live artifacts · How to share Claude artifacts outside your organization · Artifact sharing options compared · ChatGPT Sites explained