Claude Code Artifacts 发布：终端生成实时交互网页，一键分享协作

终端党这次真的要兴奋起来了！Anthropic 刚刚给 Claude Code 甩出了一个极为「出格」的更新：工作成果可以在终端里直接变身成实时、可交互的 HTML 网页，而且还带私密分享链接。 不需要部署、不用配服务器，写几句对话就能把代码、PR、架构图直观地“展”出来。

此次更新的核心叫 Artifacts，它能把 Claude Code 会话中的上下文、代码库、甚至连接的工具数据全部打包成一个自包含的 HTML 页面，发布到 claude.ai 的私密 URL 上。团队成员点开链接，就能直接看到实时刷新的结果——无论是仪表盘、应用原型还是内部的轻量工具。

更酷的是，这个页面是 “自包含” 的：所有的 CSS 和 JavaScript 内联在页面里，图片转成 data URI，一个严格的 CSP 策略锁死所有外部请求。这意味着零部署成本、零安全顾虑——页面只对同一组织内的认证用户可见，不用额外起服务、绑域名。

你继续在终端里敲代码，Claude 会同步更新那个页面，同一个 URL 自动刷新，所有版本还会自动保存，随时可以回退。这不就是“终端长出的网页”吗？

终端里「长出」网页

举个简单的例子：以往你做完一个 PR，要跟同事解释修改内容，可能得对着 diff 截图讲半天。现在你直接在 Claude Code 里说一句：

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

Claude 就会把你对话里的全部上下文、代码差异、注解都揉成一个交互页面，自动在浏览器里打开。审阅者边看代码边看注释，思路一目了然。

这个页面的强大之处在于它是 “活的”——不是静态快照。你在终端里继续改、继续问，页面内容也跟着变。这其实是把开发者最常见的“费劲解释”环节直接搬到了可交互的画布上。

六大场景，个个戳中痛点

Anthropic 显然不是一拍脑袋做的功能，官方文档里列出了非常具体的用法，几乎覆盖了开发者协作中那些最头疼的沟通场景。

逐步讲解变更
让 Claude 生成一页沿代码 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.

把结果带回会话
Artifacts 也可当作轻量级编辑器，你在页面上做的决策能导回终端。比如做一个拖拽式问题优先级看板，拖完后点 “Copy as prompt”，排序结果就粘回命令行，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 持续更新制品，任何有链接的人实时跟进，不用守着终端。

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

闭环设计：将视觉交互与代码工作流打通，拖拽完直接交回终端，这就是 Claude Code Artifacts 最狠的一招。

上手指南：向你的会话索要一个 Artifact

你可以直接告诉 Claude 你的需求，它会自动生成页面并提供私密链接。以下是一些典型的使用角色与建议：

• 法务 / 开源合规：对所有依赖项进行许可证审计，直接从代码库中标记出 Copyleft 协议。
• 隐私合规：绘制数据流向图，梳理代码中个人数据的采集、存储和记录路径。
• 安全运维：将安全漏洞直接关联到具体代码行，让修复方案一目了然。
• 财务运营（FinOps）/ 云成本：根据基础设施即代码（IaC）配置，映射云资源并定位成本驱动因素。
• 软件工程师：制作审查人员真正能看懂的 PR 或 Bug 排查过程，涵盖代码差异及逻辑解释。
• 设计师与 前端工程师：基于现有的组件库生成多种 UI 交互方案，确保选中的方案可直接上线使用。
• 资深工程师与架构师：摆脱白板绘图，直接基于真实的导入图（Import Graph）绘制服务间的架构关系。
• SRE 与值班工程师：创建一个动态的故障处理页面，随着排查深入自动更新，并直接转化为事后总结。
• 工程经理：根据本周合并的 PR，自动汇总团队产出。

生成的页面可以在浏览器或桌面应用中打开，通过页面头部的分享功能即可一键共享。当你在对话中继续操作时，页面自动同步更新，始终保持最新状态。

目前，Artifacts 功能正在 Beta 测试阶段，Claude 的 Team 和 Enterprise 用户可以直接上手使用。无论通过 Claude Code 命令行工具还是桌面客户端，都能轻松调用。

实时交互式共享 AI 工作界面之争

Anthropic 这次动作够快。就在两周前，OpenAI 刚给 Codex 平台来了一次重磅升级，推出了企业级托管功能 Sites。

双方现在都在拼命抢占企业办公的地盘，战火已经从单纯的开发者工具蔓延到了实打实的业务场景。虽然功能看起来类似，但骨子里的打法截然不同：

• OpenAI 走的是「平台服务（PaaS）」路线，想成为企业的一站式工厂；Codex Sites 生成的项目可以直接跑在 Cloudflare Workers 上，从代码审核到上线发布全包，更像一个生成式 SaaS 生成器。
• Anthropic 则刻意回避了后端，官方文档直言：“Artifacts 是对工作的一次记录，而不是一个应用程序。” 这是理念上的差异：OpenAI 想搭建持久化的软件门户，而 Anthropic 让 Claude Code 始终锚定在临时性、高安全性的技术工作流上。

Claude 制品并不是为了成为软件而生，而是用安全、自动更新的可视化工具，取代白板示意图、繁琐的 Bug 复现讲解和手写进度报告。

开发者工具的范式变了

Claude Code 从去年发布至今，一直在证明一件事：AI 编程助手远不止智能补全。先是 agent 模式让它能自己读代码、改代码、跑测试；现在 Artifacts 又让工作成果可视化、可交互、可分享。  

这意味着，开发者的交付物已不再仅仅是一堆代码。一个 PR 的产出，除了 diff，还有一个带注释的交互演示页；一次安全扫描的产出，除了日志，还有一个团队能直接用来决策的 report；一次架构讨论的产出，除了文档，还有一个可以拖拽排序的方案对比板。

通过把终端变成实时协作画布，Anthropic 正在证明：AI 编程助手最有价值的产出，不只是代码本身，而是背后的上下文、推理过程，以及即时分享工作成果的能力。当 GPT Copilot 还在编辑器里打转时，战场已经被拉到了浏览器。这一局的竞争维度，已经悄然改变。

参考资料：
https://claude.com/blog/artifacts-in-claude-code
https://code.claude.com/docs/en/artifacts
https://venturebeat.com/data/anthropics-claude-code-artifacts-update-brings-live-shared-dashboards-and-interactive-workspaces-to-enterprises