新功能:Claude Code 现支持 artifacts
摘要
Claude Code 现支持 artifacts,将会话工作转化为实时更新、可交互、可分享的网页,从而增强团队协作。
暂无内容
查看缓存全文
缓存时间: 2026/06/18 19:32
# Claude Code 现已支持 Artifacts
来源:https://claude.com/blog/artifacts-in-claude-code
*将会话中的进行中工作预览为实时交互式网页——基于完整会话上下文构建,并与团队共享。*
- 分享复制链接 (https://claude.com/blog/artifacts-in-claude-code#) https://claude.com/blog/artifacts-in-claude-code
从今天起,Claude Code 可以将工作进度捕获为一个 artifact,将 Claude Code 的工作转化为实时、可共享的视觉页面——包括 PR 讲解、系统说明、仪表盘和发布检查清单——这些页面会随着你的会话进度自动更新。
一个 Claude Code 会话可能涵盖从事件调查到服务重构,再到数月数据分析的各种场景。Artifacts 将工作内容转化为任何人均可打开和探索的网页,例如拉取请求讲解、可筛选排序的仪表盘,甚至是随着工作完成自动填写的发布检查清单。Artifacts 让团队协作共享工作变得更加轻松,从而让大家把更多时间花在构建上,减少在状态更新沟通上的消耗。
## **基于会话上下文构建**
Claude Code 使用会话的完整上下文构建 artifact,包括你的代码库、连接器以及对话本身。一个单一的事件页面可以同时呈现:来自代码库的失败测试及其背后的函数、来自已连接监控工具的错误峰值,以及你刚刚运行会话得出的根因分析。借助 artifacts,你无需连接数据源或搭建基础设施。你只需提出页面需求,Claude Code 便会基于已有信息自动构建。
## **实时更新的活动页面**
当 Claude Code 更新一个 artifact 时,已打开的页面会就地刷新,团队成员在页面发布后即刻看到更新。每次发布均为同一链接下的新版本,并保留版本历史,方便随时恢复;画廊功能则让你可以浏览和管理所有已创建的 artifacts。
根据我们内部测试,最常见的用例之一是调试。典型流程如下:工程师在站会前启动一个事件调查。Claude Code 处理日志并发布一个 artifact:包含时间线、可疑提交和错误率图表。她通过页面头部将链接分享给团队。等到站会开始时,Claude 随着调查进展已重新发布了两次,融入了最新信息。借助 artifacts,团队成员和利益相关者无需再“听我们讲解代理发现了什么”,因为他们都在查看同一视图,拥有相同的上下文。
## **对你的组织私有**
每个 artifact 默认仅对创建者私有。准备好后,你可以直接从页面与团队成员和组织共享。Artifacts 仅可由组织内经过身份验证的成员查看,不可公开。管理员通过组织级开关和基于角色的范围控制访问权限,设置保留策略,并通过合规性 API 获得组织范围的可视性。
## **快速上手**
让你的会话创建一个 artifact——或者直接提出可视化需求。以下是一些按角色划分的创意:
- **法务/开源**:对每个依赖项进行许可证审计,直接标记 Copyleft 许可证。*“构建一个 artifact,列出所有第三方依赖项及其许可证,标记任何 Copyleft 许可证。”*
- **隐私**:数据流映射,显示代码中个人数据的收集、存储和记录位置。*“将代码库中涉及个人数据的位置追踪到一个 artifact 中,供隐私审查使用。”*
- **安全**:结果直接链接到具体代码行,使修复方向明确无误。*“将本次审查中的认证相关发现构建成一个 artifact,每个发现链接到对应代码。”*
- **FinOps/平台财务**:从你的基础设施即代码中映射云资源和成本驱动因素。*“将 Terraform 中的云资源映射到一个 artifact 中,按服务分组,并标注主要成本驱动因素。”*
- **软件工程师**:一个 PR 或 bug 讲解,审查者可以真正跟随理解,内容来自 diff 及周边代码。*“创建一个 artifact 讲解这个 PR——diff、推理过程以及我测试的内容。”*
- **设计师与前端工程师**:一个界面的多种 UX 方向,每种都基于你的实际组件构建,选中的那个即可直接发布。*“给我一个 artifact,包含这个注册表单的 5 种 UX 变体,均基于我们的组件库构建。”*
- **高级工程师和架构师**:基于实际导入图的服务实际结构映射,而非白板草图。*“将支付服务的实际结构映射到一个 artifact 中,基于代码。”*
- **SRE 与值班人员**:一个随着调查过程不断丰富的事件页面,最终成为事后复盘文档。*“将本次事件转化为 artifact——时间线、可疑提交、来自监控的错误峰值——并在处理过程中重新发布。”*
- **工程经理**:一个显示实际交付内容的页面,基于已合并的 PR 构建。*“基于本周团队合并的 PR,构建一个 artifact,按项目分组显示交付内容。”*
Claude Code 会构建页面并提供一个链接。你可以在浏览器或桌面应用中打开,从页面头部共享——更新会自动发布到同一 URL。
## **可用性**
Artifacts 目前以 Beta 版本面向 Claude Team 和 Enterprise 组织提供,可通过 Claude Code CLI 和桌面应用使用,页面可在任何浏览器中查看。
***立即开始使用 Claude Code***(http://code.claude.com/docs/en/artifacts)***。***
## 用 Claude 改变你的组织运作方式
获取开发者通讯
产品更新、操作指南、社区亮点等。每月发送到您的邮箱。
请提供您的电子邮件地址以接收我们的月度开发者通讯。您可随时退订。
谢谢!您已成功订阅。
抱歉,提交时出现问题,请稍后再试。
相似文章
Claude Code Artifacts
Claude Code Artifacts 允许用户实时预览并分享他们的编码工作。
@paraschopra: 我最喜欢的与Claude Code交互方式是让它生成静态HTML文件作为输出(报告、探索、代码结构、线框等)
Paras Chopra 构建了一个Claude Code技能,可以通过浏览器评论对HTML文件进行实时迭代;用户可以在页面上留下评论以交互方式请求更新。
Claude Artifact Player
一款让用户能在本地运行 Claude Artifacts 的工具。
@KanikaBK: https://x.com/KanikaBK/status/2057778635365626231
一个全面的课程,介绍如何使用Claude Artifacts构建交互式应用程序,涵盖Artifacts的类型、工作原理以及逐步指导如何创建工具、仪表板、游戏和计算器,无需编写代码。
@jdnichollsc:@trq212 的《我们如何使用 Claude Code》工作坊:https://github.com/anthropics/cwc-workshops… 祝 Claude 编码愉快!<3 #AI #Clau…
Anthropic 发布了“Code with Claude”工作坊材料,涵盖模型选择、多智能体系统、AI辅助产品工作流以及基于评估的智能体开发。