Claude Artifacts 是 claude.ai 上的一个功能，让 Claude 可以在对话侧边栏实时生成并运行代码—— 你能立刻看到一个可交互的组件、图表或小应用，而不只是一段静态代码。
什么是 Artifacts？
Artifacts 是 Claude 对话界面的右侧面板，可以展示：
| 类型 | 说明 | 示例 |
|---|---|---|
| React 组件 | 可交互的 UI 组件 | 计算器、表单、动画 |
| HTML 页面 | 完整可运行的 HTML | 落地页、游戏、工具 |
| SVG 图形 | 矢量图表、图标 | 流程图、数据可视化 |
| Markdown | 格式化文档 | 报告、简历、文档 |
| 纯代码 | 代码高亮展示 | Python、SQL、配置 |
如何触发生成 Artifact
不需要特殊命令，自然描述你想要什么就可以：
你：帮我做一个简单的番茄钟计时器，有开始/暂停按钮
Claude：[在右侧 Artifacts 面板生成并运行一个 React 番茄钟组件]
触发提示词示例：
- 「做一个可以互动的...」
- 「帮我生成一个 HTML 页面...」
- 「用 React 实现...」
- 「画一个 SVG 流程图...」
- 「创建一个数据可视化图表...」
实时编辑与迭代
Artifacts 支持直接在面板里修改并实时预览：
你：颜色改成蓝色，字体大一点
Claude：[实时更新 Artifact，侧边栏立刻刷新显示]
也可以直接在代码标签页编辑代码，右侧预览即时更新。
使用场景举例
数据可视化
帮我做一个柱状图，展示这些数据：
- Q1: 1200万
- Q2: 1580万
- Q3: 2100万
- Q4: 1890万
用蓝色系，加上数字标注
Claude 会生成一个基于 Recharts 或 D3 的可交互图表 Artifact。
快速原型
帮我做一个用户注册表单的 HTML 原型：
- 邮箱、密码、确认密码
- 密码强度检测（实时显示）
- 提交按钮带 loading 状态
- 移动端友好
工具类小应用
做一个 JSON 格式化工具：
左边输入框粘贴 JSON，右边实时显示格式化后的结果，
有复制按钮，压缩/格式化切换
文档生成
帮我生成一份工程师简历模板，
Markdown 格式，包含基本信息、技能、工作经历、项目经历
分享和发布
在 Artifacts 面板点击分享图标，可以：
- 生成可分享链接（其他人可查看预览）
- 导出代码到本地文件
- 嵌入到网页（iframe 形式）
Artifacts vs Claude API：开发者视角
| Artifacts（claude.ai） | Claude API | |
|---|---|---|
| 使用方式 | 网页对话 | 程序调用 |
| 运行环境 | 浏览器沙箱 | 你自己的服务器 |
| 适合 | 原型验证、演示 | 生产应用 |
| 数据隐私 | 数据上传到 Anthropic | 取决于你的部署 |
| 自动化 | 手动操作 | 完全自动化 |
典型使用策略：
- 在 claude.ai Artifacts 快速做原型验证想法
- 满意后把代码复制出来
- 集成到你的项目或通过 Claude Code 完善
开发者如何在 API 中实现类似效果
Claude API 不直接支持 Artifacts，但可以让 Claude 生成可运行的代码：
python
response = client.messages.create(
model="claude-sonnet-4-5",
max_tokens=4096,
messages=[{
"role": "user",
"content": "Generate a self-contained HTML file with an interactive calculator. Output only the HTML."
}]
)
html_code = response.content[0].text
with open("calculator.html", "w") as f:
f.write(html_code)
# 直接在浏览器打开即可运行常见问题
Q：Artifacts 免费版能用吗？ claude.ai 免费版支持 Artifacts，但有使用次数限制。Pro 版无限制。
Q：React Artifacts 能引入外部库吗？ 支持通过 CDN 引入常见库（Recharts、Lodash 等），但有安全限制，不能执行危险操作。
Q：Artifacts 的代码能直接用于生产吗？ 可以作为起点，但建议经过代码审查、测试后再用于生产。
来源：Anthropic 官方支持文档