How Claude Artifacts Worked: A Look at a Reported System Prompt

I find Claude's Artifacts feature distinctive. A purported leak of the Claude 3.5 Sonnet system prompt gives us a chance to examine how its artifact instructions are structured. I think formatting prompts clearly can improve outputs, and this long set of instructions offers examples to study; the prompt alone, however, does not establish every part of the feature's implementation.

The text describes artifacts as substantial, self-contained content that users may modify or reuse, displayed in a separate window. To show what that means, I ask Claude to write Snake in Python. The code appears in a separate pane, while the conversational explanation stays in the chat.

I also paste my DaVinci Resolve keyboard settings and ask what the text is about. Claude puts the pasted material in a separate file that I can open, keeping the full text out of the conversation window.

The reported prompt says good artifacts include substantial content, such as material longer than 15 lines, that the user may edit, own, use outside the conversation or reference repeatedly. Self-contained code, reports, emails and presentations fit that idea. Short snippets, equations, small examples and ordinary commentary generally do not.

The usage notes favor one artifact per message unless the user requests more, and encourage inline responses when a separate artifact would be unnecessary. The text also says that if someone requests an SVG or website, generating the appropriate artifact can fulfill the request.

I ask Claude to draw a GPU as an SVG. It writes the code and shows a preview; the image is not great, but the code and preview are together. I then ask for a simple GPU sales website. Claude generates code and a preview while keeping the explanation in the chat.

I can reopen the website artifact, refresh it, copy or download its contents and publish it. The reported prompt also suggests offering an SVG for an image request. At the time of this video, I still use ChatGPT frequently for DALL-E images and wish Claude had comparable image generation and an Android app.

The instructions return to a theme: consider whether the content would work without an artifact. They ask the assistant to briefly evaluate the request using an 'antThinking' tag, and to decide whether to make a new artifact or update an existing one. I wonder what that tag means; my interpretation is speculation.

For an update, the reported instructions say to reuse the prior identifier. New artifacts receive a descriptive identifier in kebab-case and a title. The output is wrapped in artifact tags and assigned a content type, such as code or a document, so the interface can handle it appropriately.

The listed types include HTML and SVG. The prompt describes restrictions on web images and external scripts in this setting and says ordinary HTML or CSS examples should be shown as source code when rendering would obscure the source. It also gives an alternative type when the requirements for a rendered page cannot be met.

Mermaid diagrams are another supported type. I ask for a diagram of a GPU-selling website and Claude produces Mermaid code for it. The instructions also cover React components and available libraries; I skip the details but notice that some restrictions are emphasized or repeated.

For updates, the instructions call for the complete revised artifact without placeholders such as 'the rest of the code remains the same.' That appeals to me because partial code updates can be awkward to merge, while reprinting an entire file in chat repeatedly takes space and time.

The prompt contains examples of the assistant evaluating whether a request merits an artifact. I guess that the thinking tag may be a separate place for intermediate reasoning, but I cannot verify that from the text alone. The examples illustrate structured decisions, followed by the artifact itself.

Finally, the reported instructions say not to mention the artifact syntax unless relevant, and include a restriction on highly hazardous artifacts alongside a consistency rule for content Claude would provide as text. My broader takeaway is that a structured prompt with criteria, examples and output conventions can help guide an assistant's behavior.