Claude Code now builds live dashboards, diagrams, and shareable pages. Plus Claude Design syncs to your codebase. Here's the setup.
On June 18, Anthropic shipped [artifacts in Claude Code](https://claude.com/blog/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](https://www.techrepublic.com/article/news-anthropic-claude-design-overhaul-enterprise-teams/): 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"](https://x.com/bcherny/status/2067700226669060207) — and the 5.1K likes suggest he's not alone.
> 📖 [Read the full version with charts and embedded sources on AgentConn →](https://agentconn.com/blog/claude-code-artifacts-claude-design-sync-operator-guide-2026)
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.
[](https://x.com/bcherny/status/2067700226669060207)
[Artifacts](https://claude.com/blog/artifacts-in-claude-code) 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:
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.
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 p