Claude Artifacts 入门：类型、用例、共享与改编

如何开启 Claude Artifacts？

访问 Claude Artifacts 需要手动启用——步骤如下：

1. 点击 Claude 界面左下角的姓名缩写。

2. 在下拉菜单中选择功能预览（Feature Preview）。

3. 在功能预览设置中开启 Artifacts 选项。

Artifacts 的基础访问是免费的，但具体体验可能因订阅级别而异。Claude Pro 和 Team 方案的订阅者通常拥有更高的频率限制和更高级的功能，从而提升整体使用体验。

Artifacts 的类型

Claude Artifacts 可生成多种内容类型，适用于各类任务与项目。以下是一些您可以用 Artifacts 创建的内容示例：

交互式文档

Claude 能创建 Markdown 文件、纯文本文档和结构化报告，为生成书面内容提供实用工具。

数据与流程可视化

Artifacts 可使用 Plotly.js 等库生成交互式图表、仪表盘和信息图，增强数据分析与展示。

SVG 图形

您可以让 Claude 为一家科技初创公司创建 SVG 标志。随后，您可以在 Artifact 窗口内请求修改，例如更改颜色或添加新元素。

网站

Artifacts 可生成单页 HTML、多页网站结构以及交互式 Web 组件，使网页开发更高效。

时序图

Artifacts 支持流程图、时序图、甘特图和实体关系图（ERD），便于复杂可视化文档编制。

伪代码与算法

Artifacts 能创建算法流程图和分步求解思路，有助于算法设计与文档编写。

复杂代码结构

您可以让 Claude 生成一个用于管理图书馆系统的 Python 类。它会创建完整的类结构，包含添加图书、借出项目和管理用户账户的方法。

class Library:
    def __init__(self):
        self.books = {}
        self.users = {}
        self.checked_out = {}
    def add_book(self, book_id, title, author):
        if book_id not in self.books:
            self.books[book_id] = {"title": title, "author": author, "available": True}
            return True
        return False
    def remove_book(self, book_id):
        if book_id in self.books:
            del self.books[book_id]
            return True
        return False
    def add_user(self, user_id, name):
        if user_id not in self.users:
            self.users[user_id] = {"name": name, "books_checked_out": []}
            return True
        return False
    def remove_user(self, user_id):
        if user_id in self.users:
            del self.users[user_id]
            return True
        return False
…(truncated)技术支持

交互式 Web 组件

请求一个带自动补全功能的动态搜索栏 React 组件。Claude 会产出完整的 React 代码，可直接集成到您的 Web 应用中。

import React, { useState, useEffect, useRef } from 'react';
import { Search } from 'lucide-react';
// Mock data for demonstration purposes
const mockData = [
  'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry',
  'Fig', 'Grape', 'Honeydew', 'Kiwi', 'Lemon',
  'Mango', 'Nectarine', 'Orange', 'Papaya', 'Quince'
];
const AutocompleteSearchBar = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const wrapperRef = useRef(null);
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
…(truncated)技术支持

Claude Artifacts 的局限性

尽管 Artifacts 功能多样，但也存在一些限制：

• 无法创建音频或视频内容： 目前仅限于可视化与基于文本的内容。

• 无法执行代码或运行模拟： Claude 生成的代码需在外部执行。例如，Claude 可以创建一个简单的贪吃蛇游戏，但无法在 Artifacts 内部运行。

• 无法访问实时数据或外部 API： Artifacts 基于 Claude 的对话上下文，无法访问外部数据。

• 无法直接上传文件进行编辑： 用户无法将文件直接上传到 Artifact 窗口进行编辑和修改。

共享与改编（Remix）Claude Artifacts

Artifacts 的一大亮点是支持共享与协作。无论您在做团队项目还是寻求反馈，Artifacts 都能让他人轻松参与您的工作。下面看看如何充分利用这些能力。

发布您的 Artifacts

发布 Artifact 可以让您更轻松地与他人分享作品。步骤如下：

1. 创建 Artifact： 在 Claude 界面中生成您想要分享的内容。

2. 发布 Artifact： 点击 Artifact 窗口中的“发布（Publish）”按钮。系统会生成一个唯一链接，您可将其分享给他人。例如，这是我创建并发布的一个 Artifact： https://claude.site/artifacts/1229a009-df4e-406e-9a5e-eed22f353844

3. 管理访问权限： 依据您的订阅级别，您可以控制谁能访问您的 Artifact。Claude Pro 和 Team 订阅者可与团队成员共享和发现聊天内容。

改编（Remix）Artifacts

Remix 能让您基于现有 Artifact 进行修改以满足需求。操作如下：

1. 访问共享的 Artifact： 使用原作者提供的链接访问 Artifact。

改编内容： 点击 Remix Artifact 按钮，创建一个可编辑的 Artifact 副本。根据需要进行修改与改进。

保存并发布： 完成修改后，您可以保存改编后的 Artifact 并与他人分享，继续协作流程。

通过 API 访问 Artifacts

目前，Anthropic 尚未发布通过 API 访问 Artifacts 功能的官方信息。当前主要通过 Claude 的网页界面使用 Artifacts。不过，未来更新中不排除会考虑提供 API 访问的可能。

结语

Claude Artifacts 是连接对话式 AI 与实际项目工作的关键一步。

随着这一功能的演进，我们有望看到更多创新用法，进一步拓展 AI 辅助的可能性。

尽管目前 Artifacts 仍有局限，比如无法处理音频或视频内容、无法直接执行代码等，但我们预计未来更新将逐步改善其中的一些限制。

如果您想进一步了解最新的 AI 动态，推荐阅读以下博文：

• 无矩阵乘法（MatMul-Free）LLM：关键概念解析
• SAMBA 混合语言模型：关键概念解析
• 什么是“思维缓冲区”（BoT），其工作原理是什么？