起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識十問Artifacts：從Prompt火爆出圈到被玩出花
在AI技術日新月異的今天，Artifacts作為Claude Sonnet模型的一項創新功能，正在重新定義我們與AI的互動方式。本文將通過十個問題深入探討Artifacts的誕生、功能及其在AI應用開發中的潛在影響。
“工欲善其事，必先利其器”——《論語》中這句話，在AI時代有了新的解釋：
從公元前魯班制器，到文藝復興達芬奇的手稿，再到今天 Claude 的 Artifacts（有工具畫-有說明書-有智能助手），人類一直在追尋著讓創造更簡單的方法。
當 Andrej Karpathy 在微軟 Build 大會上將 Prompt Engineering 重新定義為一種全新的編程范式時，也許他看到了與古人相同的智慧：真正改變世界的，從來都不是工具本身，而是工具帶來的創造可能?！?/p>
Artifacts是今年6月隨著Claude Sonnet一起推出的新功能，黃叔一直認為它會帶來一些新的可能性，所以找了很多朋友交流后，嘗試用10個問題勾勒出Artifacts，如果你覺得有收獲，歡迎分享?！?/p>
一、讓Prompt火爆的詞生卡背后是Artifacts？
這三張圖估計大家有見過的：
左一from 即友@李繼剛 的漢語新解，中間from 即友@云中江樹 的AI 簡歷，右一from 即友@一澤Eze 的社交名片。
除了這些，還有下面的（以及更多的“一天”變種）：
From 即友@空格的鍵盤
這一類，可以統稱為：詞生卡（輸入Prompt，大模型生成卡片）
詞生卡在過去一段時間里，火爆全網，這背后除了李繼剛和開源社區諸多玩家（上面羅列出了幾位重要玩家和代表作）的費心研究之外，他們的研究成果能具象化以圖片的方式呈現，極大程度上依賴于Claude Sonnet的發布，以及同期上線的Artifacts能力?！?/p>
有個很有意思的點是，在我和李繼剛聊的時候，他有些氣憤的說：
Artifacts沒啥好研究的。就是一個工程上的形?！?/p>
真正牛的東西，就是Prompt弄出來的那個文本，「神」。
二、Artifacts只是工程上的形？
某種角度來說，確實如此?！?/p>
Andrej Karpathy在2023微軟Bulid大會上做了個主題分享：State of GPT，其中提到了Prompt的重要性：
Prompt彌補了人類大腦和LLM大腦兩種認知架構的差異
人類要用自然語言進行編程
也需要深入理解模型的行為和反應
之所以李繼剛的Prompt出神入化，背后一個是深入理解了模型，另一個也確實是對自己腦海中的思考做了極致的壓縮：
得意忘言。手指月。形神之辨?！?/p>
都在說「那個東西」?！?/p>
李繼剛的思路，更偏向思辨，這個關注點會集中在Prompt層面，從這點來說，Artifacts只是最終的具象化表達?！?/p>
我們再看另外一個思路：云中江樹的思考，他覺得Artifacts除了形，還和模型能力的魂（藝術、設計等審美）有關！
怎么理解呢？
Claude這個模型的審美很好，能夠把卡片、網站渲染的很漂亮：Artifacts 是 Claude 模型能力的很好的外化表現形式！
用大白話解釋就是：
光靠Prompt的優化，光靠模型的輸出，光靠Artifacts自己，都不能輸出很漂亮的內容，一定是這三者的結合！
也就是說：沒有 Claude 底層的審美能力，Artifacts 火不了！
那審美能力為何重要呢？好產品總是和審美相伴相隨，如果不好看，傳播性就會很弱，詞生卡大概率也就無法成為爆款，甚至很多場景下就失去了實用性！
某種意義上，Claude 很懂人性，知道人的認知慣性，懂得信息的放大和弱化，聚焦和省略，Artifacts把這一點具象化的傳遞了出來！
從這個角度來講，Artifacts是一個最終把它（模型編程能力、審美）呈現出來的功能?！?/p>
302.ai的Jomy，以及社交名片的作者 即刻@一澤Eze 對此有進一步的解釋：
三、Artifacts更多是功能？
302.ai對旗下的所有LLM都增加了Artifacts：
@Jomy 認為：Artifacts是個功能，不算是模型能力?！?/p>
為啥呢？因為Artifacts是通過系統提示詞約束模型輸出，再通過前端渲染出來，本身不難：
那為何很多模型加上Artifacts，效果并不好呢？
因為這非?？茨Ｐ捅旧淼妮敵瞿芰?，再具體一些就是模型的編程能力?！?/p>
是的，根據多位朋友的反饋，Claude Sonnet 0620版本的時候，Prompt需要寫的非常詳細，在穩定性、代碼生成和設計美感幾個方面都需要有小技巧。但到了1022版本，Claude對前端代碼的理解，以及美學上的設計感就強非常多了。過去需要很多小技巧的Prompt現在也不需要寫的那么詳細了，輸出也更加穩定了?！?/p>
所以，我們可以理解為，Artifacts是一個功能，但最終渲染效果的好壞，很吃模型本身的編程能力！
社交片名的作者：即刻@一澤Eze 做過一個分享，其中一頁PPT是這么描述的，我覺得很貼切：
在這張圖里，Artifacts是大模型處理后對輸出的一種呈現！
ok，看完了上面兩點后，相信大家對Artifacts有了一些感性的認知，我們下面一起回到Artifacts誕生來進一步理解：
四、Artifacts的誕生是為了簡單？
在Claude官方2個月前發布的視頻《How we built Artifacts with Claude》里，Alex是這么說的：
早在三月份，我就想看看最新的模型（指Claude 3.5）在生成網站方面有多好，我一直在將它生成的網站復制并粘貼到編輯器中，然后我保存文件，并在網絡瀏覽器中打開文件，我注意到整個往返過程花費了很多時間。
我想要它做的只是讓它立即在屏幕上渲染，我把這個非常簡陋的并排界面放在一起。
當我開始介紹這個界面，我想很多人都開始意識到，哇，這里好像有東西！
。。?！?/p>
確實，在一開始使用Claude Sonnet輔助代碼生成的時候，黃叔也是打開兩個窗口，把Claude生成的代碼Copy到編輯器里，然后用瀏覽器打開調試，再把bug Copy到Claude窗口內讓其修改，修改完畢的代碼再Copy回編輯器，再用瀏覽器驗證：
現在直接在Claude內輸入Prompt之后，合適的條件下，Artifacts就會直接渲染出效果供你檢查。這樣對于用戶來說就非常簡單了！
我Claude賬號被封，使用整合了Claude和Aritfacts能力的Monica.im來給大家做個演示：
上圖分為左右兩大塊，左側是對話框，顯示的是我和Claude的對話內容，當Claude的輸出觸發了某些機制后（后面我們會補充），右側就會出現Artifacts的界面，直接顯示具體的代碼渲染的結果，并且是可以交互點擊的，也就是說，如果渲染出了網頁，用戶可以直接去驗證樣式、功能是否符合預期，如果不符合，左側繼續去修改就行了?！?/p>
比如我希望網頁加上功能介紹，以及底部加上作者的信息，那在左側對話框輸入就行了：
是不是變得非常簡單了？我不需要編輯器，不需要額外再打開瀏覽器，一個頁面里解決所有問題！
是的，簡單是Artifacts帶來的一個重大改變：
五、Artifacts改變了什么？
我們用自然語言描述需求，AI即時呈現可視化的而結果，當我們看到結果后，可以立即反饋，調整輸入，AI也會快速響應，這種交互模式，比起之前大幅簡單了！
對，就是簡單！
“簡單”這個詞，幾乎是所有工具之爭的制高點?！?/p>
互聯網產品，只要降低一個難度門檻，往往就會獲得一批新用戶?！?/p>
梁寧《真需求》
Claude這個能力的上線，大幅降低了使用大模型的門檻，幫助用戶做了很多減法！在一定程度上，覆蓋掉了Bolt.new的能力范圍~
在Monica.im里面，我可以使用它進行發布、分享、變成小應用，意味著我使用大模型生成的Artifacts工具，可以固化下來，可以分享出去，讓更多人用到，以及自己能持續使用?！?/p>
換個角度，你再想想，黃叔沒有代碼能力，在以前怎么可能做這么一個工具呢？但現在，不需要前端，不需要設計師，我自己輸入Prompt，就可以直接跟大模型對話，實現自己的需求了?！?/p>
是的，以后甚至不需要詳細的PRD，只需要Prompt，就可以構建產品了！
是不是簡單了非常多？
所以盡管Artifacts看似很簡單的一個工程上的功能，但我和很多朋友一樣，都認為它會帶來巨大的改變?！?/p>
Claude的Alex說：“看到它立即出現在屏幕上，某種東西就…突然通了。這不僅僅是為了加快流程，它改變了我們與 Claude 互動的方式?！?
我也一樣這么理解的，以前我們是輸入Prompt，模型輸出文本，但現在Artifacts把這種交互變成了雙向和動態的對話！
當然，現在的Claude Sonnet V2能力還不夠強，但基于強化學習這一個在代碼層面確定性很強的方向，Artifacts的效果一定還會隨著模型編程能力的持續增強而繼續變好，技術的進步往往始于一個簡單而大膽的想法，Artifacts無疑代表了一種新范式?！?/p>
繼續，Artifacts只是詞生卡了么？并不只是的，我們前面展示了一些，但還有更多應用場景：
六、Artifacts的應用場景有哪些？
這個我們可以先看常見的Artifacts內容形態：
文檔（Markdown或者純文本）
Code
網站（單頁HTML）
SVG
圖標or流程圖
交互式的React組件文檔
比如用來寫小說：
單頁HTML
前面我做的MD文件合并工具，也是一種單頁HTML，我們再舉個例子，比如下圖里的博主，就指出了可以把文檔上傳，讓Claude生成一個可以點擊的測驗小游戲，這也是基于Artifacts：
流程圖
邊畫邊說，相當貼心的老師了：
交互式React組件
比如下面這種相對復雜的動態效果呈現，底部調整各個參數的數值時，上面的正方形圖塊的內容就會發生變化：
或者其他數據可視化能力等等，都屬于這一類?！?/p>
還有類似的小游戲開發：
（from 卡茲克《我體驗完剛發布的Claude3.5，發現最強的是這個新功能?！罚VG
開篇文章就提到的多種詞生卡類型的內容，就是用SVG呈現的！
SVG這塊特別值得說一下，我也是第一次看到這種格式。SVG有幾個有意思的特性：
無損縮放：SVG是矢量格式，可以無限放大
文件體積小
可編程：SVG是基于XML的格式，可以通過代碼直接修改和生成。所以它是可以通過數學公式描述圖形的，和AI的工作機制很匹配。
跨平臺兼容：SVG被所有的瀏覽器支持
可編程這一點很有意思，我舉個例子，用李繼剛“邏輯之刃（升級版）”的Prompt生成的SVG后，我可以通過直接修改代碼來調整SVG的樣式：
右邊Artifacts的編輯區域，當我修改了頁腳的文案，并保存之后，左邊的SVG圖選擇的“李繼剛 2024”文字就會被修改，這就是可編程！
這些應用場景，在什么情況下Claude會讓Artifacts出現呢？我們來個總結：
七、Artifacts有哪些特性？
根據官網說明，當Claude輸出的內容符合下面的要求時，就會創建一個Artifacts：
內容重要并且獨立完整，通常超過15行內容
是你可能會希望在對話之外去編輯、迭代或者重復使用的內容
代表了一個復雜的內容片段，無需額外的對話上下文就可以獨立存在的
可能是你稍后希望參考或使用的內容
Artifacts還有幾個有意思的特性：
Artifacts有版本管理，在Artifacts的左下角，有版本選擇器，可以方便的在每個版本之間切換；
可以查看Artifacts的代碼，可以復制，也可以下載文件
ok，感覺到這里，我們可以對Artifacts來個總結了：
八、所以Artifacts是什么？
總結一下，什么是 Artifacts？
Artifacts 是 Claude 3.5 Sonnet 模型的一項重要功能，它允許用戶在與 Claude 對話的同時，直接在對話旁邊編輯和構建 Claude 生成的內容。用戶可以要求 Claude 生成代碼片段、文本文檔、網站設計等內容，這些內容會以可預覽的方式呈現在對話旁邊的專用窗口中，形成一個動態工作空間。用戶可以實時查看、編輯并基于 Claude 的創作進行構建，將 AI 生成的內容無縫集成到他們的項目和工作流程中?！?/p>
Claude使用Artifacts的核心原則是：
當內容需要獨立的展示空間和特殊的處理方式時，就會選擇使用Artifacts。
這樣可以：
提供更好的用戶體驗
方便內容管理和編輯
確保內容的可重用性
支持更復雜的交互需求
整體看下來，Artifacts比較像是一種對于模型輸出的額外渲染，這種渲染可以在很多維度和場景，比如下面這些：
九、正在被開發者們玩出新花樣？
Artifacts有一種實時生成內容的思路，這種思路被V0.dev，Bolt.new都借鑒了，我們看Bolt.new，和Artifacts一樣的能力，左側是代碼編寫進程，右側直接顯示頁面的Preview，并且可交互：
一澤也即將發布自己的新產品：aicard.eze.is ，目前可以免費使用，在網頁上點擊后可以快速生成圖片進行分享，是一個Artifacts -> 工程化落地 AI 小產品，大家可以訪問鏈接查看：
302.ai除了對自己網站內的LLM都加入了Artifacts之外，還直接基于此做了個AI網頁生成器：
我們在《從Monica.im“智能工具箱”，Websim.ai，及李繼剛“漢語新解”：AI Coding帶來的新范式，不止Cursor！》這篇里也寫到Monica.im支持自然語言直接生成工具，然后工具會保存下來，可以在適當的時候調用的策略：
還有前面我們看到的一個個詞生卡，本身也可以認為就是一個個具體的產品，比如基于一澤的社交名片，就有人專門做了個網站：
這些新花樣會不會成為新范式呢？
十、Artifacts會成為一種新范式？
（圖源一澤）
我們可以看到：
圖像化的表達，把大模型的文本輸出的呈現效果做了大幅提升！
基于Claude Artifacts的輸出能力（從SVG到流程圖到網頁功能），讓設計和研發的實現更加平民化了，AI更加平權了！
也就是說，基于大模型的Artifacts，隨著模型能力的逐漸增強，以及被更多用戶玩起來，會出現大量的Prompt-Based應用的新解法?！?/p>
還是Andrej Karpathy，他對于Prompt工程的本質做了重新的定義：
他認為”Prompt Engineering”這個詞可能有誤導性
實際上這是一種新的編程范式，更像是”AI工程”
強調這不僅僅是寫提示詞，而是一個完整的工程過程
也就是說，我們應該將Prompt工程視為更廣泛的AI應用開發的一部分！
Prompt工程=更廣泛的AI應用開發
Artifacts強化了AI應用開發
推演：Artifacts進一步加速了這個范式進化的過程~
未來，值不值得期待呢？
尾聲
Artifacts這個選題，其實在我腦海里挺久了，日常我主力使用的模型是Claude，常常驚嘆于Artifacts適時地出現，前陣子為了寫它，回看了一遍Andrej的演講，大為震撼，也重新思考Prompt的意義?！?/p>
本文由人人都是產品經理作者【Super黃】，微信公眾號：【AI產品黃叔】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
文章很好地闡述了Artifacts的潛力和對未來AI應用開發的影響，展示了它如何改變我們與AI的互動方式，并為創造過程帶來新的可能。