Skip to main content
Artifacts 在 Pro、Max、Team 和 Enterprise 计划中可用,需要使用 /login 登录的会话。有关完整的要求集,请参阅 可用性
Artifact 是一个实时交互式网页,Claude Code 从您的会话发布到 claude.ai 上的私密 URL。您在浏览器中打开它,随着会话的继续,它会实时更新。当您希望其他人也看到它时,可以从页面标题中共享它。
一个 artifact 在浏览器中打开,位于 claude.ai/code/artifact。查看器标题显示 artifact 标题 acme-funnel-fix、一个共享按钮和作者头像。共享菜单已打开,显示"始终共享最新版本"切换、显示"共享版本 2"的版本选择器、"Acme 中的所有人"受众选择器和复制链接按钮。标题下方,artifact 页面显示两个并排的移动设备模型、一个漏斗图表和一行指标卡片。

何时使用 artifact

当终端文本不是 Claude 生成内容的合适媒介时,请使用 artifact:输出内容更容易查看和交互,而不是逐行阅读。Claude 从您的会话可以访问的任何内容构建页面,包括您的代码库和通过您的连接工具拉取的数据,因此页面可以显示需要段落才能描述的内容。例如,要求 Claude:
  • 通过带注释的 diff 向审查者讲解拉取请求
  • 从会话已拉取的数据呈现仪表板
  • 并排展示多个设计或实现选项
  • 保持在长任务运行时填充的调查时间线
  • 向团队成员发送链接,而不是将输出粘贴到 Slack
  • 发布状态板,每次有人打开时通过 MCP 连接器拉取新数据
有关与这些相匹配的提示,请参阅您可以构建的内容,有关连接器支持的板的提示,请参阅使用 MCP 连接器拉取实时数据

artifact 不是什么

artifact 是工作的捕获:一个自包含的页面,没有后端,因此无法提供多个路由。对于具有后端的托管内部工具,请改为在您自己的基础设施上部署它。有关完整的限制集,请参阅页面约束

创建工件

Claude 可能会在输出适合作为页面时自动发布工件,或者你可以直接请求创建一个。要请求创建,请命名该功能或用简洁的语言描述你想要的视觉输出。任何比以文本形式阅读更容易看到的内容都是很好的候选,例如带注释的 diff、图表或一组选项进行比较。下面的提示是两个示例;有关更多模式,请参阅你可以构建的内容
除非你指定位置,否则 Claude 会将页面写入项目外的临时目录中的 HTML 或 Markdown 文件,然后发布它。发布新工件会通过你的会话的权限模式进行:
  • 自动模式:分类器审查发布而不是提示你,因此 Claude 可以在你看不到提示的情况下发布页面。你的会话启动时所处的模式取决于你的计划;请参阅起始权限模式
  • 手动和接受编辑模式:Claude Code 会请求权限;它可能会说类似 Claude wants to publish deploy-failures.html, uploading it to claude.ai (Anthropic's servers) to host as the page "Deploy failures by service", private to you until you share it 的内容。选择以发布。
在你批准工件一次后,Claude Code 会重新发布它而不再询问,并在某些情况下再次询问,包括: 在首次发布后,Claude 会打印 URL,你的浏览器会打开到新页面。如果你从 claude.ai、Claude Desktop 或 Claude 移动应用通过远程控制发送了提示,运行会话的机器上不会打开任何标签页。下次你在终端输入提示时 Claude 从该提示发布工件时,浏览器会在那里打开。随时按 Ctrl+] 可重新打开会话的最近工件。 Claude 为工件的标题和浏览器标签图标选择一个表情符号。两者都会出现在你在 claude.ai 上的工件库和共享链接中,因此如果你想要特定的标题或图标,请要求 Claude 使用它。 要停止浏览器在发布新工件时自动打开,请在你的环境中设置 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 如果 Claude 回应说它无法发布,或写入本地 HTML 文件而没有链接,则该工具未为你的会话启用。检查可用性要求。

