Claude Code 支持 artifacts，可将会话工作转为可共享的实时页面

Starting today, Claude Code can capture work progress as an artifact , which turn Claude Code's work into live, shareable visual pages— including PR walkthroughs, system explainers, dashboards, and release checklists—that update themselves as your session works.

A Claude Code session can range from investigating an incident to refactoring a service to analyzing months of data. Artifacts translate the work into a web page anyone can open and explore, like a pull request walkthrough, a dashboard you can filter and sort, or even a release checklist that fills itself out as work gets done. Artifacts make it easier to collaborate on shared work, so teams can spend more time building and less time communicating status updates.

Built on the context from your session

Claude Code builds an artifact using the full context of your session, including your codebase, your connectors, and the conversation itself. A single incident page can bring together the failing test and the function behind it from your code, the error spike from a connected monitoring tool, and the root-cause reasoning from the session you just ran. With artifacts, you don't need to wire up data sources or stand up infrastructure. You ask for a page, and Claude Code builds it from what already exists.

Live pages that update in place

When Claude Code updates an artifact, the open page refreshes in place and teammates see the updates the moment they’re published. Every publish is a new version at the same link, with version history so you can restore at any time, and a gallery lets you browse and manage all artifacts you've made.

From our internal testing, one of our most common use cases has been debugging. These typically look something like: An engineer kicks off an incident investigation before standup. Claude Code works through the logs and publishes an artifact: a timeline, the suspect commits, and an error-rate chart. She shares the link with her team from the page header. By the time standup begins, Claude has republished it twice as the investigation progressed, incorporating the latest information. With artifacts, team members and stakeholders don’t have to "walk us through what the agent found" because they're all looking at the same view, with the same context.

Private to your organization

Every artifact is private to its author by default. When you're ready, share it with your teammates and your organization directly from the page. Artifacts are viewable only by authenticated members of your org and cannot be made public. Admins manage access with an org-level toggle and role-based scoping, set retention policies, and get org-wide visibility through the compliance API.

Getting started

Ask your session for an artifact — or just ask for something visual, h ere are some ideas by role:

Legal / open source : A license audit of every dependency, flagging copyleft, straight from the repo. "Build an artifact listing every third-party dependency and its license, flagging anything copyleft."

Privacy : A data-flow map of where personal data is collected, stored, and logged across the code. "Trace where we touch personal data across the codebase into an artifact for the privacy review."

Security : Findings that link to the exact line, so the fix is unambiguous. "Build an artifact of the auth findings from this review, each linked to the code."

FinOps / platform finance : Cloud resources and cost drivers mapped from your infrastructure-as-code. "Map our cloud resources from the Terraform into an artifact, grouped by service, with the big cost drivers."

Software engineers : A PR or bug walkthrough reviewers can actually follow, pulled from the diff and the code around it. "Make an artifact walking through this PR — the diff, the reasoning, and what I tested."

Designers & frontend engineers : Several UX directions for a screen, each built from your real components so the one you pick is shippable. "Give me an artifact with 5 UX variations of this signup form, built from our component library."

Staff engineers & architects : A map of how a service actually fits together, drawn from the real import graph instead of a whiteboard. "Map how the payments service fits together into an artifact, from the code."

SRE & on-call : An incident page that grows as you investigate and becomes the postmortem. "Turn this incident into an artifact — timeline, suspect commits, error spike from our monitoring — and republish as I work through it."

Engineering managers : A page of what actually shipped, built from the merged PRs. "Build an artifact of what merged on my team this week from the PRs, grouped by project."

Claude Code builds the page and gives you a link. Open it in your browser or the desktop app, share it from the header—updates publish to the same URL automatically.

Availability

Artifacts is available in beta to Claude Team and Enterprise orgs, from the Claude Code CLI and desktop app, with pages viewable in any browser.

Explore more product news and best practices for teams building with Claude.

Customize Claude Code with mods

Product announcements Customize Claude Code with mods Customize Claude Code with mods Customize Claude Code with mods Customize Claude Code with mods Sep 30, 2026 Claude for Government is now generally available

Product announcements Claude for Government is now generally available Claude for Government is now generally available Claude for Government is now generally available Claude for Government is now generally available Sep 25, 2026 Build plugins for Claude

Product announcements Build plugins for Claude Build plugins for Claude Build plugins for Claude Build plugins for Claude Sep 23, 2026 Claude Marketplace: one place to discover plugins, agents, and services from our partners

Product announcements Claude Marketplace: one place to discover plugins, agents, and services from our partners Claude Marketplace: one place to discover plugins, agents, and services from our partners Claude Marketplace: one place to discover plugins, agents, and services from our partners Claude Marketplace: one place to discover plugins, agents, and services from our partners Transform how your organization operates with Claude

Product updates, how-tos, community spotlights, and more. Delivered monthly to your inbox.

