在过去两个月里，Anthropic 在软件工程师中逐渐获得关注。该公司于 6 月 20 日推出了其最新的语言模型 Claude 3.5 Sonnet，其针对编码相关工作的效果明显优于其他大型语言模型（LLM），给出的结果比 ChatGPT 模型更好，令人印象深刻。
Anthropic 还推出了一项新功能 Artifacts，与 Claude 3.5 Sonnet 一同发布。它允许用户通过提示创建比如网站（单页 React 或 HTML）、代码片段、文档、图示等事物。这对多种任务很有帮助，同时也很有趣。例如，我给 Claude 一下提示：
「创建一个 web 应用程序，允许我调整《Pragmatic Engineer》标志的颜色。这个标志由三个高度递增的矩形块组成，颜色为红色。」
结果完全符合我的要求：一个带有互动颜色选择器的小型 web 应用：
这是输出结果。可以随意调整颜色。在这里试试，或者看看一个混合版本。混合意味着继续使用 Artifact，用进一步的输入进行演变。
其他有趣的例子包括创建：
- 游戏（例如「Pong」）的提示
- 多显示器布局设计器，通过几分钟的指令即可
- 风险投资清算优先级模拟器，通过提供的指令
- 图片选择器和颜色提取器
虽然该功能小，但它在将 LLM 用于协作工作方面可能迈出了一大步——因为每个 Artifact 都可以被共享、被他人使用和「混合」。为了更深入了解这个产品是如何构建的，我联系了 Anthropic 团队。今天，我们来看看构建该功能的真实情况，并且了解 Anthropic 的工程团队是如何运作的。我们涵盖：
- 从设计板到交付 Artifacts。 一个在「WIP 星期三」展示的简陋原型启动了 Artifacts 的发展。
- 技术栈。 Streamlit、Node.js、React、Next、Tailwind 和 Claude。
- 使用 Claude 更快构建 Artifacts。 团队不仅亲身体验 Claude，还使用他们的 LLM 加快软件开发，包括 Artifacts。
- 时间线和团队。 一个小团队在短短 3 个月内构建并发布了这个功能。
- AI 产品和安全性。 安全是 Anthropic 做任何事情的一部分。说明模型安全性如何运作，以及 Artifacts 的产品安全方法。
- 什么时候一个想法是赢家？ 甚至构建该功能的工程师们也没想到它会如此成功。
- GenAI 的范式转变？ Artifacts 本身不是一个巨大的功能，但它可能为 GenAI 成为更具协作性的工具铺平道路。
发表于时，Artifacts 在 web 和移动端对所有 Claude 用户默认启用。所以你可以试试这个功能，如果你愿意的话。
这是对一个复杂工程项目是如何构建的深入探索。阅读其他类似的现实世界工程挑战深度解析。
1. 从设计板到交付 Artifacts
让我们深入了解 Artifacts 是如何构建的。为此，我与几位参与创建的现任 Anthropic 员工进行了交谈：
- 研究科学家 Alex Tamkin，他构建并演示了第一个原型
- 产品设计师 Michael Wang，他在早期参与了迭代工作
- 产品工程师 Florian Scholz，他帮助将 Artifacts 投入生产
- 安全工程师 Ziyad Edher，他帮助评估 Artifacts 的安全性
- 品牌经理 Sam McAllister，他为 Artifacts 创建了多种发布材料
2024 年 3 月，研究科学家 Alex Tamkin 正在测试 Anthropic 最新模型的网站生成能力，步骤如下：
- 提示模型生成网站的 HTML 代码
- 将生成的代码复制到编辑器中
- 将文件保存为 HTML
- 打开浏览器查看 HTML 文件
进行一次或两次时，开销并不大。但 Alex 回忆道，他这样做了数十次：
「整个循环过程花费了很多时间。我一直在想：‘如果我可以立即看到结果怎么办？’ 当你做饭时想立即品尝酱汁的感觉，你不想等它煨好？这就是我所追求的。我只想让它立即呈现在屏幕上。」
于是 Alex 组合了一个粗糙的并排界面，Claude 在右侧，实时输出在左侧。他然后在一个名为「WIP 星期三」的常规聚会中向他的团队展示了这个略显粗糙的演示：
Alex 为 WIP 星期三准备的演示
他说这个演示是一个转折点：
「我认为这个演示是许多人意识到：‘哇，这里有些东西。’ 立即在屏幕上看到它，某种触动会…点击。你知道有时你不意识到自己需要什么，直到你看到它？这就是发生的事情。 这不仅仅是为了加快流程。它是关于改变我们与 Claude 的互动方式，使其更具象、更即时、更具协作性。」
产品设计师 Michael Wang 是演示参与者之一，然后帮助将粗糙的演示转化为一个更接近生产准备的体验。他说道：
「我在脑海中一直重播 Alex 的这个演示。所以我开始构建一个原型，主要是看看我们实际上能通过一些基本的提示工程和 Claude 的指示来实现多少。结果，很多。我比预期更快地完成了一个概念验证。这让我脑子开始快速运转。最终，我觉得自己有了一个相当不错的想法，并将其发布到 Slack。」
发布到内部 Slack 是一个好主意，因为它引起了很多同事的注意，包括 Anthropic 的 CEO Dario Amodei，他给予了鼓励。在此之后，事情进展快速，Michael 说道：
「大约一个半星期后，我们准备好了进行内部使用。 整个公司可以开始使用它。看到一个想法在短时间内从概念到每个人都在实验的工具，这有点不真实。但在与 Claude 合作时往往就是这样的——有时事情会一起，「卡」得很顺利。而你发现自己正在构建一周前甚至不知道可能存在的东西。」
Michael 演示了一个经过打磨的成为 Artifacts 的功能版本
随着一个更完善的版本成形，Michael 在内部分享了演示，收获了更多同事的反馈和鼓励：
Michael 在 Anthropic 内部 Slack 上分享对 Artifacts/Iteration Mode 的更新
Anthropic 的工程师拥有很大的自主权，并且被期望加以利用。产品工程师 Florian Scholz 刚开始在公司工作时，看到了这个演示，并决定帮助推出这个新功能。他回忆道：
「Alex 第一次演示 Artifacts 是在我进入 Anthropic 的第二周。我还在旧金山办公室进行入职培训，并适应一个非常新鲜的环境，所以当时把它搁置了。后来，当 Michael 展示了一个工作原型时，我立刻参与了进来。
我们都共同意识到这个功能是一个重大的变化。 我当时的首要任务是优化我们的基础设施，以确保其安全性。我们担心阻止任何可能从 Claude 生成的不可信代码带来的问题。这使我很好地入门了在 Anthropic 做产品工程的有趣挑战。」
在产品准备好以 beta 版本发布之前，还有一件事要做：创建推出材料来展示 Artifacts 及其用户使用方式。这是 Sam McAllister 介入之时，他领导 Claude 的品牌传播。看到 Artifacts 的第一个原型后，他意识到这个功能是真正差异化的用户界面层。他一直在使用 Artifacts，并制作了一个展示该功能的演示：生成了一个名为「Claw'd」的 8 位游戏 featuring a crab:
2D 8 位样式街机游戏「Claw'd」的截图，由 Artifacts 生成。查看其构建过程的一分钟视频
Anthropic 最近分享了一段关于如何构建 Artifacts 的视频，在其中采访了研究科学家 Alex Tamkin 和产品设计师 Michael Wang。
2. 技术栈
首个版本： 当 Alex 构建 Artifacts 的早期版本，并向他的几位同事展示时，他使用了 Streamlit。这是一种快速将 Python 数据脚本转为可分享 web 应用程序的工具——以便为团队构建原型。
使用专用原型框架构建「可视概念验证」被证明是一种有用的方法。它使快速反馈成为可能，并提醒原型尚未准备好用于生产。当然，并非所有原型都成为生产特性，并且允许研究科学家展示其想法的框架如本例所示是有用的。
第二个版本：Node.js。 获得良好的反馈后，Alex 准备将该功能共享给公司所有人试用。在这个阶段，他决定将后端从 Streamlit 迁移过来。他希望使用一种技术，可以更好地适应更广泛的使用。Alex 解释了他的考虑：
「我将应用程序迁移到了一个 Node.js 设置上，并实现了一个并排布局用于渲染，我觉得提升了用户体验。
我们在 Anthropic 举办‘WIP 星期三’会议，向更广泛的团队分享我们的进展。在这样的‘WIP 星期三’中分享工作是一个非常好的推动力。会议前一晚，我在办公室加班，专注于提示和整体交互模式。我也和 Michael 搭档一起调试他帮我抓住的一个简单的 CORS 问题。这时，Claude 3 Opus 并不能解决这个问题。」
构建 Artifact 使用的技术是一种足够常见的前端栈，许多网页团队都在使用：
- React：用于构建界面的前端框架
- Next.js：一个许多 React 团队使用的具有性能和开发人员效率提升的 React 框架
- Tailwind CSS：一个以实用为主的 CSS 框架，用于设计愉悦的用户界面
使用沙盒原语 是与大多数 web 应用构建方法的不同之处。Artifacts 需要在沙盒中隔离不可信代码；团队称这种方法为「安全游乐场」。正如产品工程师 Florian Scholz 所说：
「这种沙盒化方法为我们提供了一个明确的环境，让我们可以自信地进行部署。它不是一个静态的沙盒，我们不断推动和扩展其能力。拥有这个安全游乐场是让我们能如此快速地推出的重要因素。」
但 Anthropic 是如何具体构建其沙盒的；是否使用了浏览器沙盒原语，比如 Chrome V8 沙盒？安全工程师 Ziyad Edher 揭示了细节：
「我们实际上没有使用任何所谓的‘沙盒’原语。
我们使用 iFrame 沙盒进行全站进程隔离。 这种方法多年来变得非常健壮。这能保护用户在 Claude.ai 浏览会话中的主要内容不被恶意 artifacts 影响。我们还使用严格的内容安全策略（CSP）来控制有限和受控的网络访问。
这些方法保护用户数据不被恶意 artifacts 窃取。随着浏览器生态系统变化，我们持续致力于强化这些环境。」
技术的发展减少了对更传统后端的需求，至少对像 Artifacts 这样的东西来说是如此。Michael 说：
「我们的模型能力已经发展到，你可以直接请求很多通常需要构建为后端逻辑的东西！你给 Claude 指令，列出参数，并获得所需的结构化数据，格式正是你想要的。
许多人看到 Artifacts 可能以为有一个极其复杂的后端系统在运行。
实际上，Artifacts 的很大一部分只是‘呈现 UI’。 重活是在模型本身中完成的。这并不是说传统的后端工作完全消失了，但平衡发生了转变。我认为我们只是触及了这种方法的表面。随着这些模型的持续进化，谁知道会怎么样？」
3. 使用 Claude 更快构建 Artifacts
Artifacts 背后的团队倾力依靠 Claude 来构建 Artifacts。研究科学家 Alex Tamkin 描述了他如何使用 Claude 3 Opus：
「当时，Claude 3 Opus 是我们最智能的模型。过程很简单：我描述我想要的 Claude 的 UI，然后它会生成代码。我复制这些代码并渲染它。然后，我会查看自己喜欢或不喜欢的地方，发现任何错误，并继续重复这个过程。
这是一种快速迭代想法的方法！
当你能看到屏幕上的东西时，会有这种‘卡’的时刻。这就是我用这个方法所追求的——试图更快地达到那些‘啊哈！’时刻。」
使用 Claude 3 Opus 创建简单 HTML5 web 应用的多窗口迭代过程截图，在 Artifacts 准备好之前
产品工程师 Florian Scholz 也广泛使用了 Claude。他说：
「我在深入研究晦涩的浏览器 API 和能力时发现 Claude 特别有用。我用它来弄清楚如何实现特定的交互模式，如配置内容安全策略选项、iFrame 交互和 DOM 选择 API。我在许多文档薄弱或相对复杂的领域使用了它。
自从 Sonnet 和 Artifacts 推出后，我一直在用它们来打磨实验版本的新功能并使其运行。Claude 通常会给我一个很好的起点，然后我可以与 Claude 一起搭档并从那里迭代。我发现这些工具对避免‘空白页’问题很有帮助。」
在 Anthropic 内部，Sonnet 3.5 被视为「游戏规则改变者」，并推动 Artifacts 团队更加雄心勃勃。产品设计师 Michael Wang 分享道：
「在我的开发过程中，我几乎总是在用 Claude。Claude 已经成为我工作流程中不可或缺的一部分，我真的不知道如果不能用了会如何。我用它来设计代码结构，与其讨论实现细节，并根据需要转换代码。
在 Artifacts 的初步原型阶段时，Claude 3.5 Sonnet 还没有准备好测试。所以当时我主要使用 Claude 3 Opus。
当我们提前体验 3.5 Sonnet 时，这真是游戏规则的改变者。 内部人员正在演示由 Sonnet 一次性创建的完整 Three.js 或 WebGL 应用。这时我知道我们可以对正在构建的东西有更大的抱负。Sonnet 在我们推出前一个月对我们的功能集产生了巨大影响。它确实推动我们扩展了我们认为 Artifacts 可能实现的可能性。」
4. 时间线和团队
Artifacts 是今年 Anthropic 最受关注的发布之一，在软件工程界来说！我询问了产品设计工程师 Michael Wang 关于从构想到生产的团队规模和时间线。这是如何实现的：
「在 Alex 演示后，我于 2024 年 3 月 21 日在 claude.ai 主要代码库上开始工作原型。
一个人全职工作，另一个人定期兼职贡献。 我们还有一些帮助之手在战略点贡献，许多其他 Anthropic 员工在途中也进行了使用测试。
该项目在首次演示 3 个月后发布，即 6 月 20 日。我们与我们最有能力的模型 Claude 3.5 Sonnet 一起发布了 Artifacts。
整个项目感觉像是一场仓促的行动。但这不正是一些最好的东西聚集在一起的方式吗？」
先前在 The Pragmatic Engineer 中，我们报道了小团队发布有影响力的产品——例如十二名工程师在 6 个月内发布了 Meta 的 Threads 应用。尽管如此，Artifacts 可能是我遇到的最仓促、高影响力的产品之一！向 Anthropic 的所有帮助建设者们表示祝贺。
原文链接：https://newsletter.pragmaticengineer.com/p/how-anthropic-built-artifacts