Claude Code让代码活了!终端里直接长出网页
创始人
2026-06-19 21:01:54

新智元报道

【新智元导读】终端党狂喜!Anthropic甩出Claude Code重磅更新:工作成果一键化身实时交互网页。无需部署、隐私安全,不管是PR演示还是数据可视化,都能从终端长出。速来解锁,让你的代码工作流直接起飞!

今天,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和Java内联,图片转成data URI。一个严格的CSP策略锁死了一切外部请求。

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

而且它是活的。

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

六大场景,个个戳中痛点

Anthropic显然想清楚了这个功能要解决什么问题。

官方文档列出的使用模式,几乎覆盖了开发者日常协作中最头疼的沟通场景:

逐步讲解变更

让Claude生成一个页面,在相关代码行旁边渲染diff并附上注释,这样审阅者可以直接在代码旁读到你的思路,而不必自己从描述中还原。

Make an artifact that walks through thisPR. Render the diff withmargin annotations andcolor-code findings byseverity.

对比多个方案

在同一页面上列出多个变体,方便横向评估。适用于布局、文案、API 设计或实现方案的对比。

Make an artifact withfour distinctly different layouts forthe settings panel. Vary density andgrouping, andlay them outasa grid witha one-line tradeoff under each.

用交互控件实时调参

加上滑块、开关或输入框,直接在页面上拖动探索参数,而不是靠文字描述来调整。

Build an artifact withsliders forthe easing curve, duration, anddelay so I can tryvalues onthistransition. Show the animation live asI move them.

把结果带回会话

Artifacts可以充当一个轻量级编辑器,让你在页面上做决策,再把结果交还给 Claude。

加一个导出控件,生成可以粘贴回终端的文字,让交互结果流回会话,而不是留在页面上。

Make atriage board artifact with each open issue as adraggable card across Now, Next, Later, and Cut columns. Add a"Copy as prompt" buttonthat gives me the final ordering topaste back here.

追踪进行中的工作

让Claude在长任务运行期间持续更新制品,这样任何有链接的人都能实时跟进,而不必盯着终端看。

Turn thismigration plan intoa checklist artifact. Check items off asyou complete them andadda note foranything 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

编辑:Aeneas 大卫

秒追ASI

相关内容

热门资讯

预约热度居高不下,百万玩家苦等... 现在游戏圈每个月都有新作冒出,但能真正让玩家心甘情愿蹲守的,却屈指可数,如果要我说一款今年最受期待的...
原创 【... 谁家二游还没个吉祥物了,原神的派蒙,绝区零的邦布,鸣潮的阿布。当然有归有,可吉祥物之间亦有差距,隔壁...
《碧蓝幻想 Relink 无尽... “让我先缓缓” 先交个底,我并不是特别喜欢游戏在推出许久后,重新打包推出扩充内容的行为。 这里面倒也...
大疆,掀起手持影像战 6月15日,大疆发布Osmo Pocket 4P(以下简称“Pocket 4P”)双主摄口袋电影机,...
苹果向巴西开放第三方应用商店,... IT之家 6 月 18 日消息,苹果公司今天公布巴西 App Store 一系列重大调整,巴西的开发...