6 月 18 日 Claude Code 悄悄上线了 Artifacts 发布功能，中文社区几乎还没有讨论。我拿一个真实调研任务完整跑了一遍：从数据采集、分析到一句话发布成可分享的交互网页，全程没离开终端。这篇讲清楚它是什么、怎么用、坑在哪，最后附真实案例。
一、先看效果
我让 Claude Code 做了一份"微信公众号 AI 赛道"的调研，结束时说了一句：
把调研的数据和结论整理成报告发布出来几分钟后它甩给我一个链接，点开是这样的页面：
- 30 天微信指数交互折线图（带 hover 十字线和 tooltip）
- 竞品格局、热文榜的完整数据表格
- 自动适配亮色/暗色主题
- 一个独立 URL，微信里发给朋友直接打开
没有建仓库、没有 npm run build、没有 Vercel/GitHub Pages，一个部署动作都没有。这就是 Claude Code Artifacts。
二、这和 2024 年那个 Artifacts 不是一回事
看到 "Artifacts" 很多人第一反应是 claude.ai 聊天页右边那个预览面板------那是 2024 年 6 月随 Claude 3.5 Sonnet 推出的老功能。这次的 Claude Code Artifacts（2026 年 6 月 18 日上线） 同源但完全是另一个定位：
| 维度 | 老 Artifacts（2024） | Claude Code Artifacts（2026.6） |
|---|---|---|
| 在哪 | claude.ai 聊天侧边栏 | 独立 URL：claude.ai/code/artifact/<id> |
| 谁能看 | 只在会话里看 | 链接可分享，任何浏览器打开 |
| 生命周期 | 跟着聊天记录走 | 持久托管，不会自动删除 |
| 更新 | 会话内重新生成 | 重新发布同一文件 = 原 URL 原地更新 |
| 管理 | 无 | claude.ai/code/artifacts 集中管理、版本历史 |
一句话：老 Artifacts 是"预览"，新 Artifacts 是"交付"。
三、怎么用：零配置，一句话的事
Claude Code（CLI / 桌面端 / Web / IDE 插件都行）的会话里，直接用自然语言：
帮我把这次的分析结果做成一个网页报告，发布成 artifactClaude 会写一个 HTML（或 Markdown）文件，然后调用内置的 Artifact 工具发布，返回链接。你也可以指定内容形态：
做成数据看板，图表用 SVG，要支持暗色模式几个实用机制：
1. 同路径重发 = 原地更新。 同一个文件改完再发布，URL 不变。这意味着你可以让一个"项目进度看板"每天更新，链接永远是那一个------收藏一次，天天有效。
2. 版本历史。 每次发布可以带一个版本标签，页面上能回看历史版本。
3. 默认私密。 发布后只有你自己能看，要分享得在页面的分享菜单里主动开放。不用担心报告里有敏感数据被公开索引。
4. 跨会话更新。 换了个新会话也能指定更新之前发布的 artifact，不会丢链接。
四、限制：严格 CSP，页面必须自包含
这是最容易踩的坑。Artifact 页面有严格的内容安全策略（CSP），禁止一切外部请求：
- ❌ CDN 引入的 JS 库（没有
<script src="https://cdn...">） - ❌ 外部字体（Google Fonts 不行）
- ❌ 外链图片、fetch/XHR/WebSocket
所有 CSS/JS 必须内联，图片要转 data URI。所以它适合的是静态自包含页面：报告、看板、demo、文档，而不是要调接口的动态应用。
好消息是这个约束是 Claude 自己遵守的------你不用管，它生成时就会把所有资源打进一个文件。我那份报告的交互折线图就是纯手写 SVG + 原生 JS，零依赖。
另外：上线初期 beta 面向 Team/Enterprise 计划，目前已在逐步放开（我用个人订阅实测可用），具体范围以官方文档为准。
五、真实案例：一份公众号赛道调研的完整流程
说回我这个案例，完整流程是这样的：
第 1 步：数据采集。 我用 Apify 上的微信公众号 actor（云端跑，不碰本地账号）拉了几类数据：
bash
# 以 articleSearch 为例，run-sync 模式直接返回数据
curl -X POST "https://api.apify.com/v2/acts/<actor-id>/run-sync-get-dataset-items?token=$APIFY_TOKEN" \
-H "Content-Type: application/json" \
-d '{"operation":"articleSearch","keyword":"AI","subSearchType":"HOT","maxPages":1}'拿到了：微信指数 30 天走势、HOT 热文榜 20 篇、竞品公众号前 21 名、搜索联想词、单篇爆文的全量互动数据（阅读/赞/在看/转发/藏/评）。
第 2 步：让 Claude 分析。 它自己发现了一些我没想到的结论，比如样本爆文的转发数是点赞的 3.4 倍------公众号的增长引擎是转发裂变，不是点赞。
第 3 步：一句话发布。 "把数据和结论整理成报告发布出来"。Claude 生成了带交互图表的 HTML，调 Artifact 工具发布，返回链接。
第 4 步（可选）：持续更新。 下周我换个关键词重跑调研，让它更新同一个 artifact，链接不变，版本历史里能对比两次数据。
整个过程里 Artifacts 解决的痛点很具体：以前 AI 生成的 HTML 报告，要么本地 open index.html 自己看，要么为了给别人看专门走一遍部署。现在这一步消失了。
六、哪些场景值得用
实测下来我认为的适用清单：
- 调研/分析报告------数据 + 图表 + 结论，发给决策的人
- 技术方案评审页------比在群里甩 markdown 文件体面得多
- Bug 复盘/事故报告------时间线 + 根因图，持久可回溯
- 项目进度看板------同 URL 每日更新，团队收藏一次就够
- 前端 demo/原型------自包含的交互页面，给 PM 秒懂
不适合：需要调后端接口的应用、需要 SEO 的公开内容（它默认私密，也不是给搜索引擎准备的）。
七、总结
Claude Code Artifacts 把 "AI 生成网页" 的最后一公里------部署和分享------直接砍掉了。对我这种经常要产出报告给别人看的人，它改变的不是能不能做，而是做完顺手就能给出去。
上线快一个月，中文社区还基本是空白，如果你在用 Claude Code，建议今天就试一句：
把我们刚才聊的内容整理成网页，发布成 artifact有问题评论区聊。
参考：
- 官方博客：Artifacts in Claude Code（claude.com/blog/artifacts-in-claude-code）
- Claude Code Changelog（code.claude.com/docs/en/changelog.md）