Anthropic 的 Claude Artifacts 隨 Claude 3.5 Sonnet 推出，用戶能用提示詞創(chuàng)作內(nèi)容。它從簡陋原型發(fā)展而來，多團(tuán)隊(duì)協(xié)作 3 個月完成。技術(shù)棧涵蓋 Streamlit、Node.js 等，前端有 React 等，后端因強(qiáng)大模型有調(diào)整。團(tuán)隊(duì)借 Claude 加速構(gòu)建進(jìn)程。

熟悉大模型行業(yè)的朋友應(yīng)該對Anthropic的Claude Artifacts不陌生，這個功能是隨 Claude 3.5 Sonnet 一同發(fā)布的，它允許用戶通過提示詞創(chuàng)建各種內(nèi)容，如網(wǎng)站（單頁 React 或 HTML）、代碼片段、文檔、圖表等。不僅在多種任務(wù)中非常實(shí)用，還充滿了樂趣，一經(jīng)上市，廣受用戶好評。

雖然這個功能很小，但它在使用大語言模型進(jìn)行協(xié)作工作方面邁出了重要的一步——每個作品都可以被分享、被他人使用并且“重新混合”。出于對這個產(chǎn)品構(gòu)建方式的好奇，我聯(lián)系了 Anthropic 團(tuán)隊(duì)。今天，我們來探討一下構(gòu)建這個功能的實(shí)際情況，同時了解一下 Anthropic 工程團(tuán)隊(duì)的工作方式。

文章將涵蓋以下內(nèi)容：從構(gòu)思到發(fā)布 Artifacts：一個在“WIP Wednesday”上展示的簡陋原型啟動了 Artifacts 的開發(fā)歷程。

技術(shù)棧：使用了 Streamlit、Node.js、React、Next、Tailwind 和 Claude。利用 Claude 更快地構(gòu)建 Artifacts：團(tuán)隊(duì)不僅在內(nèi)部測試了 Claude，還利用他們的大語言模型加快了軟件的構(gòu)建速度，包括 Artifacts 的開發(fā)。

時間線和團(tuán)隊(duì)：一個小團(tuán)隊(duì)在短短 3 個月內(nèi)就完成并發(fā)布了這個功能。

一、從策劃階段到發(fā)布 Artifacts

讓我們深入了解 Artifacts 是如何構(gòu)建的。為此，我采訪了五位參與其創(chuàng)建的現(xiàn)任 Anthropic 員工：

1. 研究科學(xué)家 Alex Tamkin，他構(gòu)建并展示了第一個原型
2. 產(chǎn)品設(shè)計師 Michael Wang，他早期參與了迭代工作
3. 產(chǎn)品工程師 Florian Scholz，他幫助 Artifacts 走向生產(chǎn)階段
4. 安全工程師 Ziyad Edher，他幫助評估了 Artifacts 的安全性
5. 品牌經(jīng)理 Sam McAllister，他為 Artifacts 創(chuàng)建了多個發(fā)布材料

1. 加快速度的渴望

2024 年 3 月，研究科學(xué)家 Alex Tamkin 在測試 Anthropic 最新模型的網(wǎng)站生成能力時，采用了以下步驟：

1. 通過提示詞讓模型生成網(wǎng)站的 HTML 代碼將生成的代碼復(fù)制到編輯器中
2. 將文件保存為 HTML 格式
3. 打開網(wǎng)頁瀏覽器
4. 查看 HTML 文件

做一兩次這種操作還不算麻煩，但 Alex 回憶道，當(dāng)他這樣重復(fù)幾十次時：

“整個過程花費(fèi)了很多時間。我一直在想：要是我能馬上看到效果就好了。你知道那種感覺嗎？就像做飯時，你想立刻嘗嘗醬汁的味道，而不是等它慢慢煨煮？這就是我追求的效果。我只想讓它立刻在屏幕上顯示出來?！?/p>

于是，Alex 搭建了一個粗糙的并排界面，右邊是 Claude，左邊是實(shí)時輸出。然后，他在一個叫“WIP Wednesday”的常規(guī)會議上向團(tuán)隊(duì)展示了這個粗糙的演示：

他說，這次演示是一個轉(zhuǎn)折點(diǎn)：

我覺得這次演示讓我們很多人意識到：‘哇，這里確實(shí)有些東西?！?/p>

看到它立即在屏幕上顯示出來時，有一種頓悟的感覺。你知道有時候在看到某樣?xùn)|西之前，你根本不知道自己需要它嗎？這就是當(dāng)時的感覺。

這不僅僅是讓流程更快，而是改變我們與 Claude 的互動方式，讓它變得更具體、更直接、更具協(xié)作性?！?/p>

