分享会话产出为 Artifacts

Artifacts 会把 Claude Code 的工作成果变成 claude.ai 上一个私有网址下、实时可交互的页面。

一个 artifact 是 Claude Code 从你的会话发布到 claude.ai 上一个私有网址的、实时可交互的网页。你在浏览器中打开它，随着会话继续进行，它会原地更新。在 Team 和 Enterprise 方案上，当你想让团队成员也看到它时，可以从页面顶部分享它。例如，可以用一个 artifact 通过带注释的 diff 带审查者过一遍某个 pull request，从会话数据构建一个仪表盘，或维护一份随 Claude 工作而不断填充的调查时间线。

何时使用 artifact

当终端文本不适合展示 Claude 生成的内容时——即那些看起来和互动起来比逐行阅读更容易理解的输出——就可以使用 artifact。Claude 会根据你会话能触及的一切来构建这个页面，包括你的代码库和通过已连接的工具获取的数据，因此这个页面可以展示那些需要用大段文字才能描述清楚的内容。例如，可以让 Claude：

• 通过带注释的 diff 带审查者过一遍某个 pull request
• 用会话已经获取的数据渲染一个仪表盘
• 把几个设计或实现方案并排展示
• 维护一份随长任务运行而不断填充的调查时间线
• 给团队成员发一个链接，而不是把输出粘贴到 Slack 中

关于与以上每种场景对应的提示词，请参阅你可以构建什么。

artifact 不是什么

一个 artifact 是工作成果的一次记录，不是一个应用程序。它是一个没有后端的自包含页面，因此无法存储表单输入、在查看时调用 API，也无法提供多个路由。对于需要后端的、面向内部的托管工具，请部署在你自己的基础设施上。完整的限制列表请参阅页面限制。

创建一个 artifact

当输出适合做成一个页面时，Claude 可能会自行发布一个 artifact，你也可以直接提出请求。要请求，用自然语言说出你想要的功能或视觉效果。任何比起读文字更适合看的内容都是不错的候选，例如带注释的 diff、图表，或一组需要比较的选项。以下提示词是两个示例；更多模式请参阅你可以构建什么。

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.

Claude 会把该页面写入你项目中的一个 HTML 或 Markdown 文件，然后发布它。在发布一个新 artifact 之前，Claude Code 会请求权限；它可能会这样说：Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai。重新发布一个你已经批准过的 artifact 不会再次提示。

选择是即可发布。Claude 会打印该网址，你的浏览器会打开这个新页面。随时按 Ctrl+] 即可从终端重新打开最近的 artifact。

Claude 会为该 artifact 选择标题，以及浏览器标签图标所用的表情符号。两者都会出现在 claude.ai 上你的artifact 图库以及分享链接中，如果你想要特定的标题或图标，请让 Claude 使用它。

要阻止浏览器在发布一个新 artifact 时自动打开，请在你的环境中设置 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0。

如果 Claude 回复说它无法发布，或者写入了一个不带链接的本地 HTML 文件，说明这个工具在你的会话中未启用。请检查可用性要求。

更新一个 artifact

让 Claude 修改该页面，或让一个长期运行的任务随着进展重新发布。Claude 会编辑底层文件，并再次发布到同一个网址。

Add a per-region breakdown below the summary chart and republish.

任何打开该页面的人都会看到原地更新。每次发布都会成为一个版本，你可以在页面头部的分享控件中选择让查看者看到哪个版本。

要从另一个会话更新某个 artifact，把该 artifact 的网址给 Claude，让它修改。没有这个网址时，一个新会话总是会创建一个新的 artifact，而不是更新已有的。

Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers.

分享一个 artifact

一个新的 artifact 只对你可见。在 Pro 和 Max 方案上，artifact 始终对你私有。在 Team 和 Enterprise 方案上，在浏览器中打开该 artifact，用页面头部的分享控件，把访问权限授予你组织中的特定人员，或授予组织中的所有人。头部会把你标注为该 artifact 的作者，因此你分享给的任何人都能看到是谁发布了这个页面。它还会链接到你的图库 claude.ai/code/artifacts，其中列出了你创建的每一个 artifact。

分享范围止于你的组织。查看者必须以发布该 artifact 组织的成员身份登录 claude.ai，没有让某个 artifact 在组织外部可见的选项。要把底层内容发给组织外部的某个人，请让 Claude 提供该 HTML 文件，直接分享那个文件。

Artifact 是可查看的，不是可共同编辑的。你分享给的人能看到你发布的每个版本，但无法更改该页面；你始终是唯一的编写者。

你可以构建什么

一个 artifact 是一个单一的 HTML 页面，因此任何能用 HTML、CSS 和内联 JavaScript 表达的内容都在其能力范围内。以下是最常见的几种模式。

带人过一遍某次更改

请求一个能渲染 diff 或设计更改的页面，并在相关代码行旁边加上注释，让审查者能在代码旁边读到你的推理过程，而不必从一段描述中自行重建它。

