Artifacts 落地 Claude Code
把整段会话发布成可分享的活页面

Same Name, Different Animal · 同名不同物 · 2026-06-18 公测 · 从 2024 侧边预览到 2026 私有活页面 · 深度调研

2026-06-20 跨市场 Claude Code Artifacts 厂商动态 Agent 产出对内时机：进行中信心：高

16MB

单页渲染上限
超过即发布失败

官方推荐的
页面模式

Team↑

启用门槛
Enterprise 默认关

2024→26

同名特性
形态被重做

官方：Share session output as artifacts（文档） · Artifacts in Claude Code（博客） · Help Center

核心结论：Claude Code Artifacts（2026-06-18 公测）把一段终端会话的产物，发布成 claude.ai 上的私有「活页面」——浏览器打开、就地随会话刷新、组织内可分享。它解决的不是「生成内容」，而是「终端是错误的媒介」：PR 走查、数据看板、方案对比、调查时间线，这些更适合看一眼而非逐行读。和 2024 年 Claude.ai 的同名侧边预览相比，它把整段会话产物变成独立可分享页面——同名不同物。本质是「工作的快照，不是应用」：单页 HTML、严格 CSP、无后端、组织内可见。对 FDE：它是把 Agent 深度工程成果桥接给非技术干系人的最小可信通道。

一页要点

是什么：会话产物 → claude.ai 私有 URL 上的活页面，浏览器打开、就地刷新、组织内分享
同名陷阱：≠ 2024 年 Claude.ai 侧边 Artifacts（会话内预览）。官方 Help Center 明确区分三个载体
怎么发：让 Claude「做个 artifact」，它写 .html/.md 落盘 → 授权弹窗 → 发布私有 URL；Ctrl+] 重开最近一个
硬约束：单页 ≤16 MiB、严格 CSP（无外部请求/无后端）、仅 .html/.htm/.md；「是快照，不是应用」
门槛：Team/Enterprise 套餐 + /login（非 API key）+ Anthropic API（非 Bedrock/Vertex/Foundry）
关键发现：不在 Claude Code changelog 里——7 处「artifact」全是终端渲染 bug；靠 release-note 监控会漏掉它
FDE 映射：桥接非技术干系人 · 默认组织内可见＝企业友好 · 设计令牌自动复用＝客户品牌可定制

一背景：终端是错误的媒介#

Wrong Medium · 为什么需要它

Claude Code 跑在终端里，但终端是逐行读的媒介。当它产出一组带批注的 diff、一张数据看板、几个并列的设计方案、或一条随执行填充的调查时间线时，把这些塞回终端 = 信息密度骤降、干系人看不懂、还得复制粘贴进 Slack。官方文档的原话：「当终端文本是 Claude 产出的错误媒介时——那些看起来比逐行读更容易交互的东西——就用 artifact。」

过去 · 终端输出

一段会话动辄几百行——干系人不会逐行读，你也很难把它贴进 Slack 讲清楚。

→ 发布为页面

现在 · 活页面 Artifact

同一份产出，变成一眼能看懂的活页面——带 URL、带品牌、组织内分享，会话继续时页面就地刷新。

二是什么：同名不同物#

Same Name, Different Animal · 别被名字骗了

最容易踩的坑：以为这就是 2024 年那个 Artifacts。官方 Help Center 把它列在三个载体下，并明确区分——「Claude 与 Claude Desktop（本文焦点），以及 Claude Code——后者把会话输出发布成可分享的页面。」

Claude.ai Artifacts2024

会话内 · 侧边

让 Claude 生成代码/文档/网页设计，产物出现在对话旁的专用窗口，可实时编辑与构建。本质是会话内的预览组件。

同名 · 不同物

Claude Code Artifacts2026

独立页 · 私有 URL

把整段会话的产物发布成一个独立可分享的活页面，有私有 URL、就地刷新、组织内可见。本质是会话产物的发布通道。

辨析

一句话区分：Claude.ai Artifacts 是「在对话里预览产物」，Claude Code Artifacts 是「把整段会话发布成页面」。前者服务于「实时编辑一个生成物」，后者服务于「把 Agent 干完的活交付给干系人」。共享一个名字，是历史包袱，不是继承关系。

三工作机制：从一句话到活页面#

Publish Lifecycle · 发布流水线

触发可以是你主动要，也可以Claude 自己判断输出更适合做页面。两种典型 prompt（官方示例）：

Make an artifact that walks through this PR with the diff annotated inline.

Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.

1提出请求

Ask

「做个 artifact 走查这个 PR」；或 Claude 判断输出更适合做页面时自发发布。

2写文件

Write

Claude 把页面写进项目的 .html/.md 文件，再发布。

