What Are Artifacts: A Feature for Separating “Deliverables” from the Conversation
Claude’s Artifacts is a feature that displays long-form text, code, diagrams, HTML, UI components, and more in a separate work area from the chat panel, where you can generate, edit, and review them right away. In regular conversations, responses tend to scroll by and get buried, but with Artifacts, you can manage the “final deliverable” independently.
As of 2025, its strength goes beyond just text output: you can run code previews, generate Mermaid diagrams, create HTML pages, prototype React components, and generate SVG images end to end. In particular, this is a practical way to refine deliverables while you work out the specifications in the conversation.
What You Can Do with Artifacts
| Purpose | Deliverables That Fit Well | Where It Helps in Practice |
|---|---|---|
| Code creation | Python/JavaScript/SQL, etc. | Prototyping, splitting functions, confirming bug-fix approaches |
| Diagram/chart creation | Mermaid flowcharts, ER diagrams, sequence diagrams | Requirements clarification, design reviews, procedure documentation |
| Document creation | Meeting minutes, specification documents, proposals, README | Drafting, reorganizing chapter structure |
| Web page prototyping | Single-page HTML/CSS/JS | Landing page (LP) drafts, mockups for internal tool screens |
| UI prototyping | React components | Dashboard, form, and card UI exploration |
| Image generation | SVG icons, simple explanatory graphics, banner skeletons | Illustrations in documents, logo ideas, explanatory diagrams |
The Basic Workflow to Remember First
- State the type of deliverable you want to create up front.
- Specify the output format (HTML, Mermaid, React, SVG, etc.).
- Write the intended use and constraints (who it’s for, colors, sizes, whether libraries are allowed, etc.).
- After sending it to Artifacts, improve it with diff-based instructions.
A common mistake beginners make is asking the first request too abstractly. With Artifacts, specifying clearly “what to create and in which format” reduces the number of revisions later.
Basic Prompt Example
Create the top screen of an internal task management tool using Artifacts.
Format should be a single page of HTML/CSS/JavaScript.
Required elements: header, search box, in-progress task list, assignee filter, deadline alerts.
Design: simple, blue and gray palette, Japanese UI.
First, create a working prototype, and then propose three improvement points.Running Code Previews: Make a “Working Minimal Version” First
The value of Artifacts is not only that it displays code, but that it can shorten the modify-and-review cycle by letting you preview while you iterate. Especially for JavaScript and frontend-related work, it’s often faster to see the screen and behavior than to read specifications in text.
