Claude Artifacts 如何工作：解读一份据称的系统提示词

我认为 Claude 的 Artifacts 功能很有特色。一份据称泄露的 Claude 3.5 Sonnet 系统提示词，让我们有机会研究其 artifact 指令的结构。我认为清晰的提示词格式有助于改善输出，这套长指令提供了值得学习的例子；不过，单凭提示词不能确定该功能的所有实现细节。

这份文本将 artifact 描述为较大、自包含、用户可能修改或重复使用的内容，并显示在独立窗口中。为了展示它的含义，我让 Claude 用 Python 写一个贪吃蛇游戏。代码出现在独立窗口中，而解释则留在聊天里。

我还粘贴了自己的 DaVinci Resolve 键盘设置，并询问这段文本是什么。Claude 将粘贴的内容放进一个可以打开的独立文件，使完整文本不会占据对话窗口。

据称的提示词说，适合做成 artifact 的内容通常规模较大，例如超过 15 行，并且用户可能编辑、拥有、在对话之外使用或反复引用。自包含的代码、报告、邮件和演示文稿符合这一思路；短代码片段、公式、小例子和普通评论一般不符合。

使用说明倾向于每条消息只生成一个 artifact，除非用户要求更多；如果独立 artifact 没有必要，则建议直接在聊天中回答。文本还说，如果有人要求 SVG 或网站，生成相应的 artifact 就可以满足请求。

我让 Claude 用 SVG 画一个 GPU。它写出代码并展示预览；图画得不算好，但代码和预览放在了一起。接着我要求一个简单的 GPU 销售网站。Claude 生成代码和预览，同时把解释留在聊天中。

我可以重新打开网站 artifact，刷新、复制或下载其内容，也可以发布它。据称的提示词还建议在用户请求图片时提供 SVG。录制视频时，我仍经常使用 ChatGPT 生成 DALL-E 图片，也希望 Claude 拥有类似的图像生成功能和 Android 应用。

这些指令反复强调一个主题：考虑内容是否可以不使用 artifact 来呈现。它要求助手用“antThinking”标签简要评估请求，并决定创建新的 artifact 还是更新已有的内容。我很好奇这个标签的含义；我的解读只是推测。

据称的指令要求更新时沿用先前的标识符。新的 artifact 则使用描述性的 kebab-case 标识符和标题。输出会包在 artifact 标签中，并指定代码或文档等内容类型，以便界面正确处理。

列出的类型包括 HTML 和 SVG。提示词描述了这一环境中对网络图片和外部脚本的限制，并说如果渲染会掩盖源码，普通 HTML 或 CSS 示例应以源代码形式显示。它还在无法满足渲染页面要求时给出另一种类型。

Mermaid 图表也是支持的类型。我要求制作一个 GPU 销售网站的图表，Claude 生成了相应的 Mermaid 代码。指令还涵盖 React 组件和可用库；我略过了细节，但注意到有些限制被强调或重复。

对于更新，指令要求提供完整修订后的 artifact，而不是使用“其余代码保持不变”之类的占位说明。这很吸引我，因为部分代码更新可能难以合并，而在聊天中反复输出整个文件又耗费空间和时间。

提示词中有一些示例，展示助手如何评估请求是否值得生成 artifact。我猜测思考标签可能为中间推理提供一个独立空间，但仅凭文本无法验证。示例展示了结构化的判断，随后给出 artifact 本身。

最后，据称的指令要求在无关时不要提及 artifact 语法，并限制高度危险的 artifact，同时要求与 Claude 愿意以文本提供的内容保持一致。我的总体收获是，包含判断标准、示例和输出约定的结构化提示词，可以帮助引导助手的行为。