Claude Artifacts 用法详解

Claude Artifacts 是 Claude 中非常重要的创作功能。它可以把一次普通对话，变成一个可以单独查看、修改、复用、分享的内容作品。

简单理解：

Artifacts 是 Claude 为你生成的“独立作品窗口”。

当你让 Claude 生成一篇长文档、一段代码、一个网页、一个图表、一个流程图，或者一个交互式小工具时，Claude 可能不会只把结果放在聊天气泡里，而是会把它放到右侧的独立窗口中。这个独立窗口里的内容，就是 Artifact。

Anthropic 官方说明，Artifacts 适合承载重要、独立、可编辑、可复用的内容，常见类型包括 Markdown 文档、代码片段、单页 HTML 网站、SVG 图片、图表流程图和交互式 React 组件等。

一句话理解 Artifacts

如果只用一句话解释：

Claude Artifacts 是 Claude 用来生成、展示、迭代和分享独立内容作品的功能。

它和普通聊天回答最大的区别是：

对比项	普通聊天回答	Artifacts
展示方式	显示在聊天消息里	显示在独立窗口中
适合内容	简短回答、解释、建议	长文档、代码、网页、图表、交互应用
修改方式	继续追问或重新生成	可以围绕同一个 Artifact 持续迭代
复用性	需要复制聊天内容	更适合下载、复制、发布、分享
典型用途	问答、解释、总结	原型、工具、文档、可视化、网页

你可以把普通聊天理解成“对话”，把 Artifact 理解成“作品”。

Artifacts 适合做什么？

Artifacts 适合生成比较完整、独立、可复用的内容。

常见用途包括：

• 写一篇 Markdown 文档
• 生成一份产品说明
• 创建一个单页网页
• 编写 HTML / CSS / JavaScript 示例
• 生成一个交互式 React 小工具
• 创建 SVG 图形
• 制作流程图
• 生成数据可视化页面
• 制作学习卡片
• 创建小游戏原型
• 做产品交互原型
• 制作计算器、表单、看板等小工具

Anthropic 曾将 Artifacts 描述为一个可以和 Claude 一起查看、迭代和构建代码、文档、可视化内容的专用空间。

什么时候会生成 Artifact？

Claude 通常会在内容满足以下特点时创建 Artifact：

1. 内容比较重要、完整，通常超过十几行；
2. 内容本身可以独立存在；
3. 用户可能会继续编辑、修改或复用；
4. 内容不需要依赖大量聊天上下文才能理解；
5. 内容可能之后还要反复查看或使用。

例如，你让 Claude 写一句话，它一般不会创建 Artifact。

请帮我写一句会议通知标题。

但你让 Claude 写一篇完整文章，就很可能生成 Artifact。

请帮我写一篇关于 Claude Artifacts 用法的知识库文章，使用 Markdown 格式，包含定义、使用场景、操作方法、Prompt 示例和注意事项。

再比如，你让 Claude 生成一个网页原型，也很适合用 Artifact。

请帮我做一个单页 HTML 页面，用来展示 AI 知识库首页。
要求：
1. 有标题区；
2. 有功能卡片；
3. 有学习路径；
4. 风格简洁现代；
5. 可以直接预览。

如何开启或关闭 Artifacts？

在 Claude 中，Artifacts 可以在设置里开启或关闭。

一般路径可以理解为：

头像 / 名称
→ Settings
→ Capabilities
→ Artifacts
→ 开启或关闭

注意

不同账号、套餐、地区、客户端和组织管理员设置可能会影响 Artifacts 是否可用。实际界面以你当前 Claude 账号显示为准。

如何访问自己的 Artifacts？

Claude 侧边栏中通常会有专门的 Artifacts 空间。用户可以在这个空间中查看自己的作品、浏览示例、从头创建新的 Artifact，或基于现有 Artifact 进行定制。

你可以把 Artifacts 空间理解成：

Claude 里专门存放创作作品的资料库。

它适合用来管理：

• 你生成过的小工具
• 你做过的网页原型
• 你写过的文档
• 你创建的交互式应用
• 你后续想继续修改的作品

Artifacts 的基本使用流程

一个典型 Artifacts 工作流如下：

提出创作需求
      ↓
Claude 生成 Artifact
      ↓
