Claude Artifacts 使用攻略：14 步从 CSV 仪表盘到 AI 小工具
完整拆解 Kevin Stratvert 的 12 分钟 Claude Artifacts 教程：上传 CSV 生成可交互仪表盘、用对话改版式、用标注工具改细节，再到自带 AI、跨会话记住数据、连接 Slack 和 Live Artifacts。14 个步骤，每一步都配真实截图。
一分钟看懂
- Artifacts 就是用一句自然语言描述生成的小应用——仪表盘、小工具、小游戏都行，免费 Claude 账号就能上手。
- 上传一个 CSV，一分钟左右就能拿到图表可悬浮查看数值的交互式仪表盘；之后的改动全靠聊天完成，不用写代码。
- 标注工具能圈住某个元素精确修改；分享是一键生成「任何人可看」的链接，Pin 可以把常用的 Artifact 置顶。
- 进阶玩法：Artifact 能自己调用 Claude、跨会话记住数据、通过 MCP 连接器接上 Slack/Trello；桌面端的 Live Artifacts 还会自动刷新最新数据。
How to Use Claude Artifacts (Full Tutorial)
频道: Kevin Stratvert · 12:42
关于截图
本页所有截图均取自上方视频，版权归原作者 Kevin Stratvert 所有；每一步都附了跳回视频对应时间点的链接。步骤讲解、图注与 FAQ 为本站原创。
从 CSV 到仪表盘（第 1–10 步）
- 1
打开 Artifacts 库
登录 claude.ai（免费账号即可），在左侧栏点 Artifacts。All 和 Yours 标签列出你创建过的所有 Artifact，Shared with you 收纳别人分享给你的，搜索框可以过滤整个库。
Artifacts 主页：All / Yours / Shared with you 三个标签，右上角是 New artifact。跳到 0:50 - 2
点 New artifact 新建
点右上角的 New artifact 按钮，Claude 会开一个新任务，而且不急着动手——先问你几个问题。它把要做的东西称作「web page」，别被带偏，那只是它搭底的载体，不管你最后要做仪表盘还是小工具。
一次点击开启引导式任务——先问需求，再写代码。跳到 1:02 - 3
回答开场问题
这个案例依次选 Dashboard、Bold & colorful 风格、Sales & revenue trends 重点。你的问题清单可能略有不同，没关系——答相关的就行，也可以全部跳过，直接在输入框里一段话把需求讲清楚。
类型、风格、重点：这几个回答决定了 Claude 第一版怎么搭。跳到 1:40 - 4
附上你的 CSV
当 Claude 问数据从哪来，回答要上传自己的数据。点输入框旁的加号，选 Add files or photos（快捷键 Ctrl U / Cmd U），选中 CSV 发送。Claude 会先读列结构，想好怎么可视化再动手。
加号 → Add files or photos → 选 CSV，Claude 先分析再生成界面。跳到 2:19 - 5
发布第一版
一两分钟后 Claude 发布 Artifact，仪表盘出现在右侧：顶部一排核心指标，下面是图表，聊天里还会总结它做了什么——1,207 笔订单、5 种口味、4 个区域，全部来自那份 CSV。点展开图标可以放大看。
「The Bake Sheet」：一份 CSV 生成的 KPI 卡片加图表。跳到 2:42 - 6
悬浮图表看精确数值
这不是一张图片，是真能用的应用。把鼠标放到折线上，会弹出当月每种口味的精确营收；柱状图、表格同样有响应。这些图表没有任何手写代码，全部由 Claude 根据 CSV 生成。
六月的悬浮提示按口味拆解营收——发布第一版就是可交互的。跳到 2:58 - 7
靠聊天改版，不动代码
哪里不满意直接说。一句「Add a dark mode toggle to the dashboard」，Claude 就重新发布一版，头部多了个日/月切换按钮，整个主题跟着变，还会记住你的选择。更大的改动也照这样在同一个会话里继续提。
一句 prompt 之后：头部多了月亮图标切换，整站换上深色主题。跳到 4:02 - 8
用标注工具改单个细节
只想改一个元素时，点 Artifact 右上角的标注工具，圈住具体位置——这里是「Kevin's Cookie Company」标题。弹出评论框：写清楚要改什么，然后选 Send to Claude 立刻生效，或选 Add comment 只留备注、页面不动。
高亮、写修改意见，然后选择立即应用还是留给同事审阅。跳到 4:50 - 9
一键分享链接
点 Share，把 General access 设成 Anyone with the link，再选发布哪个版本——Claude 保留每一版，想故意分享旧快照也行。Copy link 拿到的链接在任何浏览器打开都是完整可交互的仪表盘。
General access → Anyone with the link；版本选择器决定访客看到哪一版。跳到 5:10 - 10
置顶收藏，回到原会话继续改
回到 Artifacts 库，悬浮到卡片上打开三点菜单选 Pin，置顶的 Artifact 会单独聚成一个区域，一键直达。以后要改，去 Chat and tasks 里重新打开原来的会话——那条对话永远是这个 Artifact 的编辑入口。
三点菜单负责置顶；原聊天会话保留着，随时回来继续改。跳到 5:42
进阶：内置 AI、数据记忆、连接器与 Live Artifacts（第 11–14 步）
- 11
做一个会自己调用 Claude 的工具
Artifact 可以直接调用 Claude。新建一个 Artifact，选 Something else，描述你要的工具——这个案例是：员工输入饼干原料，Claude 生成五个命名创意。不用申请 API key，也没有后端；访客第一次点 Generate 时，Artifact 只会请求使用 Claude 的授权。
The Batch Namer：输入原料、点 Generate 5 names，AI 起的名字就出来了。跳到 7:02 - 12
让它记住数据
让 Claude 加一个收藏功能，它会先问一个设计问题：保存的内容是只存在这台浏览器，还是所有打开 Artifact 的人共用？案例选了共用。之后星标的名字会持久保存——今天关掉页面，明天打开还在。追踪表、清单、轻量项目工具都是这么来的。
私有还是共享保存——之后每条建议都带一颗跨会话不丢的星标。跳到 8:20 - 13
接上 Slack 和更多外部应用
通过基于 MCP（Model Context Protocol）的连接器，Artifact 能在 Claude 之外动手。让它加一个分享到 Slack 的按钮，授权 Slack 连接、选好频道，每条保存的创意就多了一个直接发到团队的按钮。没有原生连接器的应用可以走 Zapier MCP，几千种动作都能接。
Slack 已连接：保存的创意可以一键发进 #new-cookie-ideation。跳到 9:40 - 14
用 Live Artifacts 保持数据新鲜
在 Claude 桌面端，Live Artifacts 不做静态快照，而是从连接的应用和本地文件拉取当前数据。这个销售仪表盘由 POS 报表和 Google Drive 表格汇总而来，点头部的 Reload 就用最新数字重画——搭一次，之后每次打开都是最新视图。
桌面端的 Reload 按钮按需重新拉取数据，仪表盘不会过期。跳到 12:04