#11. Artifacts

Artifacts 是 Claude 的一项核心功能——无需编程知识即可创建交互式应用、可视化图表、游戏和文档。Artifacts 对所有的 Claude 订阅计划开放，包括免费版，部分高级功能（如持久化存储和 Live Artifacts）需要付费订阅。

各订阅计划的 Artifacts 功能对比

可以通过「Settings（设置）> Capabilities（功能）」启用「Artifacts」和「AI-powered artifacts」。

#支持类型与使用场景

常见的内容类型

以下是 Artifacts 中常见的几类内容：

• 文档（Markdown 或纯文本）
• 代码片段
• 单页 HTML 网站
• SVG 图像
• 图表与流程图
• 交互式 React 组件

使用场景

官方按使用场景将 Artifacts 划分为以下几类：

• Apps and websites（应用与网站）
• Documents and templates（文档与模板）
• Games（游戏）
• Productivity tools（效率工具）
• Creative projects（创意项目）
• Quiz or survey（测验或问卷）
• Start from scratch（从零开始）

#创建 Artifacts

在 Artifacts 页面点击「New Artifacts 」,选择好创建的类型后，直接描述需求即可。例如：

用 html5 创建一个博客网站首页。

技巧：先描述需求场景，让 Claude 引导完善细节——通过几轮问答，Claude 能更准确地把握意图，创建出更贴合实际需求的内容。例如说"想给孩子讲睡前故事，但他总是听几句就走神"，Claude 会追问孩子的年龄、喜欢什么角色、故事长度等，帮助生成更合适的内容。

#AI-Powered Artifacts

借助 AI-powered Artifacts，所创建的 Artifact 可直接调用 Claude API，从而获得真正的 AI 推理内核。无需再管理 API 密钥、估算调用成本或处理部署链路——跳过传统配置环节，即可直接构建具备 Claude 智能的功能性应用。

简单来说，这个功能让 Artifact 可以:

• 内置 AI 能力：无需额外配置即可调用 Claude API
• 零成本启动：使用现有的订阅额度，无需单独的 API 密钥或按次付费
• 即时测试：在 Artifact 中直接测试 AI 功能
• 支持工具调用：可在 Artifact 内启用 web search，甚至接入 MCP 连接器(如 Asana、Google Calendar、Slack 等)

快速测试

使用这个简单提示词测试功能是否正常:

创建一个简单的聊天机器人,使用 Claude。对每个用户输入都回复一句赞美的话。

如果成功，可以看到一个"夸夸机器人"，输入任何内容都会收到 AI 生成的赞美。

持久化存储（Persistent Storage）

新版 AI-powered Artifacts 已支持跨会话持久化存储，让 Artifact 从一次性的代码预览升级为具备状态的轻量级应用。开发者可通过 window.storage 键值 API 在会话之间读写数据，从而构建日记、追踪器、排行榜、协作工具等需要"记住"用户输入的场景。

关键特性：

• 两种作用域：个人存储（每位用户保留各自的私有数据）与共享存储（所有用户访问同一份数据，适用于排行榜等协作场景）。
• 可用范围：面向 Pro、Max、Team 与 Enterprise 方案的 Claude 网页端及桌面端开放，且仅在 Artifact 发布后生效——开发与测试阶段的存储调用不会成功。
• 容量上限：每个 Artifact 最多可存储 20MB 数据。

AI-powered Artifacts 应用类型示例

学习与教育工具

• 能理解学习者具体需求的交互式 AI 导师
• 根据预设规范给出详细反馈的代码审查器
• 支持任意语言对话练习的语言学习伙伴

内容生成工具

• 将 Slack 内部帖子转化为 LinkedIn 专业文章的写作助手
• 一键生成产品需求文档(PRD)的工具
• 根据预设风格指南润色内容的编辑器

分析与决策支持

• "5 个为什么"根因分析工具
• 通过对话理解复杂数据的数据分析助手
• 帮助权衡利弊的决策辅助工具

趣味应用

• 解梦师、个性化故事生成器、AI 文字冒险游戏

计费与访问要求

• 当自己构建和测试时，API 使用计入自己的订阅额度
• 当他人使用自己分享的应用时，使用计入他人的订阅额度——不需要为他人付费
• Team 和 Enterprise 计划：在组织内部分享 AI-powered Artifacts 时，团队成员使用不会产生额外费用
• MCP 集成：Pro、Max、Team、Enterprise 计划均可在 Artifact 中使用 MCP 连接器(每位用户需独立完成 MCP 服务的鉴权)
• 登录要求：使用或查看他人分享的 AI-powered Artifact 都需要登录 Claude 账户(普通 Artifact 可匿名查看)