3授权

Permission

首次发布弹窗：「Claude wants to publish… to a private page」；同 artifact 再发不弹。

4发布

Publish

发布到 claude.ai 私有 URL；Claude 打印 URL，浏览器自动打开。

5浏览

Open

Ctrl+] 随时重开最近一个；CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 关自动开。

6更新与分享

Update & Share

改文件再发＝新版本，同 URL 就地刷新；Share 控件选版本、按人/全组织授权。

↻ 会话继续 → 页面就地刷新 · 每次发布 = 一个版本（非持续流式）

几个容易被忽略的细节：

跨会话更新：给 Claude 那个 artifact 的 URL，它就改同一个；不给 URL，新会话永远新建而非更新旧的。
标题与 emoji：Claude 自己起标题和标签页 emoji；要指定就明确说。
只读协作：被分享的人能看每个版本，但不能改——你始终是唯一作者。

四硬约束：是工作的快照，不是应用#

The Sandbox · 它做不到什么

官方文档对它的定性非常直白：「An artifact is a capture of work, not an application.」 一个 artifact 是单页自包含静态页面，Claude Code 用 HTML 外壳包住你发布的文件，在严格的内容安全策略（CSP）下提供。

Sandbox · 单页 HTML

一个 artifact Capture of Work

无外部请求 CSP 封锁外部脚本/字体/图片、fetch/XHR/WebSocket

无后端不能存表单输入、不能在查看时调 API、不能鉴权

单页 / 单路由无部署邻居，相对链接不解析；多段内容用页内锚点

≤ 16 MiB 渲染后页面大小上限；嵌入大图是超限发布失败的主因

.html / .md 仅这三种源文件；CSS/JS 全内联、图片转 data URI

需要带后端的内部工具？部署到你自己的基础设施，而不是 artifact。

4.1 Token 成本

生成 artifact 和普通回复一样消耗 output token，但带样式的页面比同内容的纯文本更费 token——内联 CSS、交互控件 JS、尤其 data URI 图片是主要开销。官方降本建议：图优先用 SVG / HTML+CSS 而非栅格图；去掉用不上的交互；让页面汇总大数据集而非全量内联。

五能做什么：五种页面模式#

What You Can Build · 官方推荐模式

单页 HTML 能表达的，都在范围内。文档点名出现最多的五种模式：

走查变更Walk through a change

讲清为什么改

带批注的 diff，按严重度配色；评审者把推理读到代码旁。

并列对比Compare alternatives

多方案择优

多布局/文案/API 形态/实现计划并列，每格一行 tradeoff。

交互调参Tune with controls

所见即所得

滑块/开关/输入绑定到调参对象，移动即实时预览。

回灌会话Bring back to session

页面是轻编辑器

「复制为 prompt」导出控件，把交互结果贴回终端继续。

追踪进度Track work in progress

长任务直播

随执行勾选的 checklist；持链接者不用看终端也能跟。

设计系统复用Design System Pickup · 自动套用品牌

Claude 建 artifact 时会自动套用一套设计 skill（调色板/排版/布局）；它会先找项目里已有的设计系统（写在 CLAUDE.md 或主题文件里的颜色/字体/间距令牌），并视其优先级高于自带选择——你的 prompt 优先级又高于两者。这意味着客户品牌可定制。

品牌可定制

六启用门槛与管控#

Availability & Control · 五个条件全满足才发得出

发布 artifact 需要下表每一项同时成立（AND 关系）。任何一项不满足，Claude 只会写本地 HTML 文件或提示「无法发布」。

Plan

Team / Enterprise Team 默认开；Enterprise 需管理员在 claude.ai 后台开启。

Auth

/login 登录必须 claude.ai 登录；API key / gateway token / 云凭证不能发布。

Provider

仅 Anthropic API 不可用 Bedrock、Vertex AI、Microsoft Foundry。

Policy

无 CMEK/HIPAA/ZDR 组织未启用客户自管密钥、HIPAA、零数据留存。

Surface

CLI / 桌面端 Claude Code CLI，或桌面端 ≥ 1.13576.0。Agent SDK / GitHub Action / MCP-server 默认关。

五个条件取 AND · 任一不满足 → 只写本地文件、不发布

6.1 关闭与管理

个人关闭

三种等价方式

"disableArtifact": true（settings 文件）
CLAUDE_CODE_DISABLE_ARTIFACT=1（环境变量）
把 Artifact 加入 permissions.deny

组织管理

管理员能力

开关：Settings → Claude Code → Capabilities → Artifacts
RBAC（Enterprise）：Settings → Roles → 按角色分配 Artifacts 权限
留存：Settings → Data & privacy controls（私有 vs 已分享分别设期）