你在右侧窗口查看效果
      ↓
继续让 Claude 修改
      ↓
切换版本或回退
      ↓
复制、下载、发布或分享

例如：

请帮我创建一个 AI 知识库学习路径页面。
要求：
1. 使用 HTML、CSS 和 JavaScript；
2. 页面包含“基础入门、提示工程、功能实战、应用场景”四个模块；
3. 每个模块用卡片展示；
4. 风格简洁、科技感、适合中文用户；
5. 请以 Artifact 形式生成。

Claude 生成后，你可以继续说：

请把整体颜色改成蓝紫渐变。

请增加移动端适配。

请把卡片做成可点击展开的交互效果。

请增加一个搜索框。

每次修改都会围绕同一个 Artifact 迭代。

Artifacts 可以修改吗？

可以。

当 Claude 创建 Artifact 后，你可以直接通过对话要求 Claude 修改它。修改会显示在 Artifact 窗口中，同时也可以使用版本选择器在不同版本之间切换。

常见修改方式包括：

请把标题改得更简洁。

请把页面风格改成更适合企业官网。

请增加一个“常见问题”区域。

请把按钮颜色改成深蓝色。

请修复这个报错。

请保留当前结构，只优化文案。

如何查看、复制和下载 Artifact？

在 Artifact 窗口中，通常可以查看底层代码、复制内容或下载文件。

常见操作包括：

• 查看代码
• 复制内容
• 下载文件
• 继续让 Claude 修改
• 切换版本
• 发布或分享

如果你生成的是 HTML 页面，可以复制代码放进自己的项目。

如果你生成的是 Markdown 文档，可以复制到 VitePress、Notion、飞书文档或其他知识库工具中。

如果你生成的是 SVG，可以下载后用于页面插图或设计稿。

多个 Artifacts 怎么管理？

一个对话中可以生成多个 Artifacts。你可以在同一个对话中打开和处理多个 Artifacts，并通过聊天控件切换它们，也可以选择希望 Claude 针对哪个 Artifact 继续更新。

例如你在同一个对话中生成了：

1. 首页 HTML 原型
2. 学习路径图
3. Prompt 模板文档
4. FAQ 页面

后续你可以明确告诉 Claude：

请修改第 2 个学习路径图，不要修改首页 HTML 原型。

请基于刚才的 FAQ 页面继续扩展 5 个问题。

请把首页原型和学习路径图风格统一。

新手要注意：当一个对话里有多个 Artifact 时，最好明确说清楚要修改哪一个。

Artifacts 和 Canvas 有什么区别？

如果你同时用过 ChatGPT Canvas 或其他 AI 编辑工具，可能会觉得它们类似。它们确实都适合处理长内容和代码，但侧重点不同。

对比项	Claude Artifacts	ChatGPT Canvas
核心定位	独立作品、网页、工具、交互应用	长文档、代码、编辑工作区
强项	可预览、可交互、可发布分享	写作、代码编辑、局部修改
典型内容	HTML 页面、React 小工具、SVG、流程图	文章、代码文件、草稿
使用方式	对话生成作品窗口	对话旁边编辑内容
分享能力	可发布、分享、嵌入	取决于具体平台能力

简单理解：

Artifacts 更像“生成一个可以运行或复用的作品”。

Canvas 更像“和 AI 一起编辑一份内容”。

Artifacts 和 Claude Code 有什么区别？

Artifacts 和 Claude Code 都能处理代码，但用途不同。

对比项	Artifacts	Claude Code
使用环境	Claude 应用内	本地终端 / IDE / 项目环境
适合任务	快速原型、小工具、交互页面	真实代码库开发、修 Bug、重构
文件访问	主要围绕当前对话和 Artifact	可以读取和修改本地项目文件
部署能力	适合分享和演示	适合进入真实工程项目
使用门槛	更低	更适合开发者

如果你只是想快速做一个想法验证、网页原型或小工具，用 Artifacts 很合适。

如果你要在真实项目中开发、测试、提交代码，就更适合 Claude Code。

如何创建一个简单 Artifact？

你可以直接描述你要的东西。

例如：

请创建一个学习计划生成器 Artifact。

