Claude Artifacts 怎么用？侧边画板神器解析

30 秒了解 Claude Artifacts 是什么

Claude Artifacts 是一个出现在对话右侧的「专用展示窗口」，专门放有点长、能独立运行的内容——代码、文档、网页、SVG 图、React 小组件。

官方定义里 Artifact 是「significant and self-contained, typically over 15 lines」——重要、自成体系、通常超过 15 行。简单说：

• 你让 Claude 写一段 30 行的 Python 函数 → 出现 Artifact
• 你让 Claude 写一段说明性的文字 → 直接在对话里出
• 你让 Claude 写一个完整的 HTML 网页 → 出现 Artifact 而且能直接在右侧渲染出来

这是 Claude 跟其他 AI 最大的视觉差异：别的 AI 是「全在对话框里」，Claude 是「对话 + 右侧画板」分屏。

准备工作

1. 账号 + 套餐

所有套餐都能用基础 Artifacts（包括免费版）。但有几个进阶功能限付费：

• MCP 集成（连 Asana、Google Calendar、Slack 等外部服务）：Pro / Max / Team / Enterprise
• 持久存储（Artifact 跨对话存数据，单个最大 20MB）：付费版

2. 用支持的模型

Artifacts 在 claude.ai 网页和桌面客户端默认可用。手机版能看 Artifacts 但调代码、改 HTML 体验不如电脑。

3. 知道哪些任务会触发 Artifact

不是所有回答都出 Artifact。Claude 会根据「内容是否长 + 是否独立」自动判断。如果你想强制出，就在 prompt 里说「请用 Artifact 给我」。

详细操作步骤

第 1 步：发起一个会触发 Artifact 的请求

最常见的 5 种触发场景：

1. 写完整代码（任何语言，超过 15 行）
2. 写一篇完整文档（Markdown 格式）
3. 写一个 HTML 网页（带样式那种）
4. 画 SVG 图、流程图
5. 写一个能在浏览器跑的 React 小组件

试一段最简单的：

用 HTML + CSS 写一个「番茄钟」小工具，25 分钟工作 + 5 分钟休息的循环，有开始 / 暂停 / 重置按钮。

发出去后，右侧自动弹出 Artifact 窗口，里面是 HTML 代码，而且会直接渲染成可点击的小工具——你点开始就能用了。

第 2 步：在 Artifact 里切换视图

Artifact 窗口右上角通常有 2-3 个标签：

• Preview（预览）：渲染后的效果（HTML/React 组件能看到运行结果）
• Code（代码）：源代码
• 其他：如「Versions」（版本历史）

切来切去看代码 vs 效果，比从对话里复制粘贴方便很多。

第 3 步：让 Claude 修改 Artifact

直接在对话里说「把这个番茄钟改成 50 分钟工作 + 10 分钟休息」「按钮颜色改成蓝色」「加一个声音提示」等等。

Claude 会就地更新这个 Artifact，不会再弹一个新的。每次修改会生成一个版本号，你可以通过版本选择器回到之前的版本。

第 4 步：导出 Artifact

Artifact 窗口右上角的菜单（通常是三个点或下载图标）：

• 复制到剪贴板：把代码或内容复制走
• 下载文件：保存成本地文件（HTML 文件、PNG、SVG 等）
• 查看代码：切回 Code 标签看源代码

复制走之后你可以在自己的项目里继续改。

第 5 步：一个对话里管理多个 Artifact

一段对话能产生多个 Artifact（比如先写前端，再写后端，再写测试代码）。

通过对话顶部或 Artifact 切换器可以在多个 Artifact 间跳转。每个 Artifact 都独立维护自己的版本历史。

Artifacts 能做的 6 类内容

1. 代码（任意语言）

Python、JavaScript、Go、Rust、SQL、Shell 脚本……写完后 Artifact 里高亮显示。

2. Markdown 文档

写报告、写 README、写技术文档时自动出 Artifact，能直接看渲染后的效果。

3. HTML 网页（带样式 + JS）

最实用的一类。能写出完整的单页应用，包括前端样式、交互逻辑。

4. SVG 图

简单图标、流程图、示意图。可以直接保存为 .svg 文件用在网页或文档里。

5. Mermaid 流程图 / 时序图

写技术文档常用的「箭头连接节点」式的图，Claude 能输出 Mermaid 代码自动渲染。

6. React 组件

React 单文件组件，能在 Artifact 里实时跑（带状态、带交互）。这是「AI 帮你造小工具」最强的一类。

5 个让 Artifact 更好用的技巧

1. 「迭代式开发」最适合 Artifact

不要一次性把所有要求都说完，分多轮迭代：

• 第 1 轮：让它写一个粗糙版本
• 第 2 轮：让它加某个功能
• 第 3 轮：让它改某个样式
• ……

每轮都有版本号，不满意可以回到上一版。

2. 把多个文件合并到一个 Artifact

如果你做一个小项目需要 HTML + CSS + JS 三个文件，让 Claude 全部内联在一个 HTML 里（用 <style> 和 <script> 标签）。这样能直接在 Artifact 里跑，不用搭本地环境。