合规面

审计与 API

审计日志：claude_artifact_* 事件（与 claude.ai 同族）
域名：viewer 跑在沙箱 *.claudeusercontent.com，需加白名单
Compliance API：GET/DELETE /v1/compliance/code/artifacts

Visibility · 它如何流转

维度	规则
默认可见性	新建 artifact 仅作者可见；需在页面头部 Share 控件主动授权（指定人或全组织）
分享边界	止于组织。查看者必须以同一组织成员身份登录 claude.ai，没有对外公开选项
对外交付	要发给组织外的人 → 让 Claude 把 HTML 文件给你，直接发文件
协作模型	只读。被分享者看到每个发布版本，但不能编辑；作者始终唯一写者
版本	每次发布＝一个版本；Share 控件可选查看者看到哪个版本
画廊	头部链接 `claude.ai/code/artifacts`，列出作者所有 artifact，标注作者

对照

这条「组织内、无公开」的可见性，是它和 OpenAI Codex Sites 的关键分野——后者是持久化的全栈 PaaS（D1 数据库、R2 存储、公开登录、外部 IdP）；Anthropic 走的是无状态的单页画布。同一类「把 Agent 产物变成可访问页面」的需求，两家押了完全不同的形态。

八FDE / ToB 映射#

Field Mapping · 落到客户现场

i非技术干系人的最小可信通道：FDE 最大痛点之一是「Agent 干的深度工程活，客户/业务方看不懂」。artifact 把终端产物桥接成带品牌的活页面——PR 走查、迁移进度、故障时间线都能让产品/管理层一眼跟上，这正是「活页面」相对粘贴 Slack 的代差。
ii默认组织内可见 = 企业友好：无公开泄漏面、有审计日志（claude_artifact_*）、可设留存、有 RBAC、有 Compliance API——这些恰好命中金融/政企客户的合规清单，几乎免改造就能进合规对话。
iii设计令牌自动复用 = 客户品牌可定制：把客户色板/字体/间距写进 CLAUDE.md 或主题文件，artifact 自动套用且优先级最高。ToB Demo 场景里，带客户品牌的走查页比通用终端输出更有说服力。
iv「快照不是应用」要写进预期管理：交付前讲清它不能存表单、不能查看时调 API、单页单路由——避免客户把它当托管工具用。需要后端的，走自有基础设施。
v门槛可能撞客户云策略：仅 Anthropic API（非 Bedrock/Vertex/Foundry）+ 仅 /login（非 API key）——对走多云/云厂商凭证的客户，这是明确的采纳阻力，POC 前要先确认计费与接入方式。

判断

Artifacts 不是又一个生成器，而是Agent 产出的交付层——它把「Agent 跑完了」从一句终端声明，变成干系人能看、能跟、能信的活页面。对 FDE，它的价值不在技术新奇，而在把验收与沟通的成本降一个数量级；前提是认清它是快照、且门槛与云策略需要前置确认。

九待验证问题与关键发现#

Open Threads · 调研中的疑点

关键发现

Artifacts 不在 Claude Code changelog 里。对 anthropics/claude-code 的 CHANGELOG 做 grep，7 处「artifact」全是终端/UI 渲染 bug（CJK 颜色、ink2 视觉、ReasonML diff 损坏、宽字符等），零处是功能名。功能只在专属文档页 + 博客 + Help Center 出现——靠 release-note 监控会完全漏掉它。这是做厂商追踪时值得记住的反模式。

公测之外的 GA 时间表：会不会进 Pro/Free？会不会上 Bedrock/Vertex/Foundry？
有没有 /artifact 之类的 slash command 手动发布/列画廊？调研未见，文档也未明确。
留存与持久化模型：私有 URL 存活多久？版本是否无限保留？作者离组后怎么办？
沙箱 *.claudeusercontent.com 与 Compliance API 对受监管行业，egress/审计承诺具体到什么程度？
「就地刷新」是逐次发布（每次=新版本），非持续流式——长任务直播的延迟体感如何？

十参考来源#

Share session output as artifacts（Claude Code 官方文档，一手）
Artifacts in Claude Code（官方博客，2026-06-18）
What are Artifacts and how do I use them?（Help Center，区分三载体）
Settings · Environment variables（disableArtifact / AUTO_OPEN 等）
Claude 3.5 Sonnet 发布（2024 Claude.ai Artifacts 出处）
Claude Code CHANGELOG（7 处 artifact 全为渲染 bug，无功能条目）
VentureBeat：Claude Code Artifacts update（二手，含 Codex Sites 对照）

修订记录：2026-06-20 初稿 · 基于 deep-research 工作流（21/25 条声明经对抗验证）· 视觉版