Artifacts in Claude Code: The Operator's Guide

On June 18, Anthropic shipped artifacts in Claude Code — the feature that turns a coding session's work into live, shareable web pages. Two days earlier, Claude Design got a major overhaul: design system imports, canvas editing, and a /design-sync command that closes the loop between design and code. Boris Cherny, the creator of Claude Code, called artifacts "a game changer" — and the 5.1K likes suggest he's not alone.

📖 Read the full version with charts and embedded sources on AgentConn →

This is the operator's guide. What shipped, how to set it up, and where it fits in the agent workflow you're already running.

What Actually Shipped: Artifacts in Claude Code

Artifacts are self-contained HTML pages that Claude Code builds from your session context. They're not static exports — they're live, interactive web pages at private URLs that update as your session progresses.

The content types Anthropic listed in the launch blog post:

• 
  PR walkthroughs with embedded diffs


• 
  System explainers and architecture diagrams


• 
  Dashboards you can filter and sort


• 
  Release checklists that fill themselves as work gets done


• 
  Incident pages with live status


• 
  License audits and privacy maps


• 
  Security findings summaries


• Data-flow diagrams

The key difference from web-based Claude artifacts: these are generated from your coding session's context — the files you've touched, the changes you've made, the tests you've run. They're not generic canvases. They're views into the work the agent just did.

Availability: Beta on Team and Enterprise plans. You need to be signed in (/login in Claude Code). Individual plans don't have access yet.

Privacy: Artifacts are private by default. You share them explicitly with teammates, and they're viewable only by authenticated org members. Admins get org-level toggles, role-based scoping, retention policies, and compliance API visibility.

How to Use Artifacts in Claude Code

The setup is minimal. If you're on a Team or Enterprise plan:

1. 
   Sign in: Run /login in your Claude Code session if you haven't already


2. 
   Ask for an artifact: Tell Claude Code what you want visualized — "create a dashboard of test results," "build a PR walkthrough for this diff," or "diagram the auth flow I just changed"


3. 
   Claude builds the page: It generates a self-contained HTML page from your session context


4. 
   Share the link: Click the share button in the page header to give teammates access

There's no separate infrastructure to configure. No Docker containers. No hosting setup. The artifact lives at a private Anthropic-hosted URL tied to your org.

What Works Well

From early operator reports and VentureBeat's coverage:

• 
  PR reviews: A reviewer who doesn't want to clone your branch can see the walkthrough, the diff, and the rationale in one page


• 
  Incident response: Build a live incident page as you debug — stakeholders watch the page instead of asking for Slack updates


• 
  Architecture documentation: System diagrams that generate from the codebase you're actually working in, not a stale Confluence page


• 
  Sprint reports: Weekly shipped-work summaries that pull from the session's git context

What Doesn't (Yet)

• 
  No public sharing. Artifacts are org-only. If you need to share with external stakeholders, you'll still need to export


• 
  No persistent data connections. Unlike the April 2026 "Live Artifacts" in web Claude, Claude Code artifacts reflect session state, not external databases


• 
  Team/Enterprise only. Individual and Pro plans are out — and Anthropic hasn't announced a timeline for expansion

Claude Design: The Other Half of the Story

The artifacts launch didn't happen in isolation. Two days earlier, Anthropic overhauled Claude Design with three features that connect directly to the Claude Code workflow:

1. Design System Imports

You can now bring your design system into Claude Design from GitHub repos, design files, or direct uploads. Once imported, Claude Design generates assets using your components, checks its output against the design system, and makes corrections before you see the result.

2. The /design-sync Command

This is the integration point. From a Claude Code terminal:

/design-sync

This pulls your design system into your repo — or pushes what you've built back into Claude Design. The flow works both directions:

• 
  Design → Code: Start a prototype in Claude Design, hand it off to Claude Code


• 
  Code → Design: Built something in Claude Code that needs visual polish? Push it back to Claude Design for canvas editing

Engadget noted that Anthropic is betting the gap between design and code disappears when the same AI system handles both.

3. Canvas Editing

Users can now drag, resize, and align elements on the Claude Design canvas without asking Claude to regenerate. For small visual tweaks — nudging padding, reordering a layout — you edit directly instead of burning a model turn.

The Operator's Setup Checklist

For artifacts:

• Verify your org is on Team or Enterprise plan


• Run /login in each developer's Claude Code session


• Establish org-level sharing policies (admin panel → Artifacts → Sharing controls)


• Set retention policies for artifact pages

For /design-sync:

• Import your design system into Claude Design (GitHub repo URL → Design system import)


• Run /design-sync in Claude Code to pull the design system into your local project


• Configure export destinations (PDF, PowerPoint, Adobe, Canva, Lovable, Replit, Vercel, Wix)

Real-World Operator Patterns

The "Show Don't Tell" PR Review. Instead of writing a PR description, generate an artifact during code review. The artifact includes the diff, the rationale, and interactive diagrams. Reviewers see the full context without cloning the branch.

The Live Incident Page. When debugging a production issue, build an artifact as you go. Stakeholders bookmark the artifact URL instead of joining a Slack thread.

The Sprint Visibility Dashboard. At the end of a dynamic workflow run — where Claude Code orchestrated multiple subagents — generate an artifact summarizing what each agent did, which files changed, and what tests passed.

The Design Handoff Loop. Start in Claude Design → /design-sync → build in Claude Code → generate artifact for review → push back to Claude Design for polish. The entire loop stays inside one AI system.

Where This Fits in the Agent Stack

Artifacts and design sync are Anthropic's answer to a specific problem: the output of an AI coding session is invisible to everyone who wasn't in the session.

Before artifacts, the operator pattern was: Claude Code does work → developer reviews in terminal → developer writes up results in Slack/Notion/Jira. Artifacts collapse the last step — the work product is the communication artifact.

The Fortune profile of Boris Cherny adds context: the Claude Code creator says there are days he manages tens of thousands of AI agents at once. Artifacts and design sync are the visibility layer for that scale of operation.

What the Competition Doesn't Have (Yet)

Codex, Cursor, and Windsurf are all shipping agentic coding features. None of them have a live artifact system that turns session output into shareable web pages. No other coding agent has a direct pipeline to a first-party design tool that shares the same AI backbone.

The Bottom Line

Artifacts and /design-sync are two halves of the same bet: that the AI coding agent should own the full loop from design to deployment to communication.

For operators already invested in Claude Code, the setup cost is near zero — sign in, ask for an artifact, share the link. The practical question is whether the design-to-code-to-artifact loop becomes your team's default workflow.

Based on Cherny's own usage — "I've been using Artifacts in Claude Code for everything" — Anthropic is clearly dogfooding the full loop. That's usually a good leading indicator.

Originally published at AgentConn