Claude Code 推出新功能 Artifacts：AI 编程会话输出可以变成生动的交互页面，并能实时共享给团队
公众号名称：程叙架构与AI.
作者名称：AI兴观点
发布时间：2026-06-20 11:51
✅点击上方🔺公众号🔺关注我✅
Claude Code 上线了一个叫 Artifacts 的新功能，能让 AI 编程会话的输出变成活生生的交互页面，还能实时共享给团队。
一个被忽视的问题
用过 Claude Code 的人应该都有这种体验：你让它跑一个排查、重构一个服务、分析一堆数据——活干完了，结果全在你的终端里。别人看不到，也看不懂。
你干完活得手动写个总结、截几张图、贴到群里。一场排查下来，40% 的时间在「同步信息」，真正在解决问题的时间反而不到一半。
Artifacts 就是来解决这个的。
它让每次 Claude Code 会话都能输出一个活的页面——PR 走查、系统架构图、事故时间线、发布 checklist——而且页面会随着会话实时刷新。你发一个链接出去，整个团队看到的是同一个版本。
什么是 Artifacts
官博说得很清楚：你可以把 Artifacts 理解为每次 Claude Code 会话产出的「可视化交付物」。
它不是一个独立的编辑器或白板工具，而是从你的会话上下文中直接生成的一个交互页面。这个页面可以做到的事情包括但并不限于：
- 一个 PR 走查：把 diff、变更原因、测试结果整合在一起，reviewer 点开就能看懂
- 一个服务架构图：从代码的实际依赖关系生成，不是手画的
- 一个事故追踪面板：时间线、可疑 commit、错误率曲线，随着排查过程实时更新
- 一个安全审计报告：每个发现都链到具体的代码行
- 一个许可证清单：自动扫出所有依赖的许可证类型，标红那些需要处理的
你不用写代码来搭这些页面。告诉 Claude Code「帮我把这次排查做成一个 artifact」，它就搞定了。
下面是官方放的 60 秒 Artifacts 演示，看看它的交互方式：
活的页面，不是截图
Artifacts 和传统的「把 AI 输出截个图发群里」最大的区别是：它是活的。
什么意思？当你的 Claude Code 会话继续工作时，artifact 页面会自动刷新。你正在排查事故，新的数据出来了，页面上的曲线自己就更新了。你正在做代码重构，改完了，页面上的架构图自动就变了。
“As your session keeps working, the artifact refreshes, so everyone you’ve shared it with is always looking at the latest version.”
你分享出去的链接永远是最新版。团队里的人不需要你挨个通知「更新了，重新看一下」，因为他们看到的始终是最新的。
Artifacts 的界面长什么样
官方文档配了一张完整的界面截图，可以看到 artifact 的头部工具栏、分享面板和内容区：
顶部有 artifact 标题、分享按钮、版本选择器；内容区展示交互式页面
场景拆解：一场事故排查的完整流程
官博里提到了一个真实的内测场景，我觉得很能说明问题：
一个工程师在站会前启动了一次事故排查。她把命令扔给 Claude Code，Claude Code 开始跑日志、分析代码。排查过程中，它自动生成了一个 artifact——包含时间线、可疑 commit、错误率曲线。
然后她把链接发给了团队。
在她继续排查的过程中，Claude Code 持续更新了两次这个页面。等到站会开始时，团队所有人打开同一个链接，看到的是完全一致的最新版本。
“With artifacts, team members and stakeholders don’t have to ‘walk us through what the agent found’ because they’re all looking at the same view, with the same context.”
这句话说得特别好——不需要有人「带大家过一遍 AI 发现了什么」，因为所有人看到的画面完全一样。
可以做什么：按角色分
官博列了一组非常具体的示例，按角色直接给 prompt：
| 角色 | 用法 | 示例 Prompt |
|---|---|---|
| 软件工程师 | PR 或 Bug 走查，reviewer 能跟着看 | 「帮我把这个 PR 做成 artifact——diff、变更原因、测试了什么」 |
| 安全工程师 | 发现链到具体代码行，修复目标明确 | 「把这次 review 的鉴权相关发现做成 artifact，每个都连到代码」 |
| 设计师/前端 | 多个 UX 方向，每个用真实组件实现 | 「帮我用组件库做 5 种注册页 UX 变体，选中的可以直接发版」 |
| 架构师 | 服务关系图，从真实 import 图生成 | 「把支付服务的依赖关系做成 artifact，从代码里来」 |
| SRE/值班 | 事故页面，排查过程中不断生长 | 「把这起事故做成 artifact——时间线、可疑 commit、监控曲线——边查边更新」 |
| 工程经理 | 每周上线了什么，从合并的 PR 自动生成 | 「把这周团队合了什么 PR 做成 artifact，按项目分组」 |
| 法务/开源合规 | 所有依赖的许可证自动扫描 | 「扫出所有第三方依赖和它们的许可证，标红 copyleft」 |
| 隐私合规 | 数据流向图，标注个人数据在代码中如何流转 | 「追踪代码里涉及个人数据的地方，整理成 artifact 做隐私评审」 |
| FinOps/平台财务 | 云资源映射，按服务分组 | 「按 Terraform 把云资源映射成 artifact，按服务分组，标出成本大头」 |
这里面我觉得最实用的是事故排查和PR 走查两个场景。前者解决了”查完了还得写总结”的问题，后者解决了”reviewer 不想看几百行 diff”的问题。
安全与权限
Artifacts 默认是私有的——只有你本人能看到。需要共享时，直接从页面头部发链接给团队。
关键信息：只有你组织内已认证的成员能查看，无法设置为公开；管理员可以设置全局开关和基于角色的访问控制；可以设置留存策略，组织层面提供合规 API 做审计追踪。
可用性
Artifacts 目前是 Beta 阶段，支持 Team 和 Enterprise 计划 的用户。
可以用 Claude Code CLI 和桌面端创建 artifact，页面在任何浏览器中都能打开查看。
我的一点想法
Artifacts 这个功能本身不算什么黑科技——说白了就是让 AI 把工作产出渲染成一个网页。但我不觉得 Anthropic 做这个功能是为了炫技。
它解决的是一个 「准生不养」 的问题。
过去一年，以 Claude Code、Cursor 为代表的 AI 编程工具，核心能力一直是「帮人更快地干活」。但问题在于——活是干完了，结果别人不知道你干了什么。你还要花时间组织、呈现、同步。这些成本加起来，很多时候已经超过了用 AI 省下来的时间。
Artifacts 的逻辑是：既然 AI 做了活，那就让 AI 也负责把这个活「讲清楚」。
让团队的信息同步成本接近零。让 AI 从「个人效率工具」变成「团队协作工具」。
这个方向，我觉得比多快能写代码更值得关注。
如果觉得这篇文章有帮助，欢迎点赞、在看、转发！有问题也可以在评论区留言，我会尽量回复！
内容效果不满意？点此反馈