2. 第一個原型

產(chǎn)品設(shè)計師 Michael Wang 是參與演示的一位成員，他隨后幫助將這個粗糙的演示變成了一個更接近生產(chǎn)狀態(tài)的體驗(yàn)。他回憶道：

“我一直在腦海中反復(fù)播放 Alex 的這個演示。所以我開始構(gòu)建一個原型，主要是想看看通過一些基礎(chǔ)的提示詞工程和 Claude 的指令，我們究竟能實(shí)現(xiàn)多少。結(jié)果發(fā)現(xiàn)，我們能做到的比預(yù)期還要多。我比預(yù)想得更快地做出了一個概念驗(yàn)證。這讓我思維急速運(yùn)轉(zhuǎn)。最后，我覺得我有了一個很好的想法，并把它發(fā)布到了 Slack 上?！?/p>

在 Slack 內(nèi)部發(fā)布這個想法是個好主意，因?yàn)樗鹆嗽S多同事的關(guān)注，包括 Anthropic 的 CEO Dario Amodei，他也給予了鼓勵。之后，事情進(jìn)展得非?？?，Michael 說：

“**大約一個半星期后，我們就準(zhǔn)備好了內(nèi)部測試。**整個公司都可以開始使用它了?？吹揭粋€想法在這么短的時間內(nèi)變成一個大家都在試用的工具，這種感覺有點(diǎn)不真實(shí)。但在和 Claude 一起工作時，這種情況時有發(fā)生——有時事情就是這么順利，你會發(fā)現(xiàn)自己在一周前根本無法想象的東西如今已成現(xiàn)實(shí)?！?/p>

隨著一個更加完善的版本逐漸成型，Michael 在公司內(nèi)部分享了演示，并收集了更多同事的反饋和鼓勵：

Michael 在 Anthropic 的 Slack 內(nèi)部分享 Artifacts/迭代模式的最新進(jìn)展

3. 新工程師助力發(fā)布 Artifacts

Anthropic 的工程師有很大的自主權(quán)，且公司也期望他們能充分發(fā)揮這種自主性。產(chǎn)品工程師 Florian Scholz 剛加入公司時，看到演示后決定幫助推動這個新功能的發(fā)布。他回憶道：

“Alex 第一次展示 Artifacts 是在我加入 Anthropic 的第二周。當(dāng)時我還在舊金山辦公室適應(yīng)新的工作環(huán)境和入職流程，所以暫時擱置了這個項(xiàng)目。后來，當(dāng) Michael 展示了一個可運(yùn)行的原型時，我立刻加入了進(jìn)來。

我們都意識到這個功能將帶來顯著的進(jìn)步。 我的首要任務(wù)是確保我們的基礎(chǔ)設(shè)施足夠安全。我們很擔(dān)心 Claude 生成的不可信代碼可能引發(fā)的問題。這次經(jīng)歷讓我很快接觸到了 Anthropic 產(chǎn)品工程中的有趣挑戰(zhàn)。”

4. 用 8-bit 游戲演示 Artifacts

在產(chǎn)品即將發(fā)布 beta 版時，還有最后一件事要做：創(chuàng)建展示 Artifacts 及其使用方式的發(fā)布素材。此時，Claude 的品牌傳播負(fù)責(zé)人 Sam McAllister 出場了。在看到 Artifacts 的第一個原型后，他意識到這個功能是一個真正獨(dú)特的 UI 層。他在構(gòu)建 Artifacts 的過程中一直使用它，并制作了一個演示來展示該功能：生成了一款名為 “Claw’d” 的 8-bit 游戲，主角是一只螃蟹。

“Claw’d”是一款由 Artifacts 生成的 2D 8-bit 風(fēng)格的街機(jī)游戲截圖。

二、技術(shù)棧

1. 原型階段

第一個版本： 當(dāng) Alex 構(gòu)建 Artifacts 的早期版本時，他向內(nèi)部的幾位同事展示了這個版本，他使用了 Streamlit。這是一種能夠快速將 Python 數(shù)據(jù)腳本轉(zhuǎn)換為可共享 Web 應(yīng)用的工具，用于為團(tuán)隊(duì)創(chuàng)建原型。

使用專門的原型框架構(gòu)建“視覺概念驗(yàn)證”被證明是一個有效的方法。它不僅能快速獲得反饋，還時刻提醒大家這個原型尚未準(zhǔn)備好投入生產(chǎn)。當(dāng)然，并非所有原型都會成為最終的生產(chǎn)功能，但這個案例表明，允許研究人員展示自己想法的框架是非常有用的。