Homepage Homepage Next Next Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. (function () { // ---------- Claude helper ---------- function buildClaudeUrl(text) { const url = new URL('https://claude.ai/new'); url.searchParams.set('q', text || ''); return url.toString(); }

// ---------- Auto-grow helpers ---------- function sizeTextarea(el) { // Ensure UA defaults don't force a starting height el.setAttribute('rows', el.getAttribute('data-min-rows') || '1'); el.style.minHeight = '0px'; el.style.height = 'auto'; // allow shrink el.style.height = el.scrollHeight + 'px'; // fit content }

function initAutogrow(root = document) { root.querySelectorAll('textarea[data-autogrow]').forEach((el) => { if (el.dataset.autogrowInit) return; el.dataset.autogrowInit = 'true';

// Respect your existing pattern for default text const preset = el.getAttribute('data-default-text'); if (preset != null && !el.value) el.value = preset;

// Initial sizing sizeTextarea(el);

// Resize as you type el.addEventListener('input', () => sizeTextarea(el));

// In case fonts/styles load late and change line-height window.addEventListener('load', () => sizeTextarea(el), { once: true }); }); }

// ---------- Claude form initializer ---------- function initClaudeForms(root = document) { root.querySelectorAll('form[data-claude-form]').forEach((form) => { if (form.dataset.claudeInit) return; form.dataset.claudeInit = 'true';

const textarea = form.querySelector('[data-claude-textarea], textarea'); const trigger = form.querySelector('[data-claude-button], button[type="button"], a[data-claude-button]');

if (!textarea || !trigger) { console.warn('Claude form: missing textarea or trigger in', form); return; }

// If the trigger is a but has no type, force "button" so it won't submit if (trigger.tagName === 'BUTTON' && !trigger.hasAttribute('type')) { trigger.type = 'button'; }

// Keep from navigating away while still opening Claude if (trigger.tagName === 'A') { trigger.addEventListener('click', (e) => e.preventDefault()); }

// Optional: support data-default-text on the textarea const preset = textarea.getAttribute('data-default-text'); if (preset != null && !textarea.value) textarea.value = preset;

// Click opens Claude; submission is optional trigger.addEventListener('click', () => { const text = (textarea.value || '').trim(); if (!text) { textarea.focus(); return; }

window.open(buildClaudeUrl(text), '_blank', 'noopener');

const mode = form.getAttribute('data-claude-mode') || 'intercept'; if (mode === 'also') { // Submit after opening Claude form.submit(); } // intercept mode: do nothing (no submit) });

// (Optional) Keep an href in sync for right-click/open-in-new-tab UX if (trigger.tagName === 'A') { const syncHref = () => trigger.setAttribute('href', buildClaudeUrl((textarea.value || '').trim())); syncHref(); textarea.addEventListener('input', syncHref); textarea.addEventListener('change', syncHref); } }); }

// ---------- Boot ---------- function initAll(root = document) { initAutogrow(root); initClaudeForms(root); }

if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => initAll(), { once: true }); } else { initAll(); }

@Claude @Claude @Claude

Download app Download app Download app

Artifacts Artifacts Artifacts

Design Design Design

Connectors Connectors Connectors

Plugins Plugins Plugins

Skills Skills Skills

Claude in Chrome Claude in Chrome Claude in Chrome

Claude for Microsoft 365 Claude for Microsoft 365 Claude for Microsoft 365

AI agents AI agents AI agents

Code modernization Code modernization Code modernization

Coding Coding Coding

Commerce Commerce Commerce

Customer support Customer support Customer support

Cybersecurity Cybersecurity Cybersecurity

Legal Legal Legal

Sales Sales Sales

Financial services Financial services Financial services

Government Government Government

Healthcare Healthcare Healthcare

Higher education Higher education Higher education

K-12 teachers K-12 teachers K-12 teachers

Life sciences Life sciences Life sciences

Nonprofits Nonprofits Nonprofits

Small business Small business Small business

Scientists Scientists Scientists

Developer docs Developer docs Developer docs

Developer blog Developer blog Developer blog

Console Console Console

Engineering at Anthropic Engineering at Anthropic Engineering at Anthropic

Overview Overview Overview

Marketplace Marketplace Marketplace

Claude on AWS Claude on AWS Claude on AWS

Blog Blog Blog

Claude partner network Claude partner network Claude partner network

Customer stories Customer stories Customer stories

Powered by Claude Powered by Claude Powered by Claude

Service partners Service partners Service partners

Availability Availability Availability

Check files Check files Check files

Regional compliance Regional compliance Regional compliance

Report abuse Report abuse Report abuse

Security and compliance Security and compliance Security and compliance

Status Status Status

Support center Support center Support center

Anthropic Anthropic Anthropic

Anthropic news Anthropic news Anthropic news

Policy on the AI Exponential Policy on the AI Exponential Policy on the AI Exponential

Transparency Transparency Transparency

Privacy choices /* Dialog styling */ dialog#consent-container { margin: 0; padding: 8px; opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }

dialog#consent-container.show { opacity: 1; transform: translateY(0); }

dialog#consent-container::backdrop { background: transparent; }

dialog button span { display: inline !important; }

/* Toggle switch styling */ .toggle_switch { position: relative; display: inline-block; width: 36px; height: 24px; }

.toggle_switch input { opacity: 0; width: 0; height: 0; }

.toggle_slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #87867f; transition: .4s; border-radius: 24px; }

.toggle_slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }

input:checked + .toggle_slider { background-color: #d97757; }

input:checked + .toggle_slider:before { transform: translateX(12px); }

input:disabled + .toggle_slider { cursor: not-allowed; opacity: 0.5; }

@media only screen and (max-width: 501px) { dialog#consent-container { left: 8px !important; bottom: 8px !important; right: 8px !important; } #consent-banner { padding: 24px 16px 16px !important; } #simple-options { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: auto auto !important; } #customize-btn { grid-column: span 1 !important; } dialog button span { display: none !important; }

Cookie settings

Enables security and basic functionality.

Enables tracking of site performance.

Enables ads personalization and tracking.

Responsible disclosure policy Responsible disclosure policy Responsible disclosure policy

Usage policy Usage policy Usage policy