更新一个 artifact

要求 Claude 修改页面,或让长时间运行的任务在进行过程中重新发布。Claude 编辑底层文件并重新发布到相同的 URL。
任何打开该页面的人都会看到就地更新。每次发布都会成为一个版本,从页面标题中的 Share 控件,你可以选择查看者看到哪个版本。 要从不同的会话更新 artifact,请给 Claude 其 URL,或使用 /artifacts 附加它。如果两者都没有,新会话会创建新的 artifact 而不是更新现有的。

再次查找一个artifact

在Claude Code中运行/artifacts以列出您拥有的每个artifact和与您共享的每个artifact。选择一个并按o在浏览器中打开它,或按c复制其链接。按Enter将其附加到当前会话;在v2.1.216之前,Enter在浏览器中打开它。Claude Code从您的claude.ai账户读取列表,因此它在新会话中工作,在/clear之后工作,当链接已从终端滚出时也能工作。需要Claude Code v2.1.208或更高版本。

分享一个artifact

新创建的artifact只有你能看到。要分享它,请在浏览器中打开该artifact,并使用页面标题中的分享控件。标题还链接到你的库,位置在claude.ai/code/artifacts,其中列出了你创建的每个artifact。 你组织中的查看者可以看到谁发布了该页面:在组织内共享的artifact上,你的名字在标题菜单中;在公开artifact上,对于组织内已登录的查看者,你的名字在页面标题中。打开公开链接但未登录的查看者,或来自组织外的查看者,会看到标签内容由用户生成且未经验证。而不是你的名字。 你可以与谁分享取决于你的计划:
  • 在你的组织内:在Team和Enterprise计划上,向组织中的特定人员或所有人授予访问权限。查看者以组织成员身份登录claude.ai以查看该页面。
  • 公开:分享一个链接,互联网上的任何人都可以打开,无需claude.ai登录。在Pro和Max计划上,公开链接是分享artifact的唯一方式。在Team和Enterprise计划上,公开分享处于关闭状态,直到所有者为组织启用它

让某人与你一起编辑

与你分享的人默认是查看者:他们可以看到你发布的每个版本,但无法更改页面。在Team和Enterprise计划上,你也可以让某人成为编辑者。在分享对话框中,添加一个人并将其角色从查看者切换到编辑者 编辑者发布新版本的方式与你从另一个会话更新artifact的方式相同:他们向Claude提供artifact的URL,或从/artifacts附加它,Claude会拉取当前内容并用他们的更改重新发布。打开该页面的每个人都会实时看到每个更新。

阅读与你共享的工件

当有人与你共享一个工件时,你可以让 Claude 阅读它:给 Claude 提供其 URL,或从 /artifacts 附加它。 Claude 读取他人编写的页面的方式与它读取网页的方式相同,使用 WebFetch:它获得关于所询问内容的摘要,而不是原始页面,摘要报告写入页面的说明,而不是转达它们。Claude Code 还将页面的完整源代码保存到本地文件,当 Claude 需要确切内容时可以打开该文件,例如将工件重新发布为 编辑器

收集工件上的评论

当您在组织内共享工件时,与您共享的人可以在页面上留下评论,您可以让 Claude 读取这些评论并回复。您需要 Claude Code v2.1.221 或更高版本以及 Team 或 Enterprise 计划,因为只有您在组织内共享的工件才会接收评论。Claude 在两种情况下读取评论:
  • 您要求 Claude 读取评论:向 Claude 提供工件的 URL 并要求查看评论。Claude 列出每个线程,并标记可以编辑工件的人发送给它的评论。
  • 可以编辑工件的人向 Claude 发送评论:在页面上的线程中,他们使用发送给 Claude发送评论,或在其中提及 @claude。无论哪种方式,他们都会激活该线程。
