在AI技術(shù)日新月異的今天，Artifacts作為Claude Sonnet模型的一項創(chuàng)新功能，正在重新定義我們與AI的互動方式。本文將通過十個問題深入探討Artifacts的誕生、功能及其在AI應(yīng)用開發(fā)中的潛在影響。

“工欲善其事，必先利其器”——《論語》中這句話，在AI時代有了新的解釋：

從公元前魯班制器，到文藝復(fù)興達芬奇的手稿，再到今天 Claude 的 Artifacts（有工具畫-有說明書-有智能助手），人類一直在追尋著讓創(chuàng)造更簡單的方法。

當(dāng) Andrej Karpathy 在微軟 Build 大會上將 Prompt Engineering 重新定義為一種全新的編程范式時，也許他看到了與古人相同的智慧：真正改變世界的，從來都不是工具本身，而是工具帶來的創(chuàng)造可能?！?/p>

Artifacts是今年6月隨著Claude Sonnet一起推出的新功能，黃叔一直認(rèn)為它會帶來一些新的可能性，所以找了很多朋友交流后，嘗試用10個問題勾勒出Artifacts，如果你覺得有收獲，歡迎分享?！?/p>

一、讓Prompt火爆的詞生卡背后是Artifacts？

這三張圖估計大家有見過的：　

左一from 即友@李繼剛 的漢語新解，中間from 即友@云中江樹 的AI 簡歷，右一from 即友@一澤Eze 的社交名片。　

除了這些，還有下面的（以及更多的“一天”變種）：　

From 即友@空格的鍵盤 　

這一類，可以統(tǒng)稱為：詞生卡（輸入Prompt，大模型生成卡片）　

詞生卡在過去一段時間里，火爆全網(wǎng)，這背后除了李繼剛和開源社區(qū)諸多玩家（上面羅列出了幾位重要玩家和代表作）的費心研究之外，他們的研究成果能具象化以圖片的方式呈現(xiàn)，極大程度上依賴于Claude Sonnet的發(fā)布，以及同期上線的Artifacts能力。　

有個很有意思的點是，在我和李繼剛聊的時候，他有些氣憤的說：　

Artifacts沒啥好研究的。就是一個工程上的形。　

真正牛的東西，就是Prompt弄出來的那個文本，「神」。

二、Artifacts只是工程上的形？

某種角度來說，確實如此?！?/p>

Andrej Karpathy在2023微軟Bulid大會上做了個主題分享：State of GPT，其中提到了Prompt的重要性：　

Prompt彌補了人類大腦和LLM大腦兩種認(rèn)知架構(gòu)的差異　

人類要用自然語言進行編程　

也需要深入理解模型的行為和反應(yīng)　

之所以李繼剛的Prompt出神入化，背后一個是深入理解了模型，另一個也確實是對自己腦海中的思考做了極致的壓縮：　

得意忘言。手指月。形神之辨?！?/p>

都在說「那個東西」。　

李繼剛的思路，更偏向思辨，這個關(guān)注點會集中在Prompt層面，從這點來說，Artifacts只是最終的具象化表達?！?/p>

我們再看另外一個思路：云中江樹的思考，他覺得Artifacts除了形，還和模型能力的魂（藝術(shù)、設(shè)計等審美）有關(guān)！　

怎么理解呢？　

Claude這個模型的審美很好，能夠把卡片、網(wǎng)站渲染的很漂亮：Artifacts 是 Claude 模型能力的很好的外化表現(xiàn)形式！　

用大白話解釋就是：　

光靠Prompt的優(yōu)化，光靠模型的輸出，光靠Artifacts自己，都不能輸出很漂亮的內(nèi)容，一定是這三者的結(jié)合！　

也就是說：沒有 Claude 底層的審美能力，Artifacts 火不了！　

那審美能力為何重要呢？好產(chǎn)品總是和審美相伴相隨，如果不好看，傳播性就會很弱，詞生卡大概率也就無法成為爆款，甚至很多場景下就失去了實用性！　

某種意義上，Claude 很懂人性，知道人的認(rèn)知慣性，懂得信息的放大和弱化，聚焦和省略，Artifacts把這一點具象化的傳遞了出來！　

從這個角度來講，Artifacts是一個最終把它（模型編程能力、審美）呈現(xiàn)出來的功能?！?/p>

302.ai的Jomy，以及社交名片的作者 即刻@一澤Eze 對此有進一步的解釋：

三、Artifacts更多是功能？

302.ai對旗下的所有LLM都增加了Artifacts：　

