#Artifacts — 终端可视化工作台

2026 年 6 月 18 日上线。不用切窗口——终端里的工作直接变成网页。

#概述

Artifacts 是 Claude Code 的一项新功能（Beta），能把编码会话中的工作成果实时渲染成自包含的交互式 HTML 页面。你在终端里调试、审查、跑多 Agent 协同任务时，Claude Code 同时生成一个网页——队友点开链接就能看到，你继续工作，页面自动刷新。

终端里跑 Claude Code → 生成私有链接 → 队友打开 → 实时刷新

和 Claude.ai 网页版 Artifacts 的区别：

#前置条件

• Claude Team 或 Enterprise 方案（Beta 阶段，Pro/Max 稍后推出）
• 登录 Claude Code：

/login

• 在 Settings → Capabilities 中开启 Artifacts

#快速上手

#第 1 步：直接说你要什么

不需要特殊命令——自然语言描述即可：

> 帮我做一个 artifact，展示这次 PR 的 diff、修改理由和测试结果

Claude Code 会读取当前分支的 git diff、commit message、测试输出，生成一个包含代码对比、修改说明和测试状态的可交互页面。

#第 2 步：获取链接

生成后 Claude Code 输出一个私有链接：

Artifact published: https://claude.ai/artifacts/abc123

#第 3 步：分享

打开链接，点页面头部的 Share 按钮，授权组织内的成员访问。队友看到的 URL 不变，你更新后他们自动看到最新版本。

#实战场景

#场景 1：PR 审查——展示而非描述

问题：你审查了一个 PR，想向团队解释你的发现。光靠文字描述 diff 太费劲。

> 帮我做一个 artifact，展示这次 PR 审查的结果：
> - diff 高亮对比
> - 每个修改点的审查意见
> - 性能影响分析
> - 测试覆盖变化

产出：一个交互式页面，左侧 diff 面板（增删高亮），中间审查意见（🔴🟡🟢 分级），右侧测试覆盖率变化仪表。审查者点链接就能看，不用 clone 分支。

#场景 2：线上事故——实时状态页

问题：线上出了 bug，你一边排查一边有人不断在 Slack 里问"怎么样了"。

> 我正在排查订单服务 500 错误。帮我建一个实时 artifact：
> - 事故时间线（什么时候开始、发现了什么）
> - 可疑 commit 列表
> - 错误日志截图
> - 当前状态（排查中 / 已定位 / 已修复）
>
> 我排查过程中会更新，你自动刷新页面。

产出：事故状态页。你的排查进度自动同步到页面——队友不用追问，书签打开就能看到最新进展。事故结束后，页面成为事后复盘文档。

#场景 3：多 Agent 协同——Sprint 仪表盘

问题：你用 Workflow 脚本跑了 5 个 Agent 并行做一个功能，想汇总给 PM 看进度。

> 刚跑完多 Agent 协同任务，帮我做一个 artifact 汇总：
> - 每个 Agent 做了什么、改了哪些文件
> - 哪些测试通过了、哪些失败了
> - 代码量变化（增/删/改行数）
> - 审查发现的问题数量和处理状态

产出：仪表盘页面，卡片式布局每个 Agent 一张卡，进度条显示完成度，底部汇总统计。

#场景 4：架构可视化——从代码生成

问题：你刚接手一个服务，想快速理解它的结构。

> 通过 codegraph 分析当前项目，做一个 artifact：
> - 服务间调用关系图
> - 核心模块和它们的依赖
> - 每个模块的代码行数和复杂度
> - 入口点（Controller/API 路由）一览

产出：可交互的架构图，点击模块展开详情，支持搜索和筛选。

#场景 5：安全审查——漏洞地图

问题：安全团队要求审查所有第三方依赖和数据处理逻辑。

> 帮我做一个安全审查 artifact：
> - 所有第三方依赖及其许可证（标注 copyleft 风险）
> - 代码中处理个人数据的位置（手机号、邮箱、地址）
> - 这些数据经过的路径（输入 → 存储 → 输出）
> - 缺失的加密/脱敏点

产出：依赖风险矩阵 + 数据流追踪图，每个节点可点击查看对应代码。

#场景 6：设计稿对比——5 套方案并排

问题：产品给了注册页需求，你想快速出几套 UI 方案给设计师确认。

> 帮我做一个 artifact，展示注册表单的 5 套 UX 方案：
> - 单页长表单 vs 分步向导 vs 社交登录优先 vs 极简版 vs 引导式
> - 每套用项目现有的组件库和品牌色
> - 并排对比，可以切换查看

产出：并排设计对比页，每套方案独立渲染，可以全屏预览、标注差异。

#Artifact 类型速查

#版本管理

每次你让 Claude Code 更新 artifact，它会在同一个链接上生成新版本：

> 更新 artifact：我刚才修了第 3 个 bug，刷新事故页面

• 页面自动刷新，队友看到最新版本
• 版本历史保存在侧边栏 —— 可以回退到任意历史版本
• 撤销发布（Unpublish）立即收回访问权限

#与 Design Sync 配合

如果你在用 Claude Design（视觉设计工具），可以和 Artifacts 联动：

/design-sync

• Design → Code：把设计稿导入 Claude Code，生成匹配的项目代码
• Code → Design：把 Artifacts 中的设计对比结果推回 Claude Design 做视觉润色
• 导出：支持 PDF、PowerPoint、Adobe、Canva、Lovable、Replit、Vercel 等格式

#隐私与权限

#最佳实践

#✅ 什么时候用

• 需要向他人展示工作成果——代码审查、事故报告、架构说明
• 多步骤流程需要跟踪——排查问题、A/B 测试、渐进式重构
• 代替"走过来看屏幕"——发链接，队友自己看，不打断你的流
• 会议前 5 分钟生成——替代写 PPT，直接展示可交互页面

#❌ 什么时候不用

• 纯文本结果——一行输出就够了，不用生成网页
• 自己一个人看——没分享需求时，终端里看就够了
• 涉密数据——页面分享给组织内成员，确认没有敏感信息后再发布

#效率技巧

1. 边工作边更新——不是"做完再生成"，是"开始做就建 artifact，随着工作更新"
2. 一个链接解决多次打断——有人问进展，发链接。问第二次，发同一个链接
3. 取消发布 = 撤销分享——不是删除，访问权限立刻收回
4. 不要塞太多——一个 artifact 专注一个主题（一次 PR / 一个事故 / 一个项目），不要做成大杂烩

#已知限制

#相关页面

• Chrome DevTools MCP — 浏览器测试和截图
• 自动化与 CI/CD — 在自动化流程中使用 Claude Code
• MCP 服务器 — 扩展 Claude Code 能力的协议