Claude 可能是我今年尝试过的所有 AI 工具中最喜欢的一个。我喜欢 Claude,因为它有一个新功能,叫做 Artifacts。
在六月,Claude 推出了 Artifacts 的预览版。这个八月,Claude 免费和付费用户在所有设备上推出了这个功能。
我从六月开始使用 Claude 内部的功能。我喜欢看到它的交互能力。
Claude 的 Artifacts 是可以在聊天中打开的独立窗口。Artifacts 可以创建你想要修改或重复使用的实质性、独立的内容。
这些 Artifacts 可以是从简单的文本文档到复杂的代码或视觉设计的任何内容。你可以发布和分享这些 Artifacts,以便他人参考。
注意: Claude 并不会为每个回复创建 Artifacts。只有在提示需要更重要内容时,它才会创建 Artifacts。
Artifacts 有助于在与 Claude 的对话中组织更重要的工作部分,使处理复杂内容变得更容易。
我将展示一个示例,帮助你更好地理解 Claude Artifact 是什么。
然后,我将向你展示如何激活它以及五个非常实用的不同示例。
Artifacts:实际示例
我在我的 Windows PC 的 Microsoft Store 中有一张截图。
我拿着这张截图去找 Claude,在一个新的聊天中,我添加了这张图片。然后,我从可用选项中选择了 Claude 3.5 Sonnet 模型。
有三个模型:Claude 3.5 Sonnet、Claude 3 Opus 和 Claude 3 Haiku。我选择了 Claude 3.5 Sonnet,因为它是最强大的模型,提供最佳输出。但是,你可以使用任何模型来获得 Artifact 输出。
之后,我在提示栏中输入了一个简单的提示:“使用这张图片创建一个 Web 应用程序。” 这只是一个基本提示。
当你输入提示并按下回车时,右侧会出现一个窗口。这个窗口就是一个 Artifact。在这里,你会看到它开始自动为你编写代码。
当它完成为 Web 应用程序生成代码后,你可以点击“预览”按钮查看。你将在 Artifact 中看到整个 Web 应用程序的视觉设计。这真的是独一无二的。
你会看到一个“发布”选项在应用程序(Artifact)底部。你可以在这里发布它,它会为你创建一个链接。
当你点击这个链接时,它会打开 Web 应用程序 - 或 Artifact。这样你就可以看到应用程序的样子。你可以与任何人分享这个链接,他们可以查看。这只是一个网页链接;它并没有在线发布。
你可以删除你不想要的元素和设计,并添加你自己的工具。
任何人都可以进行混搭,创建类似或添加或删除任何元素的应用程序。要进行混搭,他们可以点击底部的“混搭 Artifact”按钮。
Claude 将在他们的 Claude 账户中重新创建相同的应用程序。他们也可以根据自己的意愿进行修改或编辑。
激活 Artifacts
截至 8 月 28 日,Claude 已经在所有设备的所有账户上推出了这个功能。所以你不需要手动激活它。但是,如果你发现它在你的账户上没有激活,你可以这样做:
进入你的 Claude 账户中心。点击你的账户图标,会看到一个名为“功能预览”的选项。点击“功能预览”,你会找到一个打开 Artifact 的选项。
5 个实用案例
Claude Artifacts 有很多用例。然而,在这里,我们将专注于 15 个用例。这些有趣的用例既方便又非常有创意。我选择了一些 Artifacts 的特殊用例,但你也可以尝试其他用例。
让我们开始展示 Claude Artifacts 的用例。
用例 #1:交互式思维导图
你可以使用 Artifacts 创建视觉思维导图。你只需要一个提示,以及可选的参考图片。
我没有使用任何参考图片;我只使用了一个简单的提示。
通过这个,我们得到了一个基本的思维导图。这不是一个复杂的设计 - 只是一个普通的思维导图。
然而,优化你的提示并使用相关的参考图片可以创建一个交互式思维导图。有了参考图片,你可以快速获得任何想要的思维导图。
我这里没有使用参考图片,所以输出很简单。
用例 #2:带物理效果的 3D 方块游戏
我使用 Claude Artifact 创建了一个带有物理效果的 3D 方块游戏。这个游戏很简单,因为我只使用了一个基本提示:“创建一个带有物理效果的 3D 方块游戏。” 就这样!
要玩这个游戏,点击地面。一个方块会从顶部出现并因重力而掉到地面上。这个游戏没有规则、目标或分数。然而,如果你优化你的提示并提供关于你想要游戏的具体说明,你可以创建几乎任何游戏。
用例 #3:高级动态销售仪表盘
对于高级动态销售仪表盘,你必须输入一个详细的提示,解释你想要仪表盘中的所有内容。你可以看到我使用了一个详细的提示,清楚地解释了所有要求。
下面,你可以看到输出 - 一个动态销售仪表盘。
你可以按日期、产品或地区筛选数据。这个仪表盘包括图表和饼图,全面概述了销售数据。你可以在提示中指定是否要向仪表盘添加其他元素。只需提到你想要输出中的内容,你就会得到想要的结果。
用例 #4:测验落地页
我创建了这个测验落地页,因为我可以通过这样的工具更有效地培养我的潜在客户。由于我从事联盟营销,一个测验落地页可以帮助我推广优惠。
我基于健康和健身领域设计了一个包含五个问题的测验落地页。在五个问题之后,我们有一个推广 ClickBank 产品的落地页。这个页面包括一个行动号召按钮。当有人点击它时,他们会通过我的链接重定向到产品页面。
我使用了下面的详细提示:
我在提示中包含了每一个细节。因此,它产生了我想要的输出。我喜欢这个简单的设计 - 只是一个基本的测验落地页。
然而,当用户在最后一页点击行动号召按钮时,它不会打开网站。这是因为它仍然在 Claude Artifact 环境中。如果你将这段代码安装到你的项目中,它应该可以正常工作。
用例 #5:按需打印商店
它可以创建任何类型的电子商店,包括按需打印商店。我用 Artifact 制作了一个简化版本的按需打印商店。
设计很简单,因为 Claude 只使用了支持的库。如果我们使用不支持的库,它就不会在 Artifacts 中显示商店的视觉设计。它无法支持外部路由库(react-router-dom)。因此,我排除了路由库;我们有一个简单的商店。
然而,如果你将它托管在外部,你可以在网站上使用原始代码版本来制作你的按需打印商店。你可以使用我提供的相同提示:
注意:使用上面的提示,你会看到类似于这样的输出:
即使是基本形式的商店(第一张图片),也包括提示中指定的所有功能。
它包括:
-
首页
-
购物车
-
商店
-
结账页面
-
付款选项
-
支持页面
-
以及你在按需打印商店中期望的一切。
想象一下雇佣开发人员来构建这个会花费多少钱。然而,你可以在这里零成本创建它!
什么让 Artifacts 如此出色?
我列出了 Claude Artifacts 的五个用例,但实际上存在超过 100 个潜在的用例!我最初计划涵盖大约 15 个用例,但文章会很长。
相反,如果你想自己尝试,你可以这样做:在互联网上寻找你想要使用 Claude Artifact 复制的不同示例或应用程序。你可以截图、获取代码,然后要求 Claude 复制它。这就是你可以开始构建你的项目的方式 - 通过实验并看看你能创造什么!
我在 Claude Artifacts 上有着令人惊叹的体验。这是从零开始构建任何东西的最佳工具之一。你有一个想法,想要实现它。有了 Artifacts,你可以在将其放入编码环境之前先看到它。Claude Artifact 让你在开始之前就能看到项目的外观。这就是为什么 Claude Artifact 如此伟大!\