Claude Artifacts Prompts: 34 Templates for Building and Iterating

TL;DR: Claude artifacts prompts work best when you stop re-describing the whole thing. Anthropic documents when an artifact appears, which content types exist, and what publishing exposes. Ask for one build, then ask for one targeted change at a time. Below are 34 copy-paste prompts plus the documented limits.

What is a Claude artifact, and what makes one appear?

An artifact is a standalone piece of content Claude puts in its own window beside the chat, so you can edit it, version it and reuse it. Anthropic's help centre article What are artifacts and how do I use them?, dated July 22, 2026 and accessed September 2, 2026, publishes the criteria Claude uses:

It is significant and self-contained, typically over 15 lines.

It is something you're likely to want to edit, iterate on, or reuse outside the conversation.

The other two criteria are that the content stands on its own without extra conversation context, and that it is something you are likely to refer back to later. That is the whole documented trigger. Note what it is not: there is no published keyword, no toggle in the composer, no documented phrase that guarantees an artifact.

In practice, asking directly works most of the time. Say build this as an artifact and you usually get one. Anthropic documents that direct request only for the Claude Code surface, where the docs say Claude may publish one on its own or you can ask for one directly. For chat, treat the explicit ask as a reliable habit rather than a documented guarantee, and label it that way in your own notes.

When Claude answers inline and you wanted an artifact, the usual cause is the first criterion: the output was short. Fifteen lines is the published threshold, and a nine-line snippet is a reply, not an artifact. Asking for the same thing with more surface, such as a worked example and an empty state, often flips it. That is an observation from use, not a documented rule, and it is the sort of thing worth checking against the help centre rather than against a blog post that has not been touched since 2024.

One prerequisite is documented and easy to miss. The same article says artifacts without Code execution and file creation enabled are no longer supported. On Free, Pro and Max that toggle lives in Settings, then Capabilities. On Team and Enterprise an Owner sets it in Organization settings.

What can an artifact be, and what can it not do?

The help centre lists six common artifact types: documents in Markdown or plain text, code snippets, single-page HTML websites, SVG images, diagrams and flowcharts, and interactive React components. That list is your menu. Anything outside it is a request for something else, usually a downloadable file, which is a different feature.

The limits are where most posts start inventing. Here is what is actually published, and where.

For artifacts published from Claude Code, Anthropic documents the sandbox precisely. The page is wrapped in an HTML shell served under a strict Content Security Policy. Typefaces load from Google Fonts, scripts load from four public CDN hosts, and, in the docs' own words, "The CSP blocks every external image and all other external scripts, stylesheets, and fonts". The same table states "An artifact is a static page." and that "Relative links do not resolve, because nothing is deployed alongside the page." Rendered size caps at 16 MiB.

For artifacts built in Claude chat, Anthropic publishes no equivalent table. There is no list of available libraries, no CSP description, no version numbers. The closest published statements are the July 25, 2025 announcement, which listed "No external API calls (yet)" as a limitation, and the current storage specification, which says storage is "Text-only input—no images, files, or binary data" with a 20 MB limit per artifact. Everything else you read about the chat artifact sandbox, including confident lists of exactly which React libraries are bundled, is somebody's observation. It may well be right. It is not documented, and it changes.

That "docs disagree" cell is not hedging. The help centre article says artifacts are available in Claude Code on Team and Enterprise plans. The Claude Code documentation says artifacts are available on Pro, Max, Team and Enterprise plans, and repeats it in its availability table. Both pages are live and both are Anthropic's. Check your own plan rather than trusting either sentence.

Do artifacts exist on the Claude API?

No, and this is the distinction most write-ups get backwards. The Messages API reference on platform.claude.com contains no mention of artifacts at all. There is no artifact parameter, no artifact content block, no way to ask the API to return one.

Artifacts do appear in the developer docs, but only as governance. There are Admin analytics endpoints for artifact activity, and Compliance API endpoints that retrieve artifact metadata, download artifact content, and list and delete Claude Code artifacts. Every one of them is administrative access to artifacts that already exist inside Anthropic's own products. If you are building on the API and want an interactive page, you are writing and hosting that yourself.

So the correct mental model: an artifact is a product surface in claude.ai, Claude Desktop, Claude Code and Cowork. It is not a model capability you can call.

Why does re-describing an artifact give you a different program?

This is the craft point, and it is worth more than any single template below.