3. 让 Artifact 调用 Claude 的「AI 能力」

付费版支持「AI-powered Artifacts」——你写的小工具里可以调用 Claude 的能力（比如做一个「翻译小工具」，背后就是 Claude 在翻译）。

具体语法和限制见 Anthropic 官方文档。

4. 给 Artifact 接外部服务（MCP）

Pro/Max/Team/Enterprise 用户可以让 Artifact 连接外部服务：

• 让 Artifact 读你的 Google Calendar
• 让 Artifact 创建 Asana 任务
• 让 Artifact 给 Slack 频道发消息

这些都通过 MCP（Model Context Protocol）实现。

5. 用持久存储做「跨对话」的小工具

付费版支持 Artifact 持久存储数据（单个 20MB 上限）。比如做一个「日记本」工具，关掉对话再打开还能看到之前写的内容。

一个体验 Artifact 的入门 prompt

下面这段 prompt 一次能体验出 Artifact 的 80% 能力：

请帮我用 HTML + CSS + JavaScript 做一个「个人习惯打卡」单页应用，要求：

顶部一个输入框，可以添加新习惯（比如「每天喝 8 杯水」）
添加后习惯出现在列表里，每个习惯旁边一个「打卡」按钮
点打卡按钮当天就算完成，按钮变绿色
顶部显示「今天已完成 X 个习惯 / 共 Y 个」
整体样式干净简洁，移动端友好
所有代码内联在一个 HTML 文件里（不要外链 CSS/JS）
用 localStorage 保存数据，刷新页面不丢
习惯列表支持删除（每个习惯旁边一个删除按钮）
写完后告诉我：

这个应用现在还缺什么常用功能
接下来如果只能加 1 个功能你建议加什么
数据隐私上有哪些注意点（localStorage 的局限）

跑完会出一个完整可用的小工具，你能在 Artifact 里直接点按钮试。

常见坑 + 解决办法

分享 Artifact 给别人

Artifacts 可以「发布」成公开链接给别人看，但有几个细节：

• 免费版能看，不一定能发布；具体见 Claude Artifacts 怎么分享 教程（路线图）
• 公开发布的 Artifact 任何人有链接都能看，不要放敏感内容
• 公开发布后的 Artifact 是「快照」，你后续在对话里改不会同步到已发布版

重要：分享前自己检查一遍 Artifact 里有没有 API key、个人信息、公司机密。

不适合 Artifact 的场景

• 超大型项目：Artifact 不适合管 50+ 文件的真实工程，用 GitHub + 本地 IDE
• 需要后端服务：Artifact 在浏览器里跑，不能起后端进程
• 多人协作开发：Artifact 是单人对话的产物，团队协作用 Git + IDE
• 生产环境部署：Artifact 是「快速原型 / Demo」工具，不是生产代码托管

下一步

• Claude 是什么？小白入门
• Claude 怎么注册
• Claude Projects 怎么用：Projects 里的 Artifact 怎么管
• Claude 模型怎么选：Sonnet / Opus 写代码哪个适合 Artifact
• Claude 客户端怎么下载：桌面端的 Artifact 体验更好
• Claude Pro 值得买吗：付费版的 MCP / 持久存储

常见问题

Q：Artifact 跟 ChatGPT 的 Canvas 有什么区别？

理念类似（都是「对话 + 侧边专用空间」），但 Claude Artifact 更早推出且对 HTML/React 实时渲染做得更细。具体对比见 Claude vs ChatGPT 教程。

Q：Artifact 能在 Project 里用吗？

可以。在 Claude Projects 里发起的对话同样会产生 Artifacts，而且能用 Project 知识库做参考。

Q：免费版的 Artifact 有什么限制？

免费版能看、能改、能下载基础 Artifacts。但 MCP 集成、持久存储这些进阶能力要付费版。

Q：Artifact 写出来的代码能商用吗？

代码版权归你（按 Anthropic 服务条款），但要自己检查代码质量和安全性。Claude 写的代码不保证无 bug 无漏洞，生产环境用之前要 code review。

Q：Artifact 里的代码能直接部署到 Cloudflare Pages / Vercel 吗？

可以。把代码下载下来，按部署平台的标准流程上传或者用 Git 推上去即可。Artifact 不直接帮你部署，但写出来的代码是标准 HTML/JS，能跑在任何静态托管。

Q：能让 Artifact 接我的数据库吗？

不能直接接。Artifact 在浏览器沙箱里跑，不能直接连后端数据库。但你可以让 Artifact 通过 fetch 调用你自己写的 API（如果你的 API 是公开的 HTTPS）。

Q：Artifact 写错了，怎么让 Claude 重试？

直接在对话里说「重写这个 Artifact，按以下要求……」即可。重写会产生新版本，原版本仍能通过版本选择器找回。

Q：手机上能用 Artifact 吗？

能看、能基础操作，但小屏看代码、调代码效率低。复杂 Artifact 建议在电脑端用 Claude 客户端 或浏览器。