本页目录10
- Artifact 是实时单页网页,随会话持续更新;按 `Ctrl+]` 可随时从终端重新打开。
- 需 Team/Enterprise 计划并通过 `/login` 登录;仅 Anthropic API 支持,Bedrock/Vertex AI/Foundry 均不可用。
- 页面受严格 CSP 限制:无外部请求、无后端、单页、文件 ≤ 16 MiB,CSS 和 JS 全部内联。
- 在 `CLAUDE.md` 中声明设计系统(颜色、字体、间距),Claude 会优先套用,使页面与产品品牌保持一致。
- 分享仅限同组织成员;跨会话更新需将 Artifact URL 提供给新会话,否则会创建新 Artifact。
- 可通过设置文件、环境变量 `CLAUDE_CODE_DISABLE_ARTIFACT=1` 或权限规则随时关闭该功能。
本文是对官方文章「Share session output as artifacts」的中文要点摘要,完整内容以原文为准。原文链接:https://code.claude.com/docs/en/artifacts
什么是 Artifact?
Artifact 是 Claude Code 从会话中发布到 claude.ai 私有 URL 的实时交互式网页。页面在原地更新,所有持有链接的人可随时查看最新版本,并可从页面头部的 Share 控件分享给团队成员。目前处于 Beta 阶段,需要 Team 或 Enterprise 计划并通过 /login 登录才能使用。
适合用 Artifact 的场景
当终端文本不够直观时,改用 Artifact:
- 带注释的 PR diff 代码审查页面
- 从会话数据构建的仪表盘
- 多方案并排对比(布局、接口设计、实现方案)
- 长任务运行时实时更新的进度追踪页
- 替代在 Slack 里粘贴大段输出
不适合的场景:Artifact 是静态单页,无后端,不能存储表单数据、在查看时调用 API,也不支持多路由。
创建与更新
用自然语言直接告诉 Claude:
Make an artifact that walks through this PR with the diff annotated inline.
Claude 将页面写到项目中的 .html 或 .md 文件并发布。首次发布会请求权限确认;已批准后再次发布不再提示。
- 按
Ctrl+]可随时在终端重新打开最近的 Artifact - 设置
CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0可关闭自动打开浏览器
每次发布都会成为一个版本,可在页面头部的 Share 控件中选择查看者看到哪个版本。
跨会话更新需把 Artifact URL 告知新会话,否则会创建全新 Artifact:
Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers.
分享
新发布的 Artifact 默认仅自己可见。在页面头部的 Share 控件中可授权:
- 分享范围仅限本组织,查看者须以同组织成员身份登录
- 查看者只读,不能编辑页面
- 如需分享给组织外的人,让 Claude 导出 HTML 文件再直接发送
可构建的典型页面
| 场景 | 核心提示方向 |
|---|---|
| PR 代码审查 | 渲染带行旁注释的 diff,按严重程度着色 |
| 多方案对比 | 四种布局并排,每项附一行权衡说明 |
| 交互式调参 | 用滑块实时预览动画缓动曲线、时长、延迟 |
| 任务进度追踪 | 迁移计划清单,完成一项勾一项,跳过项留备注 |
| 决策回传 | 加「Copy as prompt」按钮,将页面操作结果粘回终端 |
自定义视觉风格
在项目的 CLAUDE.md 或主题文件中声明设计系统,Claude 会优先套用它:
## Design system
- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px scale, 6px border radius
格式不限,清晰列出颜色、字体、间距即可。提示词优先级最高,其次是项目设计系统,最后才是 Claude 内置默认风格。
页面限制
| 约束 | 说明 |
|---|---|
| 无外部请求 | CSP 屏蔽外部脚本/样式/字体/图片及 fetch/XHR/WebSocket;CSS 和 JS 全部内联,图片用 data URI 嵌入 |
| 无后端 | 纯静态,不能存储数据或在查看时调用 API |
| 单页 | 相对链接不解析,多章节用锚点实现 |
| 文件类型 | 仅 .html、.htm、.md |
| 渲染大小 | ≤ 16 MiB |
减少 token 消耗:优先用 SVG/CSS 代替嵌入光栅图、去掉不必要的交互控件、让页面汇总而非内联大数据集。
可用性要求
| 要求 | 条件 |
|---|---|
| 计划 | Team(默认开启)或 Enterprise(管理员手动开启) |
| 认证 | 通过 /login 登录 claude.ai(API Key、网关令牌、云厂商凭证均不支持) |
| 模型提供商 | 仅 Anthropic API(不支持 Bedrock、Vertex AI、Foundry) |
| 组织策略 | 未启用 CMEK、HIPAA 或 Zero Data Retention |
| 运行环境 | Claude Code CLI,或 Claude 桌面 App 1.13576.0 及以上版本;在 Agent SDK、GitHub Action、MCP-server 场景及设置 CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC 时默认关闭 |
关闭 Artifacts
| 方式 | 配置 |
|---|---|
| 设置文件 | disableArtifact: true |
| 环境变量 | CLAUDE_CODE_DISABLE_ARTIFACT=1 |
| 权限规则 | 将 Artifact 加入 permissions.deny |
企业级管理
管理员在 claude.ai 管理后台的 Settings > Claude Code > Capabilities 中控制全局开关;Enterprise 计划还可在 Settings > Roles 按角色细粒度授权。其他管理能力包括:
- 保留策略:在 Settings > Data & privacy controls 中分别配置私有和已分享 Artifact 的自动删除周期
- 审计日志:发布、分享、删除均记录在
claude_artifact_*事件中 - Compliance API:
GET /v1/compliance/code/artifacts列举检索,DELETE /v1/compliance/code/artifacts/{artifact_id}删除 - 网络许可名单:Artifact 查看器从
*.claudeusercontent.com加载,需加入组织的出站网络许可名单