@Jomy 認(rèn)為：Artifacts是個功能，不算是模型能力?！?/p>

為啥呢？因為Artifacts是通過系統(tǒng)提示詞約束模型輸出，再通過前端渲染出來，本身不難：　

那為何很多模型加上Artifacts，效果并不好呢？　

因為這非?？茨Ｐ捅旧淼妮敵瞿芰?，再具體一些就是模型的編程能力?！?/p>

是的，根據(jù)多位朋友的反饋，Claude Sonnet 0620版本的時候，Prompt需要寫的非常詳細，在穩(wěn)定性、代碼生成和設(shè)計美感幾個方面都需要有小技巧。但到了1022版本，Claude對前端代碼的理解，以及美學(xué)上的設(shè)計感就強非常多了。過去需要很多小技巧的Prompt現(xiàn)在也不需要寫的那么詳細了，輸出也更加穩(wěn)定了。　

所以，我們可以理解為，Artifacts是一個功能，但最終渲染效果的好壞，很吃模型本身的編程能力！　

社交片名的作者：即刻@一澤Eze 做過一個分享，其中一頁PPT是這么描述的，我覺得很貼切：　

在這張圖里，Artifacts是大模型處理后對輸出的一種呈現(xiàn)！　

ok，看完了上面兩點后，相信大家對Artifacts有了一些感性的認(rèn)知，我們下面一起回到Artifacts誕生來進一步理解：

四、Artifacts的誕生是為了簡單？

在Claude官方2個月前發(fā)布的視頻《How we built Artifacts with Claude》里，Alex是這么說的：　

早在三月份，我就想看看最新的模型（指Claude 3.5）在生成網(wǎng)站方面有多好，我一直在將它生成的網(wǎng)站復(fù)制并粘貼到編輯器中，然后我保存文件，并在網(wǎng)絡(luò)瀏覽器中打開文件，我注意到整個往返過程花費了很多時間?！?/p>

我想要它做的只是讓它立即在屏幕上渲染，我把這個非常簡陋的并排界面放在一起。　

當(dāng)我開始介紹這個界面，我想很多人都開始意識到，哇，這里好像有東西！　

。。?！?/p>

確實，在一開始使用Claude Sonnet輔助代碼生成的時候，黃叔也是打開兩個窗口，把Claude生成的代碼Copy到編輯器里，然后用瀏覽器打開調(diào)試，再把bug Copy到Claude窗口內(nèi)讓其修改，修改完畢的代碼再Copy回編輯器，再用瀏覽器驗證：　

現(xiàn)在直接在Claude內(nèi)輸入Prompt之后，合適的條件下，Artifacts就會直接渲染出效果供你檢查。這樣對于用戶來說就非常簡單了！　

我Claude賬號被封，使用整合了Claude和Aritfacts能力的Monica.im來給大家做個演示：　

上圖分為左右兩大塊，左側(cè)是對話框，顯示的是我和Claude的對話內(nèi)容，當(dāng)Claude的輸出觸發(fā)了某些機制后（后面我們會補充），右側(cè)就會出現(xiàn)Artifacts的界面，直接顯示具體的代碼渲染的結(jié)果，并且是可以交互點擊的，也就是說，如果渲染出了網(wǎng)頁，用戶可以直接去驗證樣式、功能是否符合預(yù)期，如果不符合，左側(cè)繼續(xù)去修改就行了。　

比如我希望網(wǎng)頁加上功能介紹，以及底部加上作者的信息，那在左側(cè)對話框輸入就行了：　

是不是變得非常簡單了？我不需要編輯器，不需要額外再打開瀏覽器，一個頁面里解決所有問題！　

是的，簡單是Artifacts帶來的一個重大改變：

五、Artifacts改變了什么？

我們用自然語言描述需求，AI即時呈現(xiàn)可視化的而結(jié)果，當(dāng)我們看到結(jié)果后，可以立即反饋，調(diào)整輸入，AI也會快速響應(yīng)，這種交互模式，比起之前大幅簡單了！　

對，就是簡單！　

“簡單”這個詞，幾乎是所有工具之爭的制高點?！?/p>

互聯(lián)網(wǎng)產(chǎn)品，只要降低一個難度門檻，往往就會獲得一批新用戶?！?/p>

梁寧《真需求》　

Claude這個能力的上線，大幅降低了使用大模型的門檻，幫助用戶做了很多減法！在一定程度上，覆蓋掉了Bolt.new的能力范圍~　