When you ask for a change by restating what you want, you have not asked for a change. You have written a new specification, and Claude builds against the new specification. The colour scale you wanted fixed gets fixed, and the date parser you spent four turns getting right quietly becomes a different date parser. Nothing errored. The artifact still runs. It is just not the same program any more, and you will find out three days later.

There is a second reason this happens, and it is not the model's fault. A long conversation contains several conflicting descriptions of the same artifact, written at different moments as you changed your mind. Re-describing adds another one. Naming a single change adds no new description at all, which is exactly why it holds.

The skill is asking for a targeted change: name the one thing that moves, name what must not move, and say explicitly that everything else stays identical. Same reason your coding assistant rewrites files you never mentioned, which is a whole failure mode of its own.

1. The targeted change

Change only the colour scale in the chart to a colourblind-safe sequential palette.
Do not touch the data parsing, the axis logic, the tooltip, or the layout.
Everything outside the palette definition should be byte-for-byte identical to the
current version. Tell me which lines you changed.

2. The change budget

I want three changes to this artifact and nothing else:
1. Sort the table by date descending instead of alphabetically.
2. Make the header sticky on scroll.
3. Round the totals to whole numbers.
Do not refactor. Do not rename anything. Do not add features I did not list.
If any change requires touching something outside its own area, stop and tell me first.

3. The freeze list

Before you edit anything: list the parts of this artifact that are currently working
and that I should protect. I will confirm the list, and after that treat every item
on it as frozen unless I explicitly unfreeze it.

Follow-ups are their own skill, and the general principles apply here too: see follow-up prompts that actually improve the answer.

What are the best prompts for a working single-file tool?

A tool artifact is the highest-value thing you can build here: a calculator, a converter, a checklist, a small form-driven utility. Give it inputs, outputs, and a stated behaviour for bad input.

The failure to avoid is asking for the tool and the data model in one breath. Say what goes in, what comes out, and what happens when the input is wrong, and you will spend far fewer turns.

4. The tool spec

Build an artifact: a single-page tool that converts a pasted CSV of expenses into a
monthly summary.
Inputs: a textarea for CSV, a currency selector, a month picker.
Output: a table of totals by category plus a grand total.
Behaviour on bad input: show a specific error naming the row and column, never a blank
screen and never a silent zero.
Keep everything in one file. No build step.

5. The empty state first

Build the same tool, but design the empty state before the populated state. When there
is no data, show what the tool expects: a two-row sample CSV, a one-line explanation of
each column, and a button that loads the sample so I can see the output shape.

6. The keyboard-first utility

Build an artifact: a quick-entry time tracker. Every action must be reachable from the
keyboard alone. Enter starts and stops the timer, Escape clears the current entry,
and arrow keys move between rows. Show the shortcut next to each control.

7. The state-in-URL trick

Build an artifact: a pricing calculator with four sliders. Encode the current slider
values in the URL hash and read them back on load, so I can copy the URL and send
someone the exact configuration I am looking at.

8. The one-screen constraint

Build an artifact for a decision checklist with twelve items. Hard constraint: it must
fit on one 1280x800 screen with no scrolling. If twelve items will not fit, tell me
what you would cut rather than adding a scrollbar.

How do you turn pasted data into a visualisation?

The pattern that works: paste the data first, ask what is in it, then ask for the chart. Charting data Claude has not inspected is how you get a beautiful chart of the wrong column.

9. Inspect before charting

Here is my dataset. Do not chart it yet. Tell me: how many rows, which columns, the
type and range of each column, how many nulls, and which two columns you would plot
against each other and why.

10. The chart with a stated question

Build a chart artifact that answers exactly one question: does support ticket volume
rise in the week after each release? Pick the chart type that answers that question
best and say in one line why you rejected the alternatives. Label the axes with units.

11. The explorable version

Turn that chart into an interactive artifact: a date-range filter, a series toggle,
and a hover tooltip showing the exact value and the row it came from. Keep the data
inline in the file. Do not fetch anything.

12. The honest-axis rule

Rebuild this chart with these rules: y-axis starts at zero unless I say otherwise,
no dual axes, no 3D, and no more than six series before you switch to small multiples.
If the data violates a rule, tell me rather than working around it silently.

What prompts work for a document you will iterate on?

Markdown documents are the one artifact type with a documented in-place edit. The help centre describes highlighting text, clicking "Edit with Claude", and typing your request, so Claude edits exactly where you marked instead of guessing which section you meant.

13. The document with structure declared up front

