教程

Claude Code Artifacts 实战教程:让会话产出变成可分享的实时页面

详解 Claude Code Artifacts 功能的创建、更新与分享流程,以及最新的 MCP 连接器实时数据拉取能力,教你把会话输出变成可交互网页。

2026/8/65分钟 阅读ClaudeEagle

Claude Code 的 **Artifacts(产物)**功能,能把一次会话的输出转化成claude.ai 上一个实时、可交互的网页——可以私有保存、分享给团队,或发布公开链接。2026 年 7 月的更新还带来了让 Artifact 调用你的 MCP 连接器实时拉取数据的能力。本文基于官方文档,梳理从创建到进阶用法的完整流程。

什么时候该用 Artifact

Use an artifact when terminal text is the wrong medium for what Claude produced: output that is easier to look at and interact with than to read line by line.

官方给出的判断标准很直接——当终端文本不适合承载 Claude 产出的内容时,就该用 Artifact。典型场景包括:

  • 带内联标注的 PR Diff 走查,带审阅者过一遍改动
  • 从会话已抓取数据渲染出的仪表盘
  • 并排展示多个设计方案或实现选项
  • 长任务运行过程中持续更新的调查时间线
  • 给同事发一个链接,而不是把大段输出粘贴进 Slack
  • 发布一个每次打开都通过 MCP 连接器拉取最新数据的状态看板

Artifact 不是什么

An artifact is a capture of work, not an application. It is one self-contained page with no backend.

需要明确的边界:Artifact 是工作成果的一次快照呈现,不是一个应用程序。它是单个自包含的页面,没有后端,不能存储表单输入,也不能提供多个路由。如果你需要一个真正带后端的托管内部工具,应该部署到自己的基础设施上,而不是依赖 Artifact。

创建一个 Artifact

Claude 可能会在输出适合做成页面时自主发布,你也可以直接用自然语言要求:

text
帮我做一个 Artifact,把这个 PR 的 Diff 用内联标注的方式走一遍。
text
构建一个仪表盘 Artifact,展示上周各服务的部署失败情况,
并在我继续排查时保持更新。

Claude 会先把页面写成项目中的 HTML 或 Markdown 文件,再发布。发布前会先请求权限,提示类似「Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai」。选择 Yes 后,Claude 会打印出访问链接,浏览器自动打开新页面。之后随时按 Ctrl+] 可以从终端重新打开最近的 Artifact。

注意:重新发布一个已经批准过的 Artifact 不会再次弹出权限确认。

bash
# 阻止新 Artifact 发布时自动打开浏览器
export CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0

更新 Artifact

可以直接要求 Claude 修订页面,或者让一个长时间运行的任务在有新进展时自动重新发布。Claude 会为 Artifact 自动选取标题和浏览器标签图标(emoji),两者都会出现在你的 Artifact 图库和分享链接中——如果你想指定特定的标题或图标,直接告诉 Claude 即可。

新功能:让 Artifact 实时调用你的 MCP 连接器

这是 2026 年 7 月中旬(v2.1.207–212)带来的重要更新——发布的 Artifact 现在能在每次有人查看时调用 MCP 连接器,让仪表盘展示实时数据,甚至能按需执行操作,而不是仅仅停留在「构建那一刻的快照」。

text
构建一个开放 Pull Request 的仪表盘 Artifact,
页面加载时通过我的 GitHub 连接器拉取最新列表。

关键的权限设计:每次调用都通过查看者自己账号的连接来执行,查看者需要在页面第一次调用连接器前先批准访问权限——这意味着即便你把 Artifact 分享给同事,对方看到的数据是基于他们自己的连接器授权拉取的,而不是复用你的凭证,这是一个非常合理的安全边界设计。

本周同步上线的其他 Artifact 能力

  • 公开分享链接(Public sharing links):可以生成面向公众的访问链接
  • Team/Enterprise 编辑者角色:支持多人协作编辑同一个 Artifact
  • 从 Claude Tag 会话创建 Artifact:扩展了 Artifact 的创建入口

可用性要求

计划要求:Pro / Max / Team / Enterprise 登录要求:会话需通过 /login 登录

如果 Claude 回复说无法发布,或者只写了本地 HTML 文件却没有给出链接,说明当前会话未启用该功能,需要检查账号计划是否满足要求。

实战建议

场景:Code Review 走查 → 让 Claude 生成带内联标注的 PR Diff Artifact,链接发给审阅者 场景:长任务实时追踪 → 开始一个大型重构或调查任务前,先要求 Claude 建一个进度 Artifact, 任务过程中自动更新,你可以随时打开查看而不打断当前对话 场景:团队共享状态看板 → 结合 MCP 连接器实时拉取能力,做一个「开放 PR」「CI 失败」 之类的团队共享看板,每次打开都是最新数据

总结

Artifacts 把 Claude Code 单次会话的产出,从「终端里一段会消失的文本」升级成了「可以持续更新、可以分享、可以调用实时数据的网页」。对于需要频繁向非技术同事或团队展示进展、走查结果的场景,这个功能能显著减少「复制粘贴输出到 Slack/文档」的沟通摩擦,MCP 连接器实时数据能力的加入,更是让它从「一次性快照」进化成了「持续在线的轻量看板」。


来源:Share session output as artifacts — Claude Code 官方文档,Anthropic

相关文章推荐

教程Claude Code 连接 MCP 服务器完全指南:HTTP、SSE、Stdio、WebSocket 四种方式完整梳理 Claude Code 连接 MCP 服务器的四种方式:HTTP(推荐)、SSE、本地 Stdio、WebSocket,附 claude mcp add 命令语法、认证配置、CLAUDE_PROJECT_DIR 环境变量用法,以及团队场景下的服务器审批机制。2026/7/6教程Claude Code 屏幕阅读器模式完全教程:让 VoiceOver 和 NVDA 用户流畅使用命令行 AIClaude Code 屏幕阅读器模式完全指南:三种开启方式、确认提示时序、表格朗读优化等细节,帮助视障用户顺畅使用命令行 AI 工具。2026/8/6教程Claude Code GitHub Actions 完全接入指南(v1.0 GA 版):自动 PR 与 CI/CD 集成Claude Code GitHub Actions 正式升级为 v1.0 GA 版本,支持自动模式检测和简化配置。本文提供快速搭建(/install-github-app)与手动搭建两种方式,以及从 Beta 版本迁移到 v1.0 的完整字段对照表和实战 YAML 示例。2026/7/6教程Claude Code 权限模式完全指南(2026-07 更新版):Manual/Plan/Accept Edits/Bypass结合 Claude Code v2.1.200 的权限模式改名(default 更名为 Manual),本文提供最新完整的权限模式使用指南:Manual/Plan/Accept Edits/Bypass 四种模式的行为详解、适用场景、配置示例和团队协作推荐配置。2026/7/5教程Claude Code Week 25 功能详解:Artifacts 实时共享页面、参数级权限控制与 /config 命令Claude Code Week 25 三大特性:Artifacts 让会话输出变成可分享的实时网页(Team/Enterprise Beta);参数级权限控制可精确到 Agent(model:opus) 层面;/config 命令行直接修改设置无需编辑 JSON。2026/7/3教程Claude Code Week 26 功能详解:MCP 命令行登录、Shell 命令自动响应与后台子代理权限提示Claude Code Week 26 三大核心新特性:claude mcp login/logout 支持命令行直接 OAuth 认证 MCP 服务器;Shell 命令自动响应让 ! npm test 直接得到分析;后台子代理权限提示从自动拒绝改为主会话弹出。2026/7/3