第二個版本：Node.js. 在收到良好的反饋后，Alex 準(zhǔn)備將這個功能分享給整個公司進(jìn)行嘗試。在這個階段，他決定將后端從 Streamlit 遷移出來。他希望使用一種更適合廣泛應(yīng)用的技術(shù)。Alex 解釋了他的決定：

“我將應(yīng)用程序遷移到了 Node.js 環(huán)境，并實(shí)現(xiàn)了并排布局進(jìn)行渲染，我覺得這提升了用戶體驗(yàn)。

我們在 Anthropic 舉辦‘WIP Wednesday’會議，會上我們會與更廣泛的團(tuán)隊(duì)分享我們的正在進(jìn)行的工作。像這樣在 WIP Wednesday 分享工作是一個很好的推動力。前一晚我在辦公室工作到很晚，專注于完善提示詞和整體交互模式。我還與 Michael 配對調(diào)試，他幫我解決了一個困擾我的簡單 CORS 問題。此時，Claude 3 Opus 還無法自行解決這個問題?！?/p>

2. 前端

Artifact 使用的技術(shù)棧是許多網(wǎng)頁團(tuán)隊(duì)常用的前端堆棧：

• React：用于構(gòu)建界面的前端框架
• Next.js：一個 React 框架，提供性能提升和開發(fā)效率，廣受 React 團(tuán)隊(duì)歡迎
• Tailwind CSS：一個實(shí)用性優(yōu)先的 CSS 框架，用于設(shè)計美觀的用戶界面

使用沙盒技術(shù)是與大多數(shù)網(wǎng)頁應(yīng)用構(gòu)建方式不同的一個顯著特點(diǎn)。Artifact 需要在沙盒中隔離不受信任的代碼；團(tuán)隊(duì)將這種方法稱為“安全游樂場”。正如產(chǎn)品工程師 Florian Scholz 所說：

“這種沙盒方法為我們提供了一個明確的環(huán)境，使我們能夠放心地進(jìn)行部署。這不是一個靜態(tài)的沙盒，我們不斷擴(kuò)展和增強(qiáng)它的功能。這個安全游樂場對我們能夠快速發(fā)布起到了關(guān)鍵作用?！?/p>

那么，Anthropic 是如何構(gòu)建其沙盒的？它是否使用了瀏覽器的沙盒技術(shù)，如Chrome V8 沙盒？安全工程師 Ziyad Edher 透露了相關(guān)細(xì)節(jié)：

“我們并沒有使用任何特定的‘沙盒’技術(shù)。

我們使用了帶有全站點(diǎn)進(jìn)程隔離的 iFrame 沙盒。這種方法經(jīng)過多年的發(fā)展已經(jīng)非常穩(wěn)健。這可以保護(hù)用戶在 Claude.ai 瀏覽會話中的主要會話免受惡意代碼的影響。我們還使用了嚴(yán)格的內(nèi)容安全策略（CSPs）來強(qiáng)制執(zhí)行有限且受控的網(wǎng)絡(luò)訪問。

這些措施可以保護(hù)用戶數(shù)據(jù)不被惡意代碼竊取。隨著瀏覽器生態(tài)系統(tǒng)的變化，我們也在不斷加固這些安全環(huán)境。”

3. 后端

技術(shù)進(jìn)步減少了對傳統(tǒng)后端的需求，至少對于像 Artifacts 這樣的應(yīng)用來說。Michael 說道：

“我們的模型已經(jīng)變得如此強(qiáng)大，很多你通常需要通過后端邏輯來實(shí)現(xiàn)的功能，現(xiàn)在只需直接請求即可！你只需給 Claude 模型下達(dá)指令，設(shè)定參數(shù)，它就能返回符合你需求的結(jié)構(gòu)化數(shù)據(jù)，并且格式也完全按照你的要求。

許多人在看 Artifacts 時可能會以為背后有一個非常復(fù)雜的后端系統(tǒng)在運(yùn)作。

但事實(shí)上，Artifacts 的很大一部分‘只是’展示性 UI。真正的重任其實(shí)是在模型本身完成的。傳統(tǒng)的后端工作并沒有完全消失，但重心發(fā)生了轉(zhuǎn)移。我認(rèn)為我們才剛剛觸及了這種方法潛力的冰山一角。隨著這些模型的不斷進(jìn)化，未來的發(fā)展?jié)摿Σ豢上蘖俊！?/p>

三、使用 AI 更快地構(gòu)建 ArtifactsArtifacts

團(tuán)隊(duì)在構(gòu)建過程中大量依賴 Claude。研究科學(xué)家 Alex Tamkin 如下使用 Claude 3 Opus：

