熟悉大模型行业的朋友应该对Anthropic的Claude Artifacts不陌生，这个功能是随 Claude 3.5 Sonnet 一同发布的，它允许用户通过提示词创建各种内容，如网站（单页 React 或 HTML）、代码片段、文档、图表等。不仅在多种任务中非常实用，还充满了乐趣，一经上市，广受用户好评。
虽然这个功能很小，但它在使用大语言模型进行协作工作方面迈出了重要的一步——每个作品都可以被分享、被他人使用并且“重新混合”。出于对这个产品构建方式的好奇，我联系了 Anthropic 团队。今天，我们来探讨一下构建这个功能的实际情况，同时了解一下 Anthropic 工程团队的工作方式。
文章将涵盖以下内容：从构思到发布 Artifacts：一个在“WIP Wednesday”上展示的简陋原型启动了 Artifacts 的开发历程。
技术栈：使用了 Streamlit、Node.js、React、Next、Tailwind 和 Claude。利用 Claude 更快地构建 Artifacts：团队不仅在内部测试了 Claude，还利用他们的大语言模型加快了软件的构建速度，包括 Artifacts 的开发。
时间线和团队：一个小团队在短短 3 个月内就完成并发布了这个功能。
一、从策划阶段到发布 Artifacts
让我们深入了解 Artifacts 是如何构建的。为此，我采访了五位参与其创建的现任 Anthropic 员工：
- 研究科学家 Alex Tamkin，他构建并展示了第一个原型
- 产品设计师 Michael Wang，他早期参与了迭代工作
- 产品工程师 Florian Scholz，他帮助 Artifacts 走向生产阶段
- 安全工程师 Ziyad Edher，他帮助评估了 Artifacts 的安全性
- 品牌经理 Sam McAllister，他为 Artifacts 创建了多个发布材料
1. 加快速度的渴望2024 年 3 月，研究科学家 Alex Tamkin 在测试 Anthropic 最新模型的网站生成能力时，采用了以下步骤：
- 通过提示词让模型生成网站的 HTML 代码将生成的代码复制到编辑器中
- 将文件保存为 HTML 格式
- 打开网页浏览器
- 查看 HTML 文件
做一两次这种操作还不算麻烦，但 Alex 回忆道，当他这样重复几十次时：
于是，Alex 搭建了一个粗糙的并排界面，右边是 Claude，左边是实时输出。然后，他在一个叫“WIP Wednesday”的常规会议上向团队展示了这个粗糙的演示：
他说，这次演示是一个转折点：
我觉得这次演示让我们很多人意识到：‘哇，这里确实有些东西。’
看到它立即在屏幕上显示出来时，有一种顿悟的感觉。你知道有时候在看到某样东西之前，你根本不知道自己需要它吗？这就是当时的感觉。
这不仅仅是让流程更快，而是改变我们与 Claude 的互动方式，让它变得更具体、更直接、更具协作性。”
2. 第一个原型产品设计师 Michael Wang 是参与演示的一位成员，他随后帮助将这个粗糙的演示变成了一个更接近生产状态的体验。他回忆道：
在 Slack 内部发布这个想法是个好主意，因为它引起了许多同事的关注，包括 Anthropic 的 CEO Dario Amodei，他也给予了鼓励。之后，事情进展得非常快，Michael 说：
“**大约一个半星期后，我们就准备好了内部测试。**整个公司都可以开始使用它了。看到一个想法在这么短的时间内变成一个大家都在试用的工具，这种感觉有点不真实。但在和 Claude 一起工作时，这种情况时有发生——有时事情就是这么顺利，你会发现自己在一周前根本无法想象的东西如今已成现实。”
随着一个更加完善的版本逐渐成型，Michael 在公司内部分享了演示，并收集了更多同事的反馈和鼓励：
Michael 在 Anthropic 的 Slack 内部分享 Artifacts/迭代模式的最新进展
3. 新工程师助力发布 ArtifactsAnthropic 的工程师有很大的自主权，且公司也期望他们能充分发挥这种自主性。产品工程师 Florian Scholz 刚加入公司时，看到演示后决定帮助推动这个新功能的发布。他回忆道：
4. 用 8-bit 游戏演示 Artifacts在产品即将发布 beta 版时，还有最后一件事要做：创建展示 Artifacts 及其使用方式的发布素材。此时，Claude 的品牌传播负责人 Sam McAllister 出场了。在看到 Artifacts 的第一个原型后，他意识到这个功能是一个真正独特的 UI 层。他在构建 Artifacts 的过程中一直使用它，并制作了一个演示来展示该功能：生成了一款名为 “Claw’d” 的 8-bit 游戏，主角是一只螃蟹。
“Claw’d”是一款由 Artifacts 生成的 2D 8-bit 风格的街机游戏截图。
二、技术栈
1. 原型阶段第一个版本： 当 Alex 构建 Artifacts 的早期版本时，他向内部的几位同事展示了这个版本，他使用了 Streamlit。这是一种能够快速将 Python 数据脚本转换为可共享 Web 应用的工具，用于为团队创建原型。
使用专门的原型框架构建“视觉概念验证”被证明是一个有效的方法。它不仅能快速获得反馈，还时刻提醒大家这个原型尚未准备好投入生产。当然，并非所有原型都会成为最终的生产功能，但这个案例表明，允许研究人员展示自己想法的框架是非常有用的。
第二个版本：Node.js. 在收到良好的反馈后，Alex 准备将这个功能分享给整个公司进行尝试。在这个阶段，他决定将后端从 Streamlit 迁移出来。他希望使用一种更适合广泛应用的技术。Alex 解释了他的决定：
“我将应用程序迁移到了 Node.js 环境，并实现了并排布局进行渲染，我觉得这提升了用户体验。
我们在 Anthropic 举办‘WIP Wednesday’会议，会上我们会与更广泛的团队分享我们的正在进行的工作。像这样在 WIP Wednesday 分享工作是一个很好的推动力。前一晚我在办公室工作到很晚，专注于完善提示词和整体交互模式。我还与 Michael 配对调试，他帮我解决了一个困扰我的简单 CORS 问题。此时，Claude 3 Opus 还无法自行解决这个问题。”
2. 前端Artifact 使用的技术栈是许多网页团队常用的前端堆栈：
- React：用于构建界面的前端框架
- Next.js：一个 React 框架，提供性能提升和开发效率，广受 React 团队欢迎
- Tailwind CSS：一个实用性优先的 CSS 框架，用于设计美观的用户界面
使用沙盒技术是与大多数网页应用构建方式不同的一个显著特点。Artifact 需要在沙盒中隔离不受信任的代码；团队将这种方法称为“安全游乐场”。正如产品工程师 Florian Scholz 所说：
那么，Anthropic 是如何构建其沙盒的？它是否使用了浏览器的沙盒技术，如Chrome V8 沙盒？安全工程师 Ziyad Edher 透露了相关细节：
3. 后端技术进步减少了对传统后端的需求，至少对于像 Artifacts 这样的应用来说。Michael 说道：
三、使用 AI 更快地构建 ArtifactsArtifacts
团队在构建过程中大量依赖 Claude。研究科学家 Alex Tamkin 如下使用 Claude 3 Opus：
在 Artifacts 完成前，使用 Claude 3 Opus 创建一个简单 HTML5 网页应用的多窗口迭代过程截图
Artifacts 团队的产品工程师 Florian Scholz 也大量使用了 Claude。他说：
在 Anthropic 内部，Sonnet 3.5 被认为是一个“变革者”，并激励了 Artifacts 团队的雄心。产品设计师 Michael Wang 分享道：
四、时间线与团队
Artifacts 是 Anthropic 今年在软件工程圈子里讨论度最高的发布之一！我向产品设计工程师 Michael Wang 了解了从想法到产品发布的团队规模和时间线。以下是项目的进展情况：
“在 Alex 的演示之后，我于 2024 年 3 月 21 日开始在 claude.ai 的主库中开发原型。
**我们有一位全职人员负责此项目，另一位兼职人员定期参与贡献。**此外，在关键时刻还有几位同事提供了帮助，期间很多 Anthropic 员工也参与了内部测试。
项目在首次演示后的 3 个月内，于 6 月 20 日发布。我们与目前最强大的模型 Claude 3.5 Sonnet 一同推出了 Artifacts。
整个项目感觉像是草草拼凑的操作，但有时候最好的东西就是这样诞生的，不是吗？”在之前的《The Pragmatic Engineer》文章中，我们报道过小团队发布有影响力产品的例子——例如 Meta 的 Threads 应用程序由 12 位工程师在 6 个月内完成。然而，Artifacts 可能是我遇到的最具草根性质的高影响力产品之一！向所有参与构建的 Anthropic 成员致以祝贺。
原文：How Anthropic built Artifacts @Gergely Orosz
本文由人人都是产品经理作者【小布Bruce】，微信公众号：【AI者也】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。 | 
发表于 2024-11-20 20:35:00