Create a Markdown artifact: a one-page incident review. Sections in this order: summary,
timeline with timestamps, contributing factors, what we are changing, what we are not
changing and why. Write the headings first with a one-line placeholder under each, and
show me the skeleton before you fill it in.

14. Section-scoped rewrite

Rewrite only the "Contributing factors" section. Cut it to under 150 words and remove
every sentence that assigns blame to a person rather than a system. Leave every other
section untouched.

15. Two versions, side by side

Produce two artifacts of this announcement: one for engineers, one for customers.
Same facts, same dates, different assumed knowledge. Do not soften the customer version
into vagueness. Where the engineering version names a component, the customer version
names the consequence.

16. Tone pass without content drift

Change tone only. Make this less formal and cut the hedging. Do not add information,
do not remove any claim, and do not reorder sections. If a sentence cannot be made less
formal without changing its meaning, leave it alone and tell me which ones.

How do you prompt for a diagram that is actually readable?

Diagrams and flowcharts are on Anthropic's documented list, and SVG is a supported artifact type. The trick is describing the mechanism, not the picture.

17. Mechanism first

Build an SVG artifact diagramming how a request moves through our stack: browser, edge
cache, app server, database, background queue. Show what happens on a cache hit versus
a miss as two distinct paths. Label every arrow with what is being passed, not just
an arrowhead.

18. The decision flow

Build a flowchart artifact for "should this bug be hotfixed or wait for the next
release". Every decision node must be a yes/no question with a concrete threshold, not
a judgement call. Terminal nodes must name the action and the owner.

19. The legibility pass

Change only the layout of this diagram. Nothing may overlap, no line may cross more than
once, and every label must be readable at 50% zoom. Keep the same nodes, the same edges
and the same text.

What about landing pages and UI components?

Single-page HTML websites are a documented artifact type, so a landing page or a component preview is squarely in scope. It is also where people burn the most turns, because "make it look better" is not a change request. If you are picking a tool for this job specifically, artifacts sit alongside dedicated builders like Lovable.

20. The page with a stated job

Build a single-page landing artifact for a plumbing business in one city. The page has
one job: get a phone call. Above the fold: what they do, the area they serve, and a
tap-to-call button. No carousel, no testimonials slider, no newsletter signup.

21. The component states matrix

Build an artifact showing one button component in every state: default, hover, focus,
active, disabled, loading, and with a long label that wraps. Lay them out as a labelled
grid so I can compare them at a glance.

22. Constrain the design, not the taste

