Master Claude’s Artifacts: Your Ultimate Guide to Winning

It has been a year since Claude unveiled the Artifacts feature. Designed for professionals, this functionality opens a dedicated workspace that facilitates project progression while providing real-time visibility into its evolution. It has been one of Anthropic’s most successful implementations, so much so that it has been emulated by most of its competitors. Here is an explanation of how Artifacts function.

What is the Purpose of Artifacts in Claude?

Introduced by Anthropic with the release of Claude 3.5 Sonnet, Artifacts display specific AI-generated results in a dedicated window, separate from the main conversation. For instance, when a user requests substantial content (like a document, code, a spreadsheet, or a diagram), Claude can create an Artifact: an interactive space where the result is presented in a clear, editable, and standalone format. This window opens to the right of the interface and acts as an editable preview. It is designed to provide a smoother experience, particularly for complex or collaborative projects.

The generation of Artifacts is automatic, provided the content is rich or structured enough. Once an Artifact is created, users can request targeted modifications, track revisions in the discussion thread, or export the outcome.

Artifacts on Claude: Interface and Activation

Dedicated Space for Artifacts

Initially, there was no dedicated space for Artifacts. However, since June 2025, such a space has been established and is accessible via the menu on the left side of the interface. Here, you can find sources of inspiration as well as a list of Artifacts you have created. A “New Artifact” button also lets you initiate a new project.

Artifacts can also be created directly within a standard conversation on Claude. The conversational agent will assess whether your request warrants activating this feature, but you can also explicitly prompt it to do so.

Various Spaces in Claude’s Artifacts

Artifacts on Claude are divided into two main areas. The first, on the left side, serves as the request field, where you can ask for modifications.

The right side is the visualization area, where you can monitor the progress of the work performed by Claude in real time. This section includes:

• Visual display: This allows you to see the output provided by Claude.
• Code display: If your request involves coding, Claude will provide a space next to the visual display to access the code.
• Sharing button: You can copy the result or generate a sharing link.

How to Use Artifacts: Example with a Coding Task

Artifacts can be incredibly useful for a variety of tasks: drafting complex documents, generating data tables, and creating interactive plans or diagrams. Below, we demonstrate how to use this tool for coding tasks, which is particularly well-suited for this feature.

Building a Website Using Artifacts

To test the tool’s capabilities, we ask it to undertake a coding task. We will use Artifacts to design a website using only natural language. Here are the specifications for the site we want to create:

• The site represents a fictional frog fan club named “Frogs & Company,”
• A single page with a pastel green background and a sans-serif font,
• A brief introduction described in the prompt,
• Three distinct sections.

As we progress, we can provide Claude with more specific instructions.

Interacting in the Code Section

In the code editor, Claude allows two types of interactions:

• Enhance: A page opens directly in the code editor so you can specify what you want to update in the particular section you’ve identified. Your iteration request will be processed in natural language.
• Explain: Claude provides a natural language explanation of the selected code snippet, directly in the request field on the left.

Requesting Modifications in Natural Language

The essence of Artifacts is their ability to continuously enhance your work while offering a real-time view of its tangible progress. In our example, we ask Claude to integrate the following changes:

• Add a frog icon at the top of the page,
• Ensure the main title changes hue every three seconds with a fading effect,
• Add text in the footer.

Claude accurately addresses each request.

To expand further, we ask Claude to create two additional pages linked to the home page:

• A “Our Members” page, incorporating specific profiles described in the prompt,
• A “Join Us” page, with contact details (email, phone number, link to the Facebook page).

Here, Claude creates two new Artifacts: one for each page. The new pages adhere to the requirements, although Claude makes some creative additions.

Requesting Modifications on Existing Code

Artifacts facilitate the creation of a website from scratch. But can they also assist in enhancing already existing code? In the example below, we send Claude a source file of a website created for the fictional agency Altura Conseil. We request some modifications.

Again, Claude naturally opens an Artifact and integrates the requested changes. It’s possible to export the output in HTML format or continue making modifications.

Artifacts on Claude: Creating AI Tools

During the summer of 2025, a major update was announced: Artifacts can now incorporate AI capabilities. Essentially, it is now possible to create applications equipped with artificial intelligence using only natural language, without coding. Claude can thus generate interactive projects, such as games or customizable tools, by leveraging its own API.

To create AI tools, head to the Artifacts space on Claude and make sure to check the “Activate this feature” option under “Power Your Artifacts with the Claude API.” Then simply start a conversation with Claude and submit your request. Iterate until you achieve the desired version.

In the example below, we design a detective game. The AI allows the user to fully customize the game’s universe. After some modifications, our game is ready.

To test the game, we choose the “Brittany Coast” setting. This setting is evocative and suitable for developing a narrative universe. However, it is too specific to be predefined by Claude. The generated game, for example, meets our expectations: “In the scarlet tides of Ploumanac’h, Madame Yvonne Kerguelen is found unconscious at the foot of the Devil’s Castle rocks. She is taken to the hospital, where she falls into an unexplained coma.”

Each turn, we choose our action. No predefined actions are offered; the AI adapts entirely to our proposals and ensures to scatter some clues.

If you are interested in the detective game, you can access it below. However, you will need a Claude account to play, and it will use the user’s credits, not those of the game designer.

Play the Detective Game