在 Twitter 上看到很多关于Anthropic Artifacts（Claude AI）如何在短时间内构建小程序、游戏甚至 Figma 插件的帖子后，我有很多疑问！

“Artifacts 是什么？这些东西能走多远？它们会取代开发人员吗？还是只是更多的 AI 炒作？”

如果 Artifacts 可以在 2 小时内构建一个功能齐全的 Figma 插件，那么还有什么可能呢？我自己也被这种炒作所吸引，因此我深入研究了是否有可能使用 AI 从头到尾构建一款小游戏。以下是我最终的结果：

虽然我使用 Artifacts 作为基础，但我发现了它的局限性，以及何时最好使用其他工具。因此，这篇文章旨在消除任何炒作，展示 Artifacts 是什么、何时使用它们，以及大量有趣的用例和示例！

让我们先来了解一下 Artifacts 是什么：

---

Claude Artifacts是什么？

如上所示，Claude Artifacts 允许我们创建并立即运行小程序、游戏和 Web 工具 – 大大减少了创建功能性应用程序所需的工作量。与您从 ChatGPT 或 GitHub Copilot 获得的代码片段和建议不同，在这里，您的想法无需离开聊天即可实现。无需单独的 IDE、项目设置或复杂的环境。

Artifacts 允许 Claude 在与主对话不同的专用窗口中与您分享大量独立内容。Artifacts 让您可以轻松处理您可能想要修改、构建或稍后引用的重要内容。- Anthropic

它运行生成的代码的方式确实降低了任何人创建和运行软件的门槛——无论是经验丰富的开发人员还是完全不熟悉编码的人。同时，代码 Artifacts 将一种开发过程与聊天界面融合在一起：

---

融合对话与发展

工件是聊天界面旁边的附加内容，位于其专用窗口中。通过这种方式，Claude 遵循与以往相同的对话流程，但能够提供更完整的答案，例如实际的网页设计、可运行的代码或文档。

想象一下这样一个工作空间：人工智能不只是提供代码片段，而是积极参与开发过程

启用该功能即可开始使用：

Artifacts 通过在聊天中提供可运行的应用程序，使编码对话更进一步。当您讨论和完善您的想法时，应用程序会重建，随时可供您与最新版本进行交互。

智能界面 – 在后台执行大量操作Claude Artifacts 版本控制和代码预览

在后台，Claude 处理许多典型的开发任务，将程序员熟悉的元素融入聊天界面。虽然它不是 IDE，但它具有版本控制等功能，所有这些都在对话的上下文中完成。其中一些方面包括：

• 安装依赖项——代码工件安装必要的依赖项，如 React、Framer Motion、Shadcn 等
• 版本历史记录——工件具有版本历史记录，因此您可以返回到以前的迭代——在优化代码时特别有用！
• 发布和混音– 从社区中查找交互式代码工件并在您自己的帐户中运行它们。提出更多问题并定制其他人的工件。

在博客中了解更多信息：

Claude3.5 Sonnet是什么？【详细介绍】

---

工件示例

工件非常适合小型单一用途应用程序，例如仪表板、SVG、表单（包括日期选择器或音量滑块等小型组件）、可视化以及所有这些的组合。以下是几个示例：

设计生成器应用程序

一个流行的用例，尤其是对于设计师来说，是像 SVG 生成器这样的东西。这里 Kevin Cannon 基于PJ Onori 的原创作品创建了一个“Dieter Dots 网络应用程序” ：

🔘 迪特尔·多茨

Kevin Cannon 改编自 @pjonori 的 Dieter Dots

您可以在此处试用Artifact。Twitter上还有更多类似的内容，但这是其中比较酷的一个，可混音的 Artifact是共享的。Daniel Destefanis甚至将其变成了 Figma 插件——但不确定这里是否使用了 Claude：

🎨 网站调色板生成器

这是另一个调色板生成器示例。我花了 10 分钟就想出了这个，并配有颜色样本选择器，可以调整文本颜色以使其易于访问。这只花了 3-4 个提示：调色板生成器应用程序：在此处查看工件

---

PDF 至仪表板

Artifacts 的另一个很棒的用例是将 PDF 或任何长篇内容转换为交互式仪表板。在下面的例子中，我粘贴了整本书《梦想》（Henri Bergson 著，可在 Project Gutenberg 上找到），并要求生成一个仪表板：

🌚 柏格森的梦境仪表板

该仪表板直观地展示了柏格森梦境理论的各个方面，并比较了清醒状态和睡眠状态：柏格森的梦想仪表盘

我的提示要求提供一些功能，以使应用程序更有趣且更有用/信息量：

• 夜间切换：在人的梦境和清醒状态之间切换（也可以将暗模式更改为亮模式）
• 说明：应用程序中使用的量表是基于柏格森的书的估计，因此解释和免责声明很重要
• 引言：我还要求引用一些引言，以便将视觉效果与柏格森的书真正联系起来。

在这里尝试一下。

---

小趣味设计细节组件