功能要求：
1. 用户输入学习主题；
2. 用户选择学习周期：7 天、14 天、30 天；
3. 点击按钮后生成学习计划；
4. 页面风格简洁；
5. 用 HTML、CSS、JavaScript 实现；
6. 可以在 Claude 中直接预览。

Claude 可能会生成一个可交互页面。

如果你想让它更像产品原型，可以继续追加：

请增加表单校验。

请增加“复制学习计划”按钮。

请增加移动端适配。

请把生成结果改成卡片式展示。

常见 Artifacts 类型和 Prompt 示例

1. Markdown 文档

适合写知识库文章、说明文档、教程、方案。

请以 Artifact 形式生成一篇 Markdown 文档。

主题：Claude Artifacts 用法详解
目标读者：零基础用户、企业员工、产品经理和开发者
要求：
1. 语言通俗；
2. 结构清晰；
3. 包含操作步骤；
4. 包含 Prompt 示例；
5. 适合放进 VitePress 知识库。

2. 单页 HTML 网站

适合做官网、活动页、产品页、课程页原型。

请创建一个单页 HTML 网站 Artifact。

主题：AI 知识库首页
页面结构：
1. 顶部导航；
2. Hero 区域；
3. 四个学习模块卡片；
4. 推荐学习路径；
5. FAQ；
6. 页脚。

风格：
简洁、现代、科技感、浅色背景。

要求：
使用 HTML、CSS、JavaScript，所有代码放在一个文件中。

3. 交互式 React 组件

适合做小工具、仪表盘、交互原型。

请创建一个 React Artifact。

功能：
AI 工具对比卡片筛选器。

要求：
1. 用户可以按用途筛选工具；
2. 每个工具显示名称、用途、适合人群和推荐指数；
3. 支持搜索；
4. UI 简洁；
5. 使用模拟数据即可。

4. SVG 图形

适合做图标、流程图、示意图。

请生成一个 SVG Artifact。

主题：AI 知识库学习路径图。

要求：
1. 包含 4 个阶段：基础入门、提示工程、功能实战、应用场景；
2. 使用节点和箭头连接；
3. 风格简洁；
4. 适合放在知识库文章中；
5. 背景透明。

5. 流程图和图表

适合产品流程、业务流程、学习路线说明。

请创建一个流程图 Artifact。

主题：使用 Claude Artifacts 创建网页原型的流程。

流程包括：
1. 描述想法；
2. Claude 生成 Artifact；
3. 用户预览；
4. 用户提出修改；
5. Claude 迭代；
6. 发布或下载代码。

要求：
图形简洁，适合新手理解。

6. 小工具原型

适合计算器、生成器、清单工具、学习工具。

请创建一个 Prompt 评分器 Artifact。

功能：
1. 用户输入一段 Prompt；
2. 页面根据任务清晰度、背景信息、输出格式、限制条件四个维度给出评分；
3. 给出优化建议；
4. 提供优化后的 Prompt 示例。

要求：
使用 HTML、CSS、JavaScript。
页面适合中文用户。

AI-powered Artifacts 是什么？

除了普通 Artifact，Claude 还支持带 AI 能力的 Artifacts。

简单理解：

普通 Artifact 是一个作品。AI-powered Artifact 是一个可以调用 Claude 能力的 AI 小应用。

例如：

• AI 写作助手
• 语言学习陪练
• 代码审查小工具
• 5 Whys 问题分析工具
• 个性化学习卡片生成器
• 面试模拟器
• 创意故事生成器

AI-powered Artifacts 可以在不管理 API Key、不单独处理部署和调用费用的情况下快速构建 AI 应用原型。使用时通常计入使用者自己的 Claude 使用额度。

AI-powered Artifact Prompt 示例

请创建一个 AI-powered Artifact。

应用名称：中文写作教练

功能：
1. 用户输入一段中文文字；
2. Artifact 调用 Claude 分析文本；
3. 输出语言流畅度、逻辑结构、表达清晰度评分；
4. 给出修改建议；
5. 提供一个优化后的版本。

要求：
1. 页面简洁；
2. 适合学生和职场用户；
3. 不需要用户配置 API Key；
4. 使用 Claude 能力完成文本分析。

你也可以做一个学习类应用：

请创建一个 AI-powered Artifact。

应用名称：AI 概念学习卡片