Claude 只能回复或解决已激活的线程。其他线程保持打开状态,直到某人在页面上解决它们。查看者会看到每条回复都归属于 Claude,通过您。 如果您公开共享工件,查看者无法对其进行评论:页面显示此工件公开共享时评论不可用。要将已有评论线程的工件切换到公开链接,请先删除这些线程。 要自己要求查看评论,请向 Claude 提供 URL:
如果 Claude 告诉您它无法读取评论,请确认您的版本、您的会话和您的功能标志设置:
  • 您运行的是 Claude Code v2.1.221 或更高版本。
  • 您不在安装 Claude Code 或从 v2.1.221 之前的版本升级后的第一个会话中。在安装或升级后的第一个会话中,Claude 可能还无法读取评论;启动新会话并再次询问。
  • 您没有关闭功能标志获取。

让 Claude 自动回复评论

在您的会话发布工件后,Claude Code 会在会话运行期间监视该工件的评论。当可以编辑工件的人向 Claude 发送评论时,它会立即到达您的会话,Claude 可以读取线程并回复,而无需您询问。 您需要 Claude Code v2.1.228 或更高版本。如果您关闭了功能标志获取,Claude Code 不会监视评论。 您的权限模式决定了当发送的评论到达时 Claude 的行为:
  • Claude 自动回复:当您的权限模式允许 Claude 在不询问您的情况下发布回复时,Claude 读取线程并回复,并在评论要求更改时编辑工件。您会看到自动回复了工件上的评论线程:<name>自动编辑了工件:<name>以响应评论线程
  • Claude 等待您:在计划模式之外,当发布回复需要您的批准时,您会看到评论正在等待工件:<name>。Claude 然后要求您批准读取线程,再次批准发布回复。
  • Claude 在计划模式中暂停:您会看到评论正在等待工件:<name>,Claude 不会回复,直到您离开计划模式并要求它读取和回复。
Claude 还会在处理该工件上的 60 条已发送评论或线程激活后的一小时内停止自动回复该工件。您会看到评论正在等待工件:<name>一次,当该小时的评论过期时,Claude 会重新开始。 运行 /tasks 查看您的会话正在监视的每个工件,列为实时更新任务。您可以通过以下任何方式停止 Claude 自动回复:
  • 在空闲提示符处按一次 Ctrl+C:Claude 暂停回复您的会话正在监视的每个工件。在您发送下一条消息后,回复会重新开始。
  • /tasks 中停止任务:Claude 停止回复该工件,直到您要求它在那里恢复回复。重新发布工件不会再次启动回复,当您稍后恢复会话时,停止仍然适用。
  • 在 3 秒内按两次 Ctrl+X Ctrl+K停止每个运行的后台子代理的和弦也会停止 Claude 为会话的其余部分回复每个工件。要求 Claude 恢复回复不会撤销此停止。
如果传递评论的服务变得不可用或停止响应,Claude Code 会尝试重新连接一段时间,然后停止监视您的会话正在监视的每个工件。

使用 MCP 连接器拉取实时数据

artifact 可以在每次有人查看它时调用 MCP 连接器,因此页面显示的是当前数据而不是构建它的会话中的快照。来自 artifact 的连接器调用在 Pro、Max、Team 和 Enterprise 计划上可用,需要 Claude Code v2.1.209 或更高版本。在早期版本上,Claude 会发布该页面,其中包含会话在构建时收集的任何数据。 要创建一个由连接器支持的页面,请在提示中命名连接器和您想要的数据:
Claude 声明该页面可能调用哪些连接器作为发布的一部分,该页面无法调用该声明之外的连接器。只有来自您 claude.ai 账户的连接器符合条件:Claude 在声明中命名它们,当有人查看页面时,每个调用都会通过查看账户自己的连接运行到该连接器。您在 Claude Code 中配置的本地 MCP 服务器(例如来自 .mcp.json 的服务器)可以在 Claude 构建页面时提供数据,但已发布的页面无法调用它们。 页面在加载时获取数据,可以按间隔刷新或当查看者在页面上使用刷新控件时刷新。响应缓存在查看者的浏览器中,因此重新打开的页面会立即从缓存的响应呈现,然后使用新结果更新。

