Claude Code史诗级更新:Artifacts让终端里直接长出网页

今天，Anthropic甩出了Claude Code自诞生以来最「出格」的一次更新。

这是一个让终端党集体兴奋的功能——Artifacts。

此次更新将Claude Code会话中的工作成果转化为实时、可交互、可分享的自定义HTML网页。

用户可接入实时代码和多个数据源，并将结果以可交互的URL形式发给团队成员——无论是仪表盘、应用设计，还是其他用于内部使用的产品。

想想一下，当你在终端里跟Claude Code对话写代码，它能把这段工作直接变成一个可交互的HTML网页，生成私密链接，浏览器里打开就能看。

无论是PR代码演示，项目仪表盘，还是设计方案对比，都能直接从对话里长出来。几个版本摆成网格，滑块拖着调参数，动画实时跑。

这次，Anthropic并不是把网页端Claude的Artifacts移植过来，而是直接造出一个张终端编码场景下的新物种！

终端里「长出」网页

先说最核心的机制。

从此以后，你在Claude Code里正常写代码、debug、做PR review，任何时候觉得「这个东西用纯文本看太费劲」，可以直接跟Claude说一句：

Make an artifact that walks through this PR with the diff annotated inline.

Claude会把你的对话上下文、代码库、连接的工具数据全部吃进去，生成一个自包含的HTML页面，发布到claude.ai的私密URL上。

浏览器自动弹开，页面就在眼前。

其中最重要的关键词，就是自包含。

这个页面不调外部API，不加载外部脚本，不连后端。所有CSS和JavaScript内联，图片转成data URI。一个严格的CSP策略锁死了一切外部请求。

这就意味着零部署成本，零安全焦虑。不需要起服务器，不需要配域名，不需要担心数据泄露——页面只对同组织的认证用户可见。

而且它是活的。

你继续在终端里干活，Claude继续更新那个页面，同一个URL，实时刷新。打开链接的同时不用F5，内容自动变。每次发布自动保存版本历史，随时回滚。

六大场景，个个戳中痛点

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 andgrouping, and lay them outas 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 onthis transition. Show the animation live as I move them.

把结果带回会话

Artifacts可以充当一个轻量级编辑器，让你在页面上做决策，再把结果交还给 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 andadd a note for anything you skip.

而最狠的一个设计，就是artifact能把结果带回终端。

做一个拖拽式的issue优先级看板，拖完点「Copy as prompt」，排序结果粘回终端，Claude接着干。视觉交互和代码工作流，在这里直接闭环了。

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

你可以直接向Claude要求生成一个工件，或者只需描述你的需求。以下是针对不同角色的应用建议：

法务 / 开源合规： 对所有依赖项进行许可证审计，直接从代码库中标记出Copyleft协议。

隐私合规： 绘制数据流向图，梳理代码中个人数据的采集、存储和记录路径。

安全运维： 将安全漏洞直接关联到具体代码行，让修复方案一目了然。

财务运营（FinOps）/ 云成本： 根据基础设施即代码（IaC）配置，映射云资源并定位成本驱动因素。

软件工程师： 制作一份审查人员真正能看懂的 PR或 Bug 排查过程，涵盖代码差异及逻辑解释。

设计师与前端工程师： 基于现有的组件库生成多种 UI 交互方案，确保选中的方案可直接上线使用。

资深工程师与架构师： 摆脱白板绘图，直接基于真实的导入图（Import Graph）绘制服务间的架构关系。

SRE 与值班工程师： 创建一个动态的故障处理页面，随着排查深入自动更新，并直接转化为事后总结。

工程经理： 根据本周合并的 PR，自动汇总团队产出。

Claude Code会自动构建页面并提供一个链接。

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

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

最方便的是，生成的页面你在任何浏览器里都能直接打开看。

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

可以说，Anthropic这次动作够快的，距离OpenAI给Codex平台搞那次重磅升级，满打满算也就刚过去两周。

当时，OpenAI祭出了企业级托管功能Sites。

显然，双方现在都在拼了命地抢占企业办公的地盘，战火已经从单纯的开发者工具蔓延到了实打实的业务场景。

虽然大家看起来功能差不多，但骨子里的打法完全不同：

OpenAI走的是「平台服务（PaaS）」路线，想成为企业的一站式工厂；

而Anthropic则更像是在打造一个「无状态的灵感画布」。

拿OpenAI的Sites来说，它的野心很大，直接瞄准了「全栈应用开发」。

它生成的项目是可以直接跑在Cloudflare Workers上的，最关键的是，它把后端基础设施全包了。

你可以把它理解为一个生成式SaaS生成器，从代码审核到上线发布，它是奔着直接取代企业现有的内部工具去的。

相比之下，Anthropic的Claude Code Artifacts刻意回避了后端。

官方最新文档对此直言不讳：

Artifacts是对工作的一次记录，而不是一个应用程序。

这一技术限制，实际上是Anthropic深思熟虑后的理念立场：OpenAI想为整个公司搭建持久化的软件门户，而Anthropic则让Claude Code始终锚定于临时性、高安全性的技术工作流。

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

开发者工具的范式变了

Claude Code从去年发布到现在，一直在做一件事：证明AI编程助手不止是智能补全。

先是agent模式，让Claude自己读代码、改代码、跑测试。现在是Artifacts，让Claude把工作成果可视化、可交互、可分享。

这个方向的终局是什么？开发者的交付物不再只是代码。

一个PR的产出不只是diff，还有一个带注释的可交互演示页。

一次安全扫描的产出不只是日志，还有一个团队能直接用来决策的report。

一次架构讨论的产出不只是文档，还有一个可以拖拽排序的方案对比板。

Claude Code正在从写代码的工具变成交付工作的平台，Artifacts是这个转变里最直观的一步。

通过将终端变成一个实时协作画布，Anthropic正在证明：AI编程助手最有价值的产出，不只是代码本身，而是背后的上下文、推理过程，以及即时分享工作成果的能力。

对GPT阵营来说，Copilot还在VSCode里打转，Anthropic已经把战场从编辑器拉到了浏览器。

这一局的竞争维度，已经改变。

参考资料：

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