功能：
1. 用户输入想学习的概念；
2. Claude 生成 5 张学习卡片；
3. 每张卡片包含：一句话解释、生活化例子、常见误解；
4. 用户可以点击“再生成一组”；
5. 页面适合零基础用户。

Artifacts 支持 MCP 吗？

支持，但有计划和平台限制。

Artifacts 的 MCP 集成可以让 Artifact 通过 Model Context Protocol 连接外部服务，例如：

• Asana
• Google Calendar
• Slack
• 自定义 MCP 服务器
• 企业内部工具
• 文档系统
• 项目管理系统

简单理解：

MCP 可以让 Artifact 连接外部工具和数据源。

例如：

• 连接日历做日程工具
• 连接 Slack 做消息整理工具
• 连接任务系统做项目看板
• 连接内部服务做业务工具

注意

MCP 涉及外部服务授权。使用前要确认权限范围，不要随意连接敏感系统。

Artifacts 支持持久化存储吗？

支持，但通常有计划、平台和发布限制。

持久化存储可以让 Artifact 跨会话保存数据，适合有状态应用，例如：

• 日记
• 学习进度追踪器
• 排行榜
• 团队看板
• 任务清单
• 个人记录工具
• 协作小工具

可以这样理解：

存储类型	含义	示例
个人存储	每个用户保存自己的私有数据	个人日记、学习进度
共享存储	所有用户看到同一份共享数据	排行榜、团队看板

特别注意

共享存储中的数据可能被其他使用该 Artifact 的用户看到。输入敏感信息前，应确认这个 Artifact 使用的是个人存储还是共享存储。

如何发布或分享 Artifact？

发布和分享的含义取决于你的账号类型和组织设置。

一般可以理解为：

账号类型	操作名称	访问范围
Free / Pro / Max	Publish	拥有链接的人可访问
Team / Enterprise	Share	组织内部成员可访问

发布 Artifact 的典型步骤是：

打开 Artifact
→ 确认版本
→ 点击 Publish
→ 复制公开链接
→ 分享给他人

组织内部分享的典型步骤是：

打开 Artifact
→ 确认版本
→ 点击 Share
→ 点击 Share & copy link
→ 分享给组织成员

Artifact 可以嵌入到网站吗？

可以。发布后通常可以获取嵌入代码，然后把 Artifact 嵌入到其他网站中。

这意味着你可以把某些 Artifact 嵌入到：

• 个人网站
• 产品页面
• 知识库
• 课程页面
• 内部工具页

注意

嵌入前要确认 Artifact 内容是否适合公开访问，尤其是是否包含内部资料、客户信息、未公开项目内容或敏感数据。

发布和分享时要注意什么？

Artifacts 分享时存在几个重要风险。

发布前建议检查：

1. Artifact 是否包含敏感信息？
2. 原始对话中是否上传过文件？
3. 上传文件是否会被查看者访问？
4. Artifact 是否使用共享存储？
5. 是否有内部链接、账号、密钥、客户信息？
6. 当前版本是否是你想分享的版本？
7. 是否适合公开访问？

尤其要注意：

当你分享 Artifact 时，查看者可能也会看到与该 Artifact 相关的部分对话内容、附件或上下文。

因此，不要从包含敏感文档、客户资料、内部合同或未公开数据的对话中直接发布 Artifact。

如何取消发布或取消分享？

如果你不希望别人继续访问某个 Artifact，可以取消发布或取消分享。

但需要注意：

• 取消发布可能不是简单暂停访问；
• 某些情况下，同一个 Artifact 取消发布后可能不能再次用同样方式发布；
• 如果 Artifact 使用了持久化存储，取消发布可能影响相关存储数据；
• 对外发布过的链接，即使取消发布，也应该假设内容曾经被他人看到过。

所以取消发布前要谨慎。

如何 Customize 别人的 Artifact？

Claude 支持对已有 Artifact 进行定制。

当你查看一个 Artifact 时，可以基于它创建一个自己的副本。你的修改不会影响原作者的 Artifact，而是在你自己的副本上继续工作。

这适合：

• 学习别人的实现方式
• 基于模板做自己的工具
• 修改界面风格
• 增加功能
• 本地化为中文
• 改成适合自己团队的版本

例如：

请把这个英文 Artifact 改成中文版本。

请把这个学习卡片工具改成适合企业培训使用。