连接器调用如何为查看者工作

当已发布的页面调用连接器时,该调用使用查看页面的人的账户,而不是发布它的人的账户:
  • 每个查看者使用他们自己的连接器:调用通过查看账户的已连接工具进行,因此两个打开同一 dashboard 的人可能会看到不同的数据,具体取决于他们的账户可以访问什么。该页面永远看不到任何人的凭证;claude.ai 代表页面进行调用。
  • 查看者首先批准访问:claude.ai 在页面的第一个连接器调用之前向每个查看者请求权限。拒绝的查看者或未连接页面使用的连接器的查看者仍然可以看到页面,但没有其实时部分。
  • 操作也使用查看者的账户:页面可以提供控件,调用具有副作用的连接器工具,例如发布消息或更新问题。该操作通过选择控件的任何人的账户进行。
当您计划共享一个由连接器支持的页面时,请要求 Claude 在每个实时部分中包含一条后备消息,该消息命名它需要的连接器。缺少连接的查看者随后会看到要连接的内容,而不是空部分。 调用连接器的 artifact 无法在任何计划上共享到公开链接。在 Team 和 Enterprise 计划上,您可以将其保持为私有或在您的组织内共享。在 Pro 和 Max 计划上,其中公开链接是唯一的共享方式,由连接器支持的 artifact 对您保持私有。

页面对查看者显示没有实时数据

当由连接器支持的页面呈现但其实时部分对您共享的某人保持为空时,请解决这些原因:
  • 查看者未连接连接器:连接器是按账户的,因此每个查看者都需要自己连接到页面调用的每个连接器。他们可以在 claude.ai 上的设置 > 连接器下添加一个,然后重新加载页面。
  • 查看者拒绝了权限请求:拒绝在该页面加载的其余部分持续。重新加载页面会再次显示权限请求。
  • 为组织关闭了连接器调用:所有者控制管理设置中的启用 artifact 连接器切换
  • 页面调用连接器不公开的工具名称:受影响的部分对所有人(包括您)保持为空。当页面命名网关风格连接器后面的单个工具,而该连接器仅公开其自己的几个工具时,可能会发生这种情况。要求 Claude 修复页面调用的工具名称并再次发布它。 当 Claude 发布页面且该连接器的工具在您的会话中可用时,Claude Code 会检查页面声明的工具名称与它们的对比,警告 Claude 不匹配的名称,并在没有任何名称匹配时拒绝发布。在 v2.1.265 之前,它会在不检查它们的情况下发布页面。

提供文件下载

artifact 可以向查看者提供页面生成的文件,例如表格的 CSV 导出或图表的 PNG。查看者通过页面上的下载控制(例如按钮)保存文件。文件下载是 claude.ai 启用的运行时功能,按账户提供,因此 Claude 在构建控制之前会检查您的账户是否具有此功能。 查看者无法从普通下载链接或页面上的脚本保存文件,因为 claude.ai 上的 artifact 查看器会阻止页面本身启动的任何下载,包括指向 data:blob: URL 的链接。如果页面具有以这种方式构建的下载按钮,请要求 Claude 使用下载功能重新构建它们。 要提供文件,请在您的提示中要求控制和文件格式:
Claude 将下载功能声明为发布的一部分,与声明连接器的方式相同。

您可以构建的内容

Artifact 是单个 HTML 页面,因此您可以用 HTML、CSS 和内联 JavaScript 表达的任何内容都在范围内。下面的模式最常出现。

逐步讲解更改

要求一个页面,在相关行旁边呈现 diff 或设计更改并带有注释,以便审阅者可以在代码旁边阅读您的推理,而不是从描述中重建它。

比较替代方案