Rebuild this page using only these tokens: two font sizes, one accent colour (#1a4d8f),
an 8px spacing scale and a 6px radius. If a section needs something outside that set,
leave it out and tell me what you would have added.

23. Responsive without a rewrite

Make this page work at 375px wide. Change only layout rules: stacking, spacing and font
scale. Do not change the copy, the colours or the order of the sections.

How do you prompt for a game or an interactive demo?

Games are the classic artifact demo and the classic trap. State the win condition and the loss condition before anyone writes any logic.

24. Rules before code

Before building anything: write the complete rules for a two-player grid game in under
200 words. Include the win condition, the draw condition, what happens on an illegal
move, and how a turn ends. I will approve the rules, then you build the artifact.

25. The demo with a reset

Build an interactive artifact demonstrating how binary search narrows a range. A slider
sets the array size, a field sets the target, and stepping forward highlights the current
window. Include a reset button that returns everything to the initial state.

26. The difficulty dial

Add one difficulty control to this game with three settings, and change nothing else.
Tell me exactly which variables each setting changes and what the values are. Do not
touch the rendering, the input handling or the scoring.

How do you rewrite an artifact without losing what worked?

You will not get it right in one shot, and the version selector is documented for exactly that reason: Anthropic's article describes switching between versions with a version selector, and editing a prior chat message to branch into a different set of artifacts. These are the prompts for the messy middle.

27. Diff the versions

Compare the current version of this artifact with the version from three turns ago.
List what changed, grouped as: things I asked for, things you changed as a consequence,
and things that changed for no reason I gave you.

28. Restore one part

The layout from two versions ago was better than the current one. Restore only that
layout. Keep the current data handling, the current labels and the current colours.

29. Extract before rewriting

Before you rebuild this, extract the parts worth keeping into a labelled list: each
function or block, what it does, and whether it is currently correct. Then rebuild using
those pieces verbatim wherever possible, and tell me which ones you could not reuse.

30. Explain the change before making it

Do not edit yet. Describe the change you are about to make in three sentences: what
moves, what it touches, and what could break. If your description surprises me I will
stop you.

31. The escape hatch

Stop iterating on this artifact. Give me the current code in a plain code block so I can
save it outside the conversation, then we start a fresh artifact from that code.

Does an artifact that runs mean the artifact is right?

No. It means the page did not throw on load. Those are very different claims, and the gap between them is where people ship broken tools to their team.

Rendering proves nothing about a duplicate name, a leap-year date, a negative number, an empty upload, a single-row dataset, a name with an apostrophe in it, or text that is not Latin script. Claude will happily produce a tool that handles all your example data perfectly and falls over on the second real input. Test it yourself, in the preview, before anyone else sees it.

A useful habit: before you share an artifact with anyone, use it once the way an impatient stranger would. Paste the wrong thing in. Leave a field blank. Click the button twice. Most of what you find in that minute would otherwise have been found by a colleague, in public.

There is a documented helper for the failures that do surface. The help centre describes a "Try fixing with Claude" button beside an error, which copies the error details into a new message, and it is honest about the odds: "While Claude will attempt to fix the error, success isn't guaranteed."

32. Ask for the edge cases

List every input that would break this artifact. For each one: the input, what happens
now, and what should happen. Do not fix anything yet. Rank them by how likely a real
user is to hit them.

33. The adversarial pass

You are reviewing this artifact as someone trying to break it. Give me ten inputs you
would try first, and what you expect each one to do. Include empty, enormous, duplicate
and non-English cases.

34. The assumptions audit

List every assumption this code makes about the data: column order, date format, encoding,
row count, uniqueness, timezone. Mark which ones I have actually confirmed with you and
which you inferred from the sample.

What does publishing an artifact actually expose?

This section exists because the answer is bigger than people expect, and Anthropic states it plainly.

On sharing within an organisation: "When you share an artifact, viewers also gain access to any attachments and files in the conversation that created it." If you built the artifact in a chat where you pasted a customer list, sharing the artifact shares more than the artifact.

Publishing is also close to one-way. The article says: "Once you unpublish an artifact, you cannot publish that same artifact again." Unpublishing permanently deletes any persistent storage the artifact used, both personal and shared. If you built a tracker that people have been filling in, unpublishing throws the data away.

Two more documented details worth knowing before you share anything:

• Sidebar behaviour. "Artifacts you create in a conversation don't appear in your sidebar automatically." You have to publish one to file it in the Artifacts section.
• MCP is per-user. Each user must authenticate MCP servers independently, even on a shared or published artifact. Your connections do not travel with the page, which is a privacy feature and a support burden at the same time.

Where this fits in a prompt library

None of these templates are single-use. The targeted-change prompt, the freeze list and the edge-case audit are the three you will reach for on every artifact you ever build, and retyping them from memory is how they degrade into "make it better".

Save them with the variable parts marked, so the tool name, the data shape and the frozen list swap out per project. Prompt Architects does that with variables and a shared library, and it plugs into Claude two ways: the extension runs on claude.ai, and the MCP server connects to Claude Desktop, Claude.ai and Claude Code. The free plan includes 5 prompt enhancements per day, forever, according to our FAQ page. We generate the prompt; Claude builds the artifact.

Two adjacent reads if you are working with Claude specifically: XML tags in Claude prompts for structuring the build prompt itself, and what changes when you move a prompt from ChatGPT to Claude.

Sources

All Anthropic pages accessed September 2, 2026.

• What are artifacts and how do I use them?, Anthropic Help Center, dated July 22, 2026: https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them
• Publish and share artifacts, Anthropic Help Center, dated July 22, 2026: https://support.claude.com/en/articles/9547008-publish-and-share-artifacts
• Custom visuals in chat and Cowork, Anthropic Help Center, dated April 22, 2026: https://support.claude.com/en/articles/13979539-custom-visuals-in-chat-and-cowork
• Use live artifacts in Claude Cowork, Anthropic Help Center: https://support.claude.com/en/articles/14729249-use-live-artifacts-in-claude-cowork
• Share session output as artifacts, Claude Code docs: https://code.claude.com/docs/en/artifacts
• Build and share AI-powered apps with Claude, July 25, 2025: https://claude.com/blog/claude-powered-artifacts
• Compliance API artifact endpoints: https://platform.claude.com/docs/en/api/compliance/apps/artifacts