Artifacts 交互页面
Claude Code Artifacts 的用途、创建、更新、分享、限制、组织管理和 Passion8 网关边界。
Artifacts 会把 Claude Code 的输出发布成一个私有的交互页面,适合把终端里难读的内容变成可视化结果:PR 讲解、仪表盘、设计方案对比、迁移进度、可拖拽 triage 看板等。
Artifacts 是 claude.ai 托管能力,不是普通 ANTHROPIC_BASE_URL 网关能力。使用 Passion8 token 或 API key 的会话通常不能发布到 claude.ai artifact URL,但仍可以让 Claude 生成本地 HTML 文件。
#什么时候用
| 场景 | 为什么适合 artifact |
|---|---|
| PR walkthrough | diff、注释、风险等级可以并排展示 |
| 数据 dashboard | 图表和指标比终端文本更清楚 |
| 设计方案对比 | 多个 layout、copy、API shape 一页比较 |
| 交互调参 | slider、toggle、输入框可以即时反馈 |
| 长任务状态页 | 把迁移 checklist、时间线和当前阻塞持续更新 |
不要把 artifact 当成正式应用。它是一个自包含静态页面,没有后端、不能持久化表单输入、不能在查看时调用 API,也不能部署多路由应用。
#创建和更新
你可以直接要求 Claude 生成 artifact:
做一个 artifact,把这个 PR 的 diff 按严重程度标注出来。做一个部署失败 dashboard artifact,后续排查时持续更新。Claude 会先在项目里写出 HTML 或 Markdown 文件,然后请求发布许可。首次发布需要确认;同一个 artifact 后续重新发布通常不会重复请求。发布后可以用 Ctrl+] 重新打开最近的 artifact。
常用控制:
| 操作 | 说明 |
|---|---|
| 更新 | 要 Claude 修改底层文件并重新发布 |
| 指定标题 | 让 Claude 用固定标题和图标,方便 gallery 里识别 |
| 关闭自动打开 | 设置 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 |
| 跨会话更新 | 给新会话 artifact URL,否则会创建新 artifact |
#分享边界
| 计划 | 分享能力 |
|---|---|
| Pro / Max | Artifact 默认只对自己可见 |
| Team | 可分享给组织成员或全组织 |
| Enterprise | 需要组织 Owner 启用,可按角色和策略控制 |
分享只在同一个 claude.ai 组织内生效。外部人员不能直接看私有 artifact URL。要对外分享,让 Claude 导出底层 HTML 文件,再用你自己的托管方式发布。
#页面限制
| 限制 | 影响 |
|---|---|
| 无外部请求 | CSP 会阻止外部 JS、CSS、字体、图片、fetch、XHR、WebSocket |
| 无后端 | 不能存表单、鉴权或在查看时调 API |
| 单页面 | 相对链接不会有配套路由,应该用页内锚点 |
| 文件类型 | 发布源通常是 .html、.htm 或 .md |
| 渲染大小 | 页面渲染结果需要控制在 16 MiB 以内 |
大图是最容易超限的原因。能用 HTML、CSS、SVG 表达的图,不要嵌入大体积 raster 图片。
#可用性要求
| 要求 | 说明 |
|---|---|
| 计划 | Pro、Max、Team 或 Enterprise |
| 登录方式 | 需要 claude.ai /login |
| Provider | Anthropic first-party 能力,不是 Bedrock、Vertex、Foundry 或普通 gateway |
| 组织策略 | HIPAA、CMEK、ZDR 等策略可能禁用 |
| Surface | CLI 或新版本 Desktop;Agent SDK、CI、MCP-server context 默认不适合 |
关闭方式:
| 方式 | 设置 |
|---|---|
| settings | "disableArtifact": true |
| env | CLAUDE_CODE_DISABLE_ARTIFACT=1 |
| permissions | 把 Artifact 放进 deny 规则 |
#Passion8 下的替代工作流
如果你的主要目标是用 Passion8 跑模型,建议把 artifact 思路转成本地静态产物:
- 让 Claude 写
docs/artifacts/<name>.html或 Markdown。 - 用项目现有 CSS 或组件系统渲染。
- 通过当前 docs 站、内部静态服务器或 PR 附件分享。
- 需要持续更新时,把“更新 HTML 并重建 docs”写进任务要求。
这样不会依赖 claude.ai artifact 发布,也更容易接入你自己的权限、域名、审计和缓存策略。
#成本和缓存
| 项目 | 影响 |
|---|---|
| 生成 HTML/CSS/JS | 输出 token 通常比纯文本更多 |
| 大数据直接内联 | 会增加上下文和输出成本 |
| 反复更新 | 每次更新都把已有文件和新要求带入会话 |
| 发布 URL | 发布动作本身不让本地 Passion8 prompt cache 共享给云端 |
长 artifact 适合在自然断点 /compact,或把设计规则写进项目文档,避免每次从头解释视觉要求。
#官方参考
Support / 支持
Need help? / 需要帮助？
接入、计费与模型异常可邮件联系；服务可用性以状态页为准。
For setup, billing, or model issues, email us. Check the status page for uptime.
也可使用右下角微信 / QQ 客服 · WeChat / QQ support is available at the bottom right