请把这个页面改成适合我的 AI 知识库首页。

构建 Artifacts 的实用技巧

Artifacts 很适合原型和演示，但想生成质量更高的作品，需要一点方法。

新手可以采用下面 5 个技巧。

1. 先描述目标，而不是直接说“做个工具”

不推荐：

做个学习工具。

推荐：

请做一个适合零基础用户的 ChatGPT 学习路径工具。
用户可以选择自己的身份：学生、企业员工、产品经理、开发者。
选择后，页面自动推荐学习顺序和文章列表。

2. 先让 Claude 反问你

我想做一个 AI 知识库首页 Artifact。
请先向我提出 8 个问题，帮助我明确页面目标、用户、内容结构、视觉风格和交互功能。
在我回答之前，不要开始写代码。

3. 分阶段生成

复杂 Artifact 不要一次性全部完成。

第一步：请先生成静态页面结构。
第二步：再增加样式。
第三步：再增加交互。
第四步：最后优化移动端。

4. 明确技术边界

请使用单文件 HTML、CSS 和 JavaScript 实现，不要依赖外部库。

或者：

请使用 React 实现，并尽量保持组件结构清晰。

5. 出错时直接描述问题

现在点击按钮没有反应，请检查原因并修复。

移动端布局错位，请修复响应式样式。

生成结果区域内容溢出了，请优化布局。

Artifacts 的最佳使用流程

建议按下面流程使用：

1. 明确目标：这个 Artifact 要解决什么问题？
2. 明确用户：谁会使用它？
3. 明确内容：需要展示或处理哪些信息？
4. 明确交互：用户可以点击、输入、筛选或生成什么？
5. 明确风格：视觉风格、颜色、布局、语言
6. 生成初版：先做可运行版本
7. 迭代修改：逐步增加功能和优化体验
8. 测试错误：检查交互、布局和内容
9. 导出或发布：复制、下载、发布或分享
10. 安全检查：确认没有敏感信息

适合知识库作者的 Artifact 创作模板

如果你正在搭建 AI 知识库，可以直接使用这个模板：

请帮我创建一个适合 VitePress AI 知识库的交互式 Artifact。

主题：【填写主题】

目标用户：
- 零基础用户
- 企业员工
- AI 产品经理
- 教师和学生
- 开发者

功能要求：
1. 页面顶部展示主题介绍；
2. 中间用卡片展示核心知识点；
3. 提供推荐学习路径；
4. 提供可复制的 Prompt 示例；
5. 增加常见问题区域；
6. 页面适配移动端。

风格要求：
1. 中文界面；
2. 简洁现代；
3. 适合知识库；
4. 不要使用复杂动画；
5. 色彩清爽，偏科技感。

技术要求：
请使用单文件 HTML、CSS 和 JavaScript 实现，可以直接在 Artifact 中预览。

产品原型 Artifact 模板

请创建一个产品原型 Artifact。

产品名称：【产品名称】
目标用户：【目标用户】
核心场景：【使用场景】
核心功能：【功能列表】

页面要求：
1. 顶部展示产品定位；
2. 中间展示核心功能；
3. 增加一个可交互的演示区域；
4. 增加用户使用流程；
5. 增加 FAQ。

风格：
SaaS 产品官网风格，简洁、专业、可信赖。

技术：
使用 HTML、CSS 和 JavaScript。

数据可视化 Artifact 模板

请创建一个数据可视化 Artifact。

数据主题：【主题】
数据字段：【字段说明】
展示目标：【想说明什么问题】

要求：
1. 使用模拟数据；
2. 展示关键指标卡片；
3. 展示趋势图或柱状图；
4. 增加筛选条件；
5. 输出 3 条数据洞察。

请使用单文件 HTML、CSS 和 JavaScript 实现。

学习工具 Artifact 模板

请创建一个学习工具 Artifact。

工具名称：【名称】
学习主题：【主题】
目标用户：【用户基础】

功能：
1. 用户输入学习目标；
2. 选择学习周期；
3. 自动生成学习计划；
4. 每个阶段给出练习任务；
5. 支持复制结果。

界面要求：
中文、简洁、适合新手。

常见问题

Artifacts 是免费的吗？

