Claude Code让代码活了！终端里直接长出网页

新智元报道 【新智元导读】 终端党狂喜！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和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 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可以充当一个轻量级编辑器，让你在页面上做决策，再把结果交还给 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. 而最狠的一个设计，就是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给C