Claude Code 上线了"一键发网页"功能:报告做完直接甩链接,部署这一步彻底消失

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 插件都行）的会话里，直接用自然语言：

复制代码

帮我把这次的分析结果做成一个网页报告，发布成 artifact

Claude 会写一个 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）