“當(dāng)時，Claude 3 Opus 是我們最智能的模型。整個過程非常簡單：我會告訴 Claude 我想要的用戶界面，然后它就會生成代碼。我再把代碼復(fù)制過來，進(jìn)行渲染。接著，我會檢查哪些地方滿意，哪些地方需要改進(jìn)，或者發(fā)現(xiàn)任何錯誤，然后反復(fù)進(jìn)行這個過程。

這是一種非常高效的想法迭代方式！

當(dāng)你能立刻在屏幕上看到效果時，會有一種瞬間‘頓悟’的感覺。這就是我想通過這種方法實(shí)現(xiàn)的目標(biāo)——盡快達(dá)到那些‘靈光一現(xiàn)’的時刻?！?/p>

在 Artifacts 完成前，使用 Claude 3 Opus 創(chuàng)建一個簡單 HTML5 網(wǎng)頁應(yīng)用的多窗口迭代過程截圖

Artifacts 團(tuán)隊(duì)的產(chǎn)品工程師 Florian Scholz 也大量使用了 Claude。他說：

“當(dāng)我深入研究一些較為晦澀的瀏覽器 API 和功能時，Claude 幫了大忙。我用它來搞清楚如何實(shí)現(xiàn)一些特定的交互模式，比如配置內(nèi)容安全策略選項(xiàng)、iFrame 交互和 DOM 選擇 API。我在很多文檔匱乏或內(nèi)容復(fù)雜的領(lǐng)域都用到了它。

自從 Sonnet 和 Artifacts 推出后，我一直在利用它們來開發(fā)新功能的實(shí)驗(yàn)版本，并使其運(yùn)行。Claude 通常給我一個很好的起點(diǎn)，然后我會與 Claude 一起迭代。我發(fā)現(xiàn)這些工具特別有助于避免那種‘無從下手’的困境?！?/p>

在 Anthropic 內(nèi)部，Sonnet 3.5 被認(rèn)為是一個“變革者”，并激勵了 Artifacts 團(tuán)隊(duì)的雄心。產(chǎn)品設(shè)計師 Michael Wang 分享道：

“在我的開發(fā)過程中，我?guī)缀跻恢痹谑褂?Claude。Claude 已經(jīng)成為我工作流程中不可或缺的一部分，老實(shí)說，如果不能再用它，我真的不知道該怎么辦。我用它來構(gòu)建代碼結(jié)構(gòu)，持續(xù)探討實(shí)現(xiàn)細(xì)節(jié)，并按需修改代碼。

在 Artifacts 的初步原型開發(fā)階段，Claude 3.5 Sonnet 還沒有準(zhǔn)備好進(jìn)行測試。因此，當(dāng)時我主要使用的是 Claude 3 Opus。

當(dāng)我們提前體驗(yàn)到 3.5 Sonnet 時，它帶來了顛覆性的改變。 內(nèi)部的同事們展示了由 Sonnet 一口氣創(chuàng)建的完整 Three.js 或 WebGL 應(yīng)用程序。那時我意識到，我們的構(gòu)建目標(biāo)可以更具野心。Sonnet 在發(fā)布前的一個月里對我們的功能集產(chǎn)生了巨大的影響，它真正促使我們拓展了對 Artifacts 可能性的想象?！?/p>

四、時間線與團(tuán)隊(duì)

Artifacts 是 Anthropic 今年在軟件工程圈子里討論度最高的發(fā)布之一！我向產(chǎn)品設(shè)計工程師 Michael Wang 了解了從想法到產(chǎn)品發(fā)布的團(tuán)隊(duì)規(guī)模和時間線。以下是項(xiàng)目的進(jìn)展情況：

“在 Alex 的演示之后，我于 2024 年 3 月 21 日開始在 claude.ai 的主庫中開發(fā)原型。

**我們有一位全職人員負(fù)責(zé)此項(xiàng)目，另一位兼職人員定期參與貢獻(xiàn)。**此外，在關(guān)鍵時刻還有幾位同事提供了幫助，期間很多 Anthropic 員工也參與了內(nèi)部測試。

項(xiàng)目在首次演示后的 3 個月內(nèi)，于 6 月 20 日發(fā)布。我們與目前最強(qiáng)大的模型 Claude 3.5 Sonnet 一同推出了 Artifacts。

整個項(xiàng)目感覺像是草草拼湊的操作，但有時候最好的東西就是這樣誕生的，不是嗎？”在之前的《The Pragmatic Engineer》文章中，我們報道過小團(tuán)隊(duì)發(fā)布有影響力產(chǎn)品的例子——例如?Meta 的 Threads 應(yīng)用程序由 12 位工程師在 6 個月內(nèi)完成。然而，Artifacts 可能是我遇到的最具草根性質(zhì)的高影響力產(chǎn)品之一！向所有參與構(gòu)建的 Anthropic 成員致以祝賀。