Creating Practical Outputs with Artifacts
Summary — Key Takeaways from This Lesson
- Artifacts is a feature that displays and retains code, documents, and graphics generated by Claude in a side panel separate from the conversation window.
- Generated Artifacts can be previewed, edited, and copied directly within the conversation, shortening your work loop.
- Supported content types include code, SVG, HTML, Markdown, and React components, among others.
- Artifacts can be reused across conversations, and within Projects, they can be referenced from any conversation in the same project.
- Available on Claude.ai Web and the desktop app. You can also publish a shareable link to share with your team.
目次 (6)
What Are Artifacts?
In a normal conversation, code and long-form documents generated by Claude get lost in the flow of the chat. Artifacts pins those outputs to a panel on the right side of the conversation, allowing you to review and revise them in parallel while continuing the conversation.
For example, if you ask "Create the HTML for a login screen based on this spec," the generated HTML code appears in the side panel, where you can switch between a browser preview and the source code in tabs and iteratively refine it with instructions like "Make the button blue" or "Add an error message."
Supported Content Types
The main content types supported by Artifacts are as follows (source).
- Code (Python, JavaScript, TypeScript, Ruby, etc.) — displayed with syntax highlighting
- HTML — viewable directly in the preview tab
- SVG — graphics visible in the side panel
- Markdown — formatted documents with a preview
- React components — run interactive UIs right in place
How to Use It
- Log in to Claude.ai and start a normal conversation.
- Enter a prompt requesting an output, such as "Write the code for ○○" or "Create a spec document for ○○."
- When Claude determines the output is suitable as an Artifact, it automatically appears in the right panel.
- Use the "Copy," "Download," or "Edit" options in the panel.
- Give additional instructions in the conversation to update the Artifact on the spot.
- Click the "Share" button to generate a view-only link and share it with your team.
Integration with Projects
As explained in Level 2-5 "Projects," Artifacts generated within a Project can be referenced and used across conversations in the same project. For example, you can save a style guide as an Artifact and then instruct a new conversation to "follow the style guide from before."
What It Can and Cannot Do
Artifacts is a feature designed to organize Claude-generated content for readability and improve reusability. Operations that directly execute code and modify systems fall outside the scope of Artifacts; those tasks are handled by Computer Use (the next lesson) and Claude Code. Artifacts is purely focused on streamlining generation, review, and sharing.
Reference: Detailed Article
An overview of all Claude features, including Artifacts, is also covered in "What Is Claude? The Complete Guide".