在Monica.im里面，我可以使用它進行發(fā)布、分享、變成小應(yīng)用，意味著我使用大模型生成的Artifacts工具，可以固化下來，可以分享出去，讓更多人用到，以及自己能持續(xù)使用?！?/p>

換個角度，你再想想，黃叔沒有代碼能力，在以前怎么可能做這么一個工具呢？但現(xiàn)在，不需要前端，不需要設(shè)計師，我自己輸入Prompt，就可以直接跟大模型對話，實現(xiàn)自己的需求了?！?/p>

是的，以后甚至不需要詳細的PRD，只需要Prompt，就可以構(gòu)建產(chǎn)品了！　

是不是簡單了非常多？　

所以盡管Artifacts看似很簡單的一個工程上的功能，但我和很多朋友一樣，都認(rèn)為它會帶來巨大的改變?！?/p>

Claude的Alex說：“看到它立即出現(xiàn)在屏幕上，某種東西就…突然通了。這不僅僅是為了加快流程，它改變了我們與 Claude 互動的方式?！?　

我也一樣這么理解的，以前我們是輸入Prompt，模型輸出文本，但現(xiàn)在Artifacts把這種交互變成了雙向和動態(tài)的對話！　

當(dāng)然，現(xiàn)在的Claude Sonnet V2能力還不夠強，但基于強化學(xué)習(xí)這一個在代碼層面確定性很強的方向，Artifacts的效果一定還會隨著模型編程能力的持續(xù)增強而繼續(xù)變好，技術(shù)的進步往往始于一個簡單而大膽的想法，Artifacts無疑代表了一種新范式?！?/p>

繼續(xù)，Artifacts只是詞生卡了么？并不只是的，我們前面展示了一些，但還有更多應(yīng)用場景：

六、Artifacts的應(yīng)用場景有哪些？

這個我們可以先看常見的Artifacts內(nèi)容形態(tài)：　

文檔（Markdown或者純文本）

Code

網(wǎng)站（單頁HTML）

SVG

圖標(biāo)or流程圖

交互式的React組件文檔

比如用來寫小說：　

單頁HTML

前面我做的MD文件合并工具，也是一種單頁HTML，我們再舉個例子，比如下圖里的博主，就指出了可以把文檔上傳，讓Claude生成一個可以點擊的測驗小游戲，這也是基于Artifacts：　

流程圖

邊畫邊說，相當(dāng)貼心的老師了：　

交互式React組件

比如下面這種相對復(fù)雜的動態(tài)效果呈現(xiàn)，底部調(diào)整各個參數(shù)的數(shù)值時，上面的正方形圖塊的內(nèi)容就會發(fā)生變化：　

或者其他數(shù)據(jù)可視化能力等等，都屬于這一類。　

還有類似的小游戲開發(fā)：　

（from 卡茲克《我體驗完剛發(fā)布的Claude3.5，發(fā)現(xiàn)最強的是這個新功能。》）　SVG

開篇文章就提到的多種詞生卡類型的內(nèi)容，就是用SVG呈現(xiàn)的！　

SVG這塊特別值得說一下，我也是第一次看到這種格式。SVG有幾個有意思的特性：　

無損縮放：SVG是矢量格式，可以無限放大

文件體積小

可編程：SVG是基于XML的格式，可以通過代碼直接修改和生成。所以它是可以通過數(shù)學(xué)公式描述圖形的，和AI的工作機制很匹配。

跨平臺兼容：SVG被所有的瀏覽器支持

可編程這一點很有意思，我舉個例子，用李繼剛“邏輯之刃（升級版）”的Prompt生成的SVG后，我可以通過直接修改代碼來調(diào)整SVG的樣式：　

右邊Artifacts的編輯區(qū)域，當(dāng)我修改了頁腳的文案，并保存之后，左邊的SVG圖選擇的“李繼剛 2024”文字就會被修改，這就是可編程！　

這些應(yīng)用場景，在什么情況下Claude會讓Artifacts出現(xiàn)呢？我們來個總結(jié)：

七、Artifacts有哪些特性？

根據(jù)官網(wǎng)說明，當(dāng)Claude輸出的內(nèi)容符合下面的要求時，就會創(chuàng)建一個Artifacts：　

內(nèi)容重要并且獨立完整，通常超過15行內(nèi)容

是你可能會希望在對話之外去編輯、迭代或者重復(fù)使用的內(nèi)容

代表了一個復(fù)雜的內(nèi)容片段，無需額外的對話上下文就可以獨立存在的

可能是你稍后希望參考或使用的內(nèi)容

