Artifacts Usage Guide: Generate Code, Diagrams, and Documents On the Spot

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

1. State the type of deliverable you want to create up front.
2. Specify the output format (HTML, Mermaid, React, SVG, etc.).
3. Write the intended use and constraints (who it’s for, colors, sizes, whether libraries are allowed, etc.).
4. 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.

The key is not to ask for a finished product from the start—ask it to create an MVP (minimum viable product).

Create a JavaScript tool in Artifacts that reads a sales CSV and displays the aggregated results.
For the first version, implement only the following:
- CSV upload
- Display total sales and the number of records
- Show an error message when something goes wrong
After that, as improvement ideas, suggest displaying graphs and doing monthly aggregation.

With this kind of request, you can first get a sturdy skeleton that’s less likely to break. It becomes easier to revise than if you ask immediately for a “high-function analytics dashboard.”

Generating Mermaid Diagrams: Strong for Spec Organization and Explanations

Artifacts works particularly well with Mermaid syntax, allowing you to quickly produce drafts of business flows, screen transitions, and sequence diagrams. A practical approach is to provide the content you want to diagram in natural language and have it converted into Mermaid.

Using Artifacts, convert the following application flow into a Mermaid flowchart.
- An employee creates an expense application
- A supervisor approves it or returns it for revision
- Accounting checks it
- If there are no issues, proceed to the payment process
- If the amount exceeds 100,000 yen, add approval by the department manager
For readability, organize the branches and output using Japanese labels.

During review, it’s efficient to check whether any paths are missing or whether there’s exception handling, then issue diff-based fixes in the conversation.

Creating HTML Pages: Reach Agreement on the Screen Before the Document

In the initial stage of requirements definition, discussing in a conversation moves faster with a touchable HTML mock than with long specification documents. With Artifacts, it’s also easy to bundle everything as a single-file HTML, making it easier to handle in internal reviews.

Create an HTML page for a recruitment event announcement using Artifacts.
Conditions:
- Single page only
- Mobile-friendly
- Sections: hero, event overview, speakers, application CTA, FAQ
- Bright impression with plenty of whitespace
- Use natural Japanese text (not filler/dummy text)

In practice, adding the following also improves quality.

• Assumed viewing devices: mostly smartphones, mostly PCs
• Prohibited items: no external CDN, no images, keep animations minimal
• Evaluation criteria: prioritize readability, emphasize CV conversion, keep it solid for internal use

Prototyping React Components

In frontend development, prototyping by component units before building the entire page reduces rework. With Artifacts, it’s convenient to have it output things like cards, modals, tables, and forms as React components.

Create a customer list table component in React using Artifacts.
Requirements:
- Columns: company name, owner/assignee, status, last updated date
- Status shown as colored badges
- Include a search field
- Include an empty-state display
- Tailwind-like look, but use a structure that’s still readable even without dependencies
- Design props with reusability in mind

What’s important here is not only the look but also specifying prop names, state management, empty states, and error states. If you request it at an implementation-near granularity, you can reuse the resulting code directly for prototyping.

Generating SVG Images: Create Lightweight, Easy-to-Edit Assets

For small diagrams or icons, SVG is more convenient than PNG. Since it’s text-based, it’s easier to re-edit, and it’s also easier to embed in documents and on the web.

Create a simple SVG icon representing cloud synchronization using Artifacts.
Conditions:
- 64x64
- Line-art style
- One color in blue tones
- Transparent background
- Cloud in the center, with sync arrows pointing up and down
- Keep it recognizable even at small display sizes

For diagram-style work, requesting not just an icon but a “labeled explanatory diagram” broadens the possible use cases.

Tips for Using Artifacts Effectively: How to “Grow” Your Instructions

• Fix the format first: explicitly specify HTML, Mermaid, React, SVG, etc.
• Make a skeleton in the first pass: prioritize structure over completion quality
• Use diff-based instructions from the second pass onward: e.g., “modify only the header” or “tone down the colors”
• Make constraints concrete: prohibit external libraries, keep it single-file, prioritize mobile, etc.
• Provide review perspectives: readability, reusability, accessibility, maintainability

Best Practices and Cautions

Artifacts is convenient, but it’s risky to drop the generated outputs directly into production. In particular, please have humans verify security, dependencies, exception handling, licensing, and accessibility for the code.

• For code, additionally confirm input validation and error handling.
• For Mermaid diagrams, manually fill in exception branches for business-rule edge cases.
• For HTML/React, re-check responsiveness and how natural the wording is.
• For SVG, view it in multiple environments to confirm display size and contrast.

Also, if you think of Artifacts as an interactive workspace for iteratively developing outputs—not a feature that produces a perfect deliverable in one shot—it becomes easier to use. The strongest workflow is: decide direction in the conversation, build the real artifact in Artifacts, and then refine it again through conversation. That back-and-forth is the most effective way to use it.

If You’re Unsure, Use It in This Order

1. Clarify the objective in the conversation
2. Generate a minimal version with Artifacts
3. Review appearance, structure, and missing points
4. Run diff-based revisions multiple times
5. Finally, have a human polish it for real-world operation

Artifacts is a feature that moves AI from being a mere “answering tool” to a tool for building together. Because you can shape code, diagrams, documents, UI, and images along the same flow of conversation, it’s recommended to start by using it for small prototypes.