要求在一个页面上有多个变体,以便您可以相互评估它们。这适用于布局、文案、API 形状或实现计划。

使用交互式控件进行调整

要求滑块、切换或输入字段绑定到您正在调整的任何内容,以便您可以直接探索值,而不是描述它们。

将结果带回您的会话

Artifact 可以充当您随后交给 Claude 的决定的轻量级编辑器。要求一个导出控件,生成您可以粘贴到终端的文本,以便与页面交互的结果流回会话,而不是停留在页面上。

跟踪进行中的工作

要求 Claude 在长任务运行时保持 artifact 最新,以便任何拥有链接的人都可以跟随,而无需阅读终端。

改进视觉设计

Claude 在构建工件时应用内置设计技能,因此页面获得精心设计的调色板、排版和布局,无需额外提示。该技能还会在选择自己的设计之前查找项目中是否存在现有设计系统。设计令牌是设计系统重复使用的命名颜色、排版和间距值。为了保持工件与产品品牌的一致性,请将它们记录在 Claude 可以找到的地方,例如项目的 CLAUDE.md 或存储库中的主题文件:
Claude 将您的设计系统视为比其自己的选择更高的优先级,您的提示比两者都更高的优先级。上面的标题和格式是一个示例;任何清晰的颜色、字体和间距列表都可以。 对于排版,Claude 可以从 Google Fonts 加载字体,这是工件页面可以加载的唯一外部字体源。Claude 将任何其他字体内联为 @font-face 数据 URI,并为每个字体提供后备堆栈,因此即使字体未加载,页面仍会呈现。要使用特定字体,请在提示或设计系统中命名它。

草拟设计画布

要模拟 UI、屏幕流、登陆页面或海报,而不是构建页面,请运行 /design 并提供简要说明。Claude 将设计作为一个画布上的画板草拟,并将画布发布为一个设计工件。简要说明命名您想要绘制的内容:
在桌面浏览器中打开已发布的工件以查看画板。在画板上选择一个元素并更改它,您的编辑会自动保存。您可以将每个画板导出为 PNG 或 PDF。 /design 需要一个会话,其中 artifacts 可用,且 Claude Code v2.1.265 或更高版本。

页面约束

每个工件都是一个独立的页面。Claude Code 将您发布的文件包装在 HTML 文档外壳中,并在严格的内容安全策略 (CSP) 下提供服务,这决定了页面可以执行的操作。 生成工件使用输出令牌,就像任何其他响应一样,样式化页面比相同内容作为终端文本更耗费令牌。内联 CSS、用于交互控制的 JavaScript,尤其是嵌入为数据 URI 的图像是主要贡献者。要减少工件的令牌成本:
  • 对于图表,优先使用 SVG 或 HTML 和 CSS,而不是嵌入的光栅图像
  • 省略您不需要的交互性
  • 让页面汇总大型数据集,而不是完整地内联它们

可用性

Artifacts 需要以下所有条件。当不满足其中一个时,Claude 写入本地 HTML 文件或说它无法发布。 您的组织是否允许 artifacts 来自您的组织策略,Claude Code 从 api.anthropic.com 加载。当 Claude Code 无法加载策略时,artifacts 不可用。当您请求一个时,Claude 会说明原因。 如果涉及代理、VPN 或网络过滤器,请要求您的 IT 管理员允许 api.anthropic.com 通过。Claude Code 会在后台继续重试,一旦策略加载并允许,artifacts 就会变得可用。

禁用 artifacts