从原型到生产

AI-powered Artifacts 非常适合快速原型验证。当准备好将应用投入生产环境时：

1. 复制 Artifact 中的代码
2. 粘贴到开发环境
3. 使用 Claude Code 继续完善
4. 配置正式的 API 密钥和后端基础设施

#高级功能深度解析

编辑和迭代

Artifacts 支持两种编辑模式。局部更新适合小修改：如"把按钮颜色从红色改成蓝色"、"更新第一段加入问题陈述"。完全重写适合结构性调整：如"把这个按钮重新设计成开关样式"。

保存与分享

导出选项位于 Artifact 窗口右上角，点击 「Publish（发布）」 按钮后获得可分享链接，任何人都能查看和使用。

Team 和 Enterprise 用户的 Artifacts 仅在组织内共享，无法对外公开，确保企业数据安全。

MCP 集成（Pro 及以上计划）

Artifacts 可通过 Model Context Protocol (MCP) 连接外部服务，实现与 Asana、Google Calendar、Slack 等工具的交互式应用。

持久化存储（Pro 及以上计划）

发布的 Artifacts 现支持跨会话数据存储，可创建日记、习惯追踪器等需要保存状态的应用。存储分为两种模式：个人存储每个用户维护私有数据，共享存储所有用户都会看到相同的数据。每个 Artifact 限制 20MB 存储空间，仅支持文本数据。

#典型应用示例

示例一：创建网页和应用

简单计算器提示词：

创建一个科学计算器网页应用，包含基本运算、三角函数和对数运算，使用深色主题

高级应用提示词：

创建一个客户满意度模拟器 React 组件，包含多个滑块分别控制价格、质量、服务等因素，实时显示综合满意度分数和图表

技巧：可以上传设计草图或 Figma 截图，让 Claude 根据参考图生成代码。

示例二：创建数据可视化

交互式仪表板：

根据这份销售数据创建一个仪表板，包含月度趋势折线图、产品类别柱状图、地区分布饼图，支持悬停查看详情

流程图：

用 Mermaid 语法创建一个电商网站用户购买流程图，从浏览商品到支付完成

支持的图表类型包括：柱状图、折线图、饼图、散点图、TreeMap、流程图、甘特图、序列图、思维导图和 ER 图。

示例三：创建游戏

经典游戏复刻是 Artifacts 最受欢迎的用途之一：

用 HTML5 Canvas 和 JavaScript 重新创建贪吃蛇游戏，要求可以正常游玩，包含计分系统

创建一个俄罗斯方块游戏，支持方块旋转、行消除和难度递增

制作一个文字冒险游戏，玩家在魔法森林中探索，有多个结局

游戏调整提示：

加快方块下落速度

把背景改成深蓝色

添加音效反馈

示例四：创建文档模板

项目文档：

创建一个产品需求文档（PRD）模板，包含项目概述、用户故事、功能需求、技术要求、时间线等部分

商业模板：

生成一份专业的服务提案模板，使用 Markdown 格式，包含公司介绍、服务内容、定价、条款等

示例五：创建 AI 驱动应用（需开启 AI-powered artifacts）

AI 写作助手：

创建一个邮件写作助手，用户输入草稿想法，AI 帮助生成专业的商务邮件

AI 学习伙伴：

创建一个语言学习应用，让用户可以和 AI 用西班牙语对话练习，AI 会纠正语法错误并给出建议

AI 内容分析器：

创建一个文本情感分析工具，用户粘贴文本后，AI 分析其情感倾向并给出详细解读

#Artifacts 已知限制

此外，长对话可能触发长度限制，需要开启新对话继续。非常大的数据集或极复杂的可视化可能遇到性能问题。

#进阶技巧

写好提示词是关键：模糊的指令如"创建一个表单"效果远不如具体描述"创建一个 React 表单组件，包含姓名输入框、邮箱输入框、主题下拉菜单和消息文本框，使用蓝色提交按钮"。

善用迭代而非重来：每次修改都基于上一版本构建，Claude 保持完整上下文。说"把标题字号改大"比"重新做一个标题更大的版本"更高效。

调试用自然语言：遇到问题时直接描述"计算器不能正确处理小数点"，或点击错误提示旁的 "Fix with Claude" 按钮，让 Claude 自动诊断修复。

从问题出发而非从解决方案出发：描述要解决什么问题，让 Claude 建议最佳方案，往往比直接指定技术实现得到更好的结果。

原型完成后导出继续开发：Artifacts 最适合快速原型验证。当需要生产环境部署时，复制代码到本地开发环境，使用 Claude Code 或其他工具继续完善。