Artifacts 是什么

Artifacts 是 Claude.ai 网页端的一个"右侧工作区"。当 Claude 生成 1.5KB 以上的代码或文档时,它会自动进入 Artifact 面板, 支持:

  • React 组件:直接渲染(带 Tailwind、shadcn/ui、Recharts 等预设)
  • HTML 页面:iframe 沙箱运行
  • SVG / Mermaid:矢量图预览
  • Markdown:排版后的富文本
  • 代码(Python/Shell/...):代码视图,不执行

例 1:React 组件(收益计算器)

Prompt:

帮我做一个简单的复利计算器 React 组件:
- 输入:本金、年化利率、年数
- 输出:终值、收益、年度增长曲线
- 用 Tailwind + Recharts,风格干净现代

Claude 会生成一个完整的 <FinancialCalculator /> 组件,包含 state、图表、响应式布局,在右侧实时渲染。 你可以直接改 prompt 说"加一个月度定投选项",Claude 会 diff 式修改。

例 2:HTML 小游戏(Flappy Bird)

Prompt:

用单文件 HTML + vanilla JS 写一个 Flappy Bird,
Canvas 渲染,像素风,键盘空格控制,
有分数、碰撞检测、游戏结束重开。

Artifacts 会在 iframe 里运行游戏,空格就能玩。这个用来演示游戏开发思路、教学循环/碰撞逻辑极其直观。

例 3:Mermaid 架构图

Prompt:

画一个微服务架构的 Mermaid 流程图:
- 用户请求 → API Gateway → [Auth Service | Product Service | Order Service]
- Order Service → Kafka → [Payment Worker | Notification Worker]
- 所有 Service 都连到 Postgres + Redis

Claude 输出 Mermaid 语法,Artifacts 实时渲染成图。比 draw.io 快 10 倍,用于文档、PPT、技术方案评审场景。

例 4:数据可视化(CSV → 图)

Prompt:

这是一份销售数据(贴 CSV):
月份,产品,销量
2024-01,A,120
2024-01,B,80
...

帮我做一个 Dashboard:
- 总销量 KPI 卡片
- 月度趋势折线图
- 产品销量柱状图
- 用 Recharts

Claude 解析 CSV、聚合数据、生成多个图表组件,布局成一个真实的 dashboard。适合给老板/客户快速展示数据故事。

例 5:SVG 说明图(架构示意)

Prompt:

画一个 SVG 示意图,展示 JWT 认证流程:
1. Client 发 credentials 给 Auth Server
2. Auth Server 返回 JWT
3. Client 把 JWT 放 Authorization header
4. API 验证 JWT 签名
标注清晰,色彩柔和

输出一段纯 SVG,可以直接导出到文档。比手画快、比截图清晰。

Artifacts 最佳实践

  1. 说清技术栈:"用 Tailwind + shadcn/ui" 比单说"做个组件"结果好 10 倍
  2. 迭代式修改:第一版出来后,说"把按钮改成橙色、加一个加载动画",Claude 会精确 diff
  3. 复制到项目:点 Artifact 右上角"Copy",粘贴到自己的 React 项目基本可用(可能需要装依赖)
  4. 用 Projects 固化风格:在 Project 级系统提示里写"所有 Artifacts 默认用我的品牌色 #ff6b35",后续不用每次重复
  5. 避免的陷阱:Artifacts 不能联网、不能调后端 API、不能访问 localStorage,做原型而非生产代码

Artifacts vs ChatGPT Canvas

  • Artifacts:偏重可运行——React 组件、HTML 游戏都能实时玩
  • Canvas:偏重可编辑——长文档、代码片段的 diff 协作更强

做前端原型用 Artifacts,做长文章/代码迭代用 Canvas,各有胜场。

相关