Make an artifact that walks through this PR. Render the diff with margin annotations and color-code findings by severity.

比较多个方案

请求把几个变体放在同一个页面上，方便你相互比较评估。这适用于布局、文案、API 形态或实现方案。

Make an artifact with four distinctly different layouts for the settings panel. Vary density and grouping, and lay them out as a grid with a one-line tradeoff under each.

用交互控件调参

请求提供滑块、开关或输入框，绑定到你正在调整的任何东西，让你可以直接探索取值，而不必用文字描述它们。

Build an artifact with sliders for the easing curve, duration, and delay so I can try values on this transition. Show the animation live as I move them.

把结果带回你的会话

一个 artifact 可以充当一个轻量级编辑器，帮你做出决定后再交还给 Claude。请求提供一个导出控件，产出可以粘贴到终端中的文本，这样与该页面交互的结果就能流回会话中，而不是留在页面上。

Make a triage board artifact with each open issue as a draggable card across Now, Next, Later, and Cut columns. Add a "Copy as prompt" button that gives me the final ordering to paste back here.

追踪进行中的工作

让 Claude 在一个长任务运行期间保持某个 artifact 实时更新，这样任何拿到链接的人都能跟进进度，而不必阅读终端。

Turn this migration plan into a checklist artifact. Check items off as you complete them and add a note for anything you skip.

改进视觉设计

Claude 在构建 artifact 时会应用一个内置的设计技能，因此页面无需额外提示词，就能获得经过考量的色彩、排版和布局。这个技能还会在选择自己的方案之前，先查找你项目中是否已有设计系统。要让 artifact 与你产品的品牌保持一致，请把你的设计变量记录在 Claude 能找到的地方，例如项目的 CLAUDE.md，或仓库中的一个主题文件：

## Design system

- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px scale, 6px border radius

Claude 会认为你的设计系统优先级高于它自己的选择，而你的提示词优先级高于两者。上面的标题和格式只是一个示例；任何清晰列出颜色、字体和间距的列表都可以。

页面限制

每个 artifact 都是一个自包含的页面。Claude Code 会把你发布的文件包裹在一个 HTML 文档外壳中，并在严格的内容安全策略（CSP）下提供服务，这决定了该页面能做什么。

生成一个 artifact 会像任何其他回复一样消耗输出 Token，而一个带样式的页面比同样内容的终端文本消耗更多 Token。内联的 CSS、用于交互控件的 JavaScript，尤其是以数据 URI 嵌入的图片，是主要的消耗来源。要降低 artifact 的 Token 成本：

• 对于图表，优先使用 SVG，或 HTML 和 CSS，而不是嵌入的栅格图片
• 省略不需要的交互性
• 让页面对大型数据集进行摘要，而不是完整内联它们

可用性

Artifact 需要满足以下所有条件。当有条件未满足时，Claude 会写入一个本地 HTML 文件，或说它无法发布。

关闭 artifacts

无论你组织的设置如何，要为你自己的会话关闭 artifacts，可以使用以下任意一种方式：

为你的组织管理 artifacts

Team 和 Enterprise 方案上的 Owner 可以从 claude.ai 管理设置中控制 artifacts。Artifact 内容存储在 Anthropic 运营的基础设施上，只对发布组织的已认证成员可见。

启用或禁用 artifacts

要为整个组织启用或禁用 artifacts，前往Settings > Claude Code > Capabilities，使用Artifacts 开关。在具有基于角色的访问控制的 Enterprise 方案上，你还可以将 artifacts 限定到特定角色：前往Settings > Roles，编辑某个角色，在 Claude Code 分组下设置 Artifacts 权限。

设置保留策略

要设置 artifacts 在自动删除前保留多久，前往Settings > Data & privacy controls。你可以为仍只对作者私有的 artifacts，以及已被分享的 artifacts，分别设置不同的保留期限。

查看审计日志

发布、分享和删除某个 artifact，都会出现在你组织的审计日志中，事件类型为 claude_artifact_*，与 claude.ai 对话中创建的 artifacts 使用的是同一系列事件类型。

将查看器域名加入允许列表

claude.ai 上的查看器会从一个沙箱化的 *.claudeusercontent.com 源加载每个 artifact。如果你的组织限制了出站网络访问，请将该域名与 claude.ai 一起加入你的允许列表。完整列表请参阅网络访问要求。

用 Compliance API 列出和删除 artifacts

Compliance API 提供了列出一个组织的 artifacts、获取某个特定版本的内容，以及删除某个 artifact 的端点：

关于请求和响应模式，请参阅Compliance API 参考文档。

相关资源

• 浏览与 artifacts 配套使用的提示词模式与工作流
• 把你反复使用的某个 artifact 提示词变成一个技能，这样就可以把它当作命令来调用
• 连接 MCP 服务器，让 Claude 能把实时数据拉取进某个 artifact