要为您自己的会话关闭 artifacts,无论您的组织设置如何,请使用以下任何一种方法: 一旦您在 --settings 文件中或使用 CLAUDE_CODE_DISABLE_ARTIFACT 关闭 artifacts,或您的管理员在托管设置中关闭它们,任何设置文件都无法将其重新打开。在 v2.1.242 之前,优先级堆栈中较高位置的文件可能会重新打开 artifacts,即使较低优先级的文件设置了 "enableArtifact": false 您也可以在项目的 .claude/settings.json.claude/settings.local.json 中设置 "enableArtifact": false 来为该项目中的会话关闭 artifacts。任何文件中的 "enableArtifact": true 都不会将其重新打开。在项目和本地设置中支持此键需要 Claude Code v2.1.242 或更高版本。 如果您添加了没有 domain: 部分的 WebFetch deny 或 ask 规则,它不会关闭 artifacts 或阻止 artifact 读取。permissionsdenyask 中的 WebFetch(domain:claude.ai) 规则确实适用于 artifact 读取

为您的组织管理 artifacts

Team 和 Enterprise 计划上的管理员从 claude.ai 管理设置 控制 artifacts。Artifact 内容存储在 Anthropic 运营的基础设施上,仅对发布组织的经过身份验证的成员可见,除非该 artifact 是公开共享的。

启用或禁用 artifacts

要为整个组织启用或禁用 artifacts,请转到 Settings > Claude Code > Capabilities 并使用 Artifacts 切换。在具有基于角色的访问控制的 Enterprise 计划上,您还可以将 artifacts 限制到特定角色:转到 Settings > Roles,编辑角色,并在 Claude Code 组下设置 Artifacts 权限。

控制来自 artifacts 的连接器调用

来自 artifacts 的连接器调用有自己的切换,与打开或关闭 artifacts 的 Artifacts 切换分开。转到 Settings > Capabilities 并使用 Enable artifact connectors 切换。同一切换控制在 claude.ai 对话中创建的 artifacts 的连接器调用,这就是为什么它位于 Settings > Capabilities 而不是 Settings > Claude Code 下。

控制公开共享

在 Team 和 Enterprise 计划上,公开共享默认处于关闭状态,因此成员只能在组织内共享 artifacts,直到管理员将其打开。要让成员将 artifacts 发布到任何人都可以查看而无需登录的公开链接,请转到 Settings > Claude Code > Capabilities 并在 Artifacts 切换下打开 External sharing。将其关闭会阻止通过现有公开链接的访问,而不会更改每个 artifact 的受众;如果您重新启用它,访问将恢复。

设置保留策略

要设置在自动删除之前保留 artifacts 的时间长度,请转到 Settings > Data & privacy controls。您可以为仍然对其作者私有的 artifacts 和已共享的 artifacts 设置单独的保留期。

查看审计日志

发布、共享和删除 artifact 各自出现在您组织的审计日志中,位于 claude_artifact_* 事件类型下,这是用于在 claude.ai 对话中创建的 artifacts 的同一系列。

将查看器域列入允许列表

claude.ai 上的查看器从沙箱 *.claudeusercontent.com 源加载每个 artifact。如果您的组织限制出站网络访问,请将该域添加到您的允许列表中,与 claude.ai 一起。有关完整列表,请参阅 网络访问要求 Google Fonts 加载字体的 artifact 也会请求 fonts.googleapis.comfonts.gstatic.com。两个主机都是可选的。如果您阻止它们,artifacts 将以备用字体呈现。使用快速拒绝而不是静默丢弃来阻止,以便字体请求立即失败,而不是延迟页面的首次呈现。 Artifacts 还可以从 cdnjs.cloudflare.comcdn.jsdelivr.netcdn.tailwindcss.comcode.jquery.comunpkg.com 加载 JavaScript 库(如 React 或图表包),而不能从任何其他外部主机加载。如果您阻止这些主机,artifact 中依赖库的部分将无法工作,与被阻止的字体不同,被阻止的库没有备用方案。在这里也使用快速拒绝,以便被阻止的库请求立即失败,而不是挂起直到超时。

使用 Compliance API 列出和删除 artifacts

Compliance API 提供端点来列出组织的 artifacts、检索特定版本的内容和删除 artifact: 有关请求和响应架构,请参阅 Compliance API 参考