另一件有趣的事情是制作更小的交互式组件。以下是基于Tunnel Bear 密码字段的示例。熊的眼睛跟随输入字段中的文本位置，并在用户输入密码时关闭：

🐻 Bear 输入框动画

熊的眼睛跟随输入字段，并在密码字段时关闭

原版（见下文）的图形要好得多，但 Artifact 的功能令人印象深刻，它能够在几个提示内跟踪输入字段。Design Spells 中的 TunnelBear 交互

👀 大眼珠子

您可以将其做得更小，只需创建单个组件即可。这是Jess Rosenberg制作的一款活动眼珠工艺品，它实际上促使我（无意双关）尝试制作上述隧道熊互动：

---

可视化和解释器

工件对于可视化也非常有用，可以用不同的方式呈现数据和理论 – 从简单的图表到更复杂的东西。许多不同的理论都可以用交互方式解释，但我们需要解释的主要内容可能是如何将 div 居中：

1. 如何将 div 居中

我经过几次迭代完成了这个 – 非常酷的是它如何添加方法的下拉菜单，以及在演示、代码和解释之间切换的选项卡：

甚至还有一个排名部分来显示哪些居中 div 的方法最有效。请在此处尝试并重新组合。

---

2. VC 清算模拟

与居中 div 相比，Ethan 的这个例子展示了具有多个变量的更复杂理论的解释：一个交互式模拟，以视觉方式解释风险投资中的收益差异

这非常酷，但对于体育迷来说，下面是我根据一些足球统计数据制作的更简单的图表：

---

3. 罗纳尔多与梅西的数据对比⚽

我粘贴了罗纳尔多和梅西的数据并要求制作一些比较图表 – 它不是最漂亮的，但 Artifacts 提供了一些用React 中的recharts制作的带标签的可视化效果：数据来源于messivsronaldo.app，通过 Artifacts 可视化

在此处尝试已发布的 Artifact。包含来自 messivsronaldo.app 的粘贴数据的提示如下所示：

---

4. Elvis 的《深度学习可视化》

下面是另一个可视化效果，它突出了Artifacts 的一些局限性：

在 Twitter/X 讨论中，创作者提到了点击 Claud 的消息容量，并继续讲述他如何将生成的 HTML 代码移动到 Gemini 1.5 Pro 和 GPT-4o 以扩展他的项目。

这是我自己经历过的事情，因此重要的是要知道 Artifacts 应该是单页应用程序而不是更大的应用程序：

---

局限性：工件较小，且独立

当我第一次看到所有的炒作时（甚至在我自己生成了这些小程序之后），我认为一切皆有可能——不再需要开发人员？然而，随着项目开始发展到超过 4 或 5 个问题，Artifacts 的局限性变得更加明显，例如：

• 大小限制：单个消息响应有字符限制，因此无法生成很长的代码，从而将代码工件限制在较小的应用程序中
• 对第三方模块的访问受限：有时 Claude 无法安装依赖项，因此应用程序无法在聊天中运行，从而显示错误。
• 每次都重写：每次你要求更改时，它都会重写整个应用程序，这通常会引入新的问题和错误。你真的不知道会发生什么
• 输入限制：我无法将整本书粘贴到 Bergson’s Dream Dashboard 中。

这些约束确保每个 Artifact 都可以独立存在，无需额外的背景信息。这种范围让它们清晰而专注，因此很容易共享和混合。

基本上，你必须能够在一个提示内获取 Artifact 代码的全部内容。 – Toms Guide

我发现 Artifacts 是一个很好的起点和草稿本，可以实时生成（并实际看到）一些工作代码。不过，为了进一步实现一个想法，我不得不尝试不同的 AI 工具，因为字数限制阻止了 Claude 生成可运行的 Artifacts。

---

实用性的门槛

总而言之，与许多 AI 工具一样，其结果令人印象深刻（尤其是在精心构建的演示中），但也可能存在误差。

使用 Artifacts 时，当你需要在应用或游戏中进行更多自定义时，环境就会变得受限，因为它仍然与带有字数统计的聊天有关。如下所示，Artifacts 的实用性有一个上限，具体取决于你制作的内容：

随着 Claude 致力于从对话式 AI 转向协作工作环境，新功能的出现或许会改变这条曲线：

此预览功能标志着 Claude 从对话式 AI 进化为协作式工作环境。这只是Claude.ai更广阔愿景的开始，该愿景很快将扩展以支持团队协作。在不久的将来，团队（最终是整个组织）将能够安全地将他们的知识、文档和正在进行的工作集中在一个共享空间中，而 Claude 将充当随时可用的队友。

不过就目前而言，只要发挥一些创造力，您仍然可以在消息传递限制内做出新颖而令人惊奇的事情（例如下面 Heather 的示例），但通常它仅限于 POC 和基于小型表单的应用程序。

如果您是开发人员，它甚至可以被视为Vercel v0的替代品，用于登录页面或下拉菜单和日期选择器等交互式组件。

Vercel 的 v0使用简单的文本提示生成 UI。复制、粘贴、发送。

---

Claude之后的方向

• 上传声音、图像/图标
• 添加新文件和组件
• 导航并链接文件