Artifacts還有幾個有意思的特性：　

Artifacts有版本管理，在Artifacts的左下角，有版本選擇器，可以方便的在每個版本之間切換；

可以查看Artifacts的代碼，可以復(fù)制，也可以下載文件

ok，感覺到這里，我們可以對Artifacts來個總結(jié)了：

八、所以Artifacts是什么？

總結(jié)一下，什么是 Artifacts？　

Artifacts 是 Claude 3.5 Sonnet 模型的一項重要功能，它允許用戶在與 Claude 對話的同時，直接在對話旁邊編輯和構(gòu)建 Claude 生成的內(nèi)容。用戶可以要求 Claude 生成代碼片段、文本文檔、網(wǎng)站設(shè)計等內(nèi)容，這些內(nèi)容會以可預(yù)覽的方式呈現(xiàn)在對話旁邊的專用窗口中，形成一個動態(tài)工作空間。用戶可以實時查看、編輯并基于 Claude 的創(chuàng)作進行構(gòu)建，將 AI 生成的內(nèi)容無縫集成到他們的項目和工作流程中?！?/p>

Claude使用Artifacts的核心原則是：　

當(dāng)內(nèi)容需要獨立的展示空間和特殊的處理方式時，就會選擇使用Artifacts。　

這樣可以：　

提供更好的用戶體驗

方便內(nèi)容管理和編輯

確保內(nèi)容的可重用性

支持更復(fù)雜的交互需求

整體看下來，Artifacts比較像是一種對于模型輸出的額外渲染，這種渲染可以在很多維度和場景，比如下面這些：

九、正在被開發(fā)者們玩出新花樣？

Artifacts有一種實時生成內(nèi)容的思路，這種思路被V0.dev，Bolt.new都借鑒了，我們看Bolt.new，和Artifacts一樣的能力，左側(cè)是代碼編寫進程，右側(cè)直接顯示頁面的Preview，并且可交互：　

一澤也即將發(fā)布自己的新產(chǎn)品：aicard.eze.is ，目前可以免費使用，在網(wǎng)頁上點擊后可以快速生成圖片進行分享，是一個Artifacts -> 工程化落地 AI 小產(chǎn)品，大家可以訪問鏈接查看：　

302.ai除了對自己網(wǎng)站內(nèi)的LLM都加入了Artifacts之外，還直接基于此做了個AI網(wǎng)頁生成器：　

我們在《從Monica.im“智能工具箱”，Websim.ai，及李繼剛“漢語新解”：AI Coding帶來的新范式，不止Cursor！》這篇里也寫到Monica.im支持自然語言直接生成工具，然后工具會保存下來，可以在適當(dāng)?shù)臅r候調(diào)用的策略：　

還有前面我們看到的一個個詞生卡，本身也可以認(rèn)為就是一個個具體的產(chǎn)品，比如基于一澤的社交名片，就有人專門做了個網(wǎng)站：　

這些新花樣會不會成為新范式呢？

十、Artifacts會成為一種新范式？

（圖源一澤）　

我們可以看到：　

圖像化的表達，把大模型的文本輸出的呈現(xiàn)效果做了大幅提升！

基于Claude Artifacts的輸出能力（從SVG到流程圖到網(wǎng)頁功能），讓設(shè)計和研發(fā)的實現(xiàn)更加平民化了，AI更加平權(quán)了！

也就是說，基于大模型的Artifacts，隨著模型能力的逐漸增強，以及被更多用戶玩起來，會出現(xiàn)大量的Prompt-Based應(yīng)用的新解法?！?/p>

還是Andrej Karpathy，他對于Prompt工程的本質(zhì)做了重新的定義：　

他認(rèn)為”Prompt Engineering”這個詞可能有誤導(dǎo)性

實際上這是一種新的編程范式，更像是”AI工程”

強調(diào)這不僅僅是寫提示詞，而是一個完整的工程過程

也就是說，我們應(yīng)該將Prompt工程視為更廣泛的AI應(yīng)用開發(fā)的一部分！　

Prompt工程=更廣泛的AI應(yīng)用開發(fā)　

Artifacts強化了AI應(yīng)用開發(fā)　

推演：Artifacts進一步加速了這個范式進化的過程~　

未來，值不值得期待呢？

尾聲

Artifacts這個選題，其實在我腦海里挺久了，日常我主力使用的模型是Claude，常常驚嘆于Artifacts適時地出現(xiàn)，前陣子為了寫它，回看了一遍Andrej的演講，大為震撼，也重新思考Prompt的意義?！?/p>