Artifacts 的可用性会随账号计划和功能类型变化。部分基础能力可能面向更多用户开放，但 MCP、持久化存储、AI-powered Artifacts 等能力可能受到计划、平台或组织设置限制。

建议以 Claude 当前界面和 Anthropic 官方帮助文档为准。

Artifacts 可以用于生产环境吗？

Artifacts 很适合原型、演示、教学和快速验证。

对于正式生产应用，通常还需要更完整的工程体系，包括：

• 部署
• 权限
• 安全
• 日志
• API Key 管理
• 数据库
• 错误监控
• 测试
• 代码审查

因此，Artifacts 适合快速验证想法，不建议未经审查直接作为生产系统使用。

Artifacts 能保存用户数据吗？

在支持的计划和平台中，Artifacts 可以使用持久化存储保存文本数据，但通常存在存储限制、发布要求和个人 / 共享存储区别。

如果你要保存用户输入内容，必须确认：

• 数据保存在哪里
• 谁能看到数据
• 是否是个人存储还是共享存储
• 是否包含敏感信息
• 是否符合组织安全要求

别人使用我发布的 AI-powered Artifact，会消耗我的额度吗？

一般情况下，分享 AI-powered Artifacts 时，其他用户使用它会计入使用者自己的 Claude 使用限制，而不是创建者的额度。

但具体规则可能会随产品变化，建议以 Anthropic 官方最新说明为准。

发布的 Artifact 谁能看到？

一般情况下：

• 个人用户发布后，拥有链接的人可能可以访问；
• Team 或 Enterprise 中的分享通常面向组织内部成员；
• 不同计划、组织和管理员设置可能影响访问范围。

发布前一定要确认访问范围。

Artifacts 使用注意事项

使用 Artifacts 时，建议牢记以下原则：

1. 不要把敏感信息放进公开 Artifact。
2. 发布前检查原始对话和附件。
3. 涉及共享存储时，确认数据是否会被他人看到。
4. MCP 连接外部服务时，要注意授权范围。
5. AI-powered Artifact 适合原型和演示，不等于生产系统。
6. 下载代码后正式使用前，要由开发者审查。
7. 分享给团队或公众前，要确认版本正确。
8. 不要把 API Key、密码、客户数据、合同和内部文件放进去。

新手常见误区

误区一：Artifacts 只是漂亮一点的聊天回答

不对。

Artifacts 的重点不是“展示更好看”，而是它可以承载可编辑、可复用、可交互、可分享的独立作品。

误区二：Artifacts 生成的代码可以直接上线

不建议。

Artifacts 适合原型验证。正式上线前需要经过代码审查、安全检查、测试、部署和监控。

误区三：发布 Artifact 等于只分享当前页面

不一定。

如果原始对话中包含附件和文件，分享时查看者可能获得相关附件或上下文访问权限，因此发布前要检查敏感资料。

误区四：取消发布后可以随时恢复

不一定。

部分情况下，取消发布可能影响访问、存储或后续发布能力。操作前要谨慎确认。

误区五：AI-powered Artifact 不需要考虑额度

仍然需要考虑。

AI-powered Artifact 不需要你自己管理 API Key，但使用者通常仍然会消耗自己的 Claude 使用额度。

小结

Claude Artifacts 是 Claude 中非常适合创作和原型设计的功能。

你可以用它来：

• 写文档
• 写代码
• 做网页
• 做流程图
• 做 SVG
• 做可视化
• 做交互工具
• 做 AI-powered 小应用
• 发布、分享或嵌入作品

最适合的场景是：

想法验证
知识库内容
交互原型
教学工具
数据可视化
产品演示
轻量 AI 应用

最重要的使用原则是：

先用 Artifacts 快速把想法做出来，再根据需要决定是否进入正式开发。

如果只是想快速验证一个页面、工具、交互或 AI 应用想法，Artifacts 非常合适。

如果要进入真实生产环境，就需要把 Artifact 中的代码迁移到正式项目中，并进行工程化开发、测试、安全审查和部署。

参考资料

• Anthropic Help Center：What are artifacts and how do I use them?
• Anthropic Help Center：Publishing and sharing artifacts
• Anthropic：Artifacts are now generally available
• Anthropic：Turn ideas into interactive AI-powered apps
• Anthropic Help Center：Prototype AI-Powered Apps with Claude artifacts