Claude編程支持一鍵共享,第一批網民已經開始曬作品了
基爾西 發自 凹非寺
量子位 | 公眾號 QbitAI
Claude 3.5上新的「工坊模式」(Artifacts)再次更新,寫完的網頁應用支持一鍵分享了!
![](http://n.sinaimg.cn/spider20240710/204/w1080h724/20240710/d56f-c6ff3d9c8fa1ad6593536669a52d14d3.png)
不用自建服務器,不用部署後台程序,點一下就能自動獲得鏈接。
而且被分享的應用還能一鍵導入自己的對話,分分鐘魔改個新版本出來。
![](http://n.sinaimg.cn/spider20240710/356/w718h438/20240710/90ac-gif2f74a7ef39018fb76c4f2cf85ca71b0d.gif)
除了官方通告外,Anthropic提示詞工程師、開發者關係負責人Alex Albert也在Twitter上宣佈了這一消息。
Alex一邊介紹,一邊展示了用Claude製作的一個飛船小遊戲。
![](http://n.sinaimg.cn/spider20240710/200/w1080h720/20240710/30c3-8fd39d90b48f6dd3c061cc359ec89793.png)
這也是繼3.5這個大版本更新和「工坊模式」上線以來,Claude給廣大網民帶來的又一次驚喜。
新功能的接連發佈,也讓網民開始紛紛cue起OpenAI,表示OpenAI你在幹啥,現在兩家的對比實在是太鮮明了。
![](http://n.sinaimg.cn/spider20240710/713/w1080h433/20240710/4b12-512953eb53594219fec88e16b011f684.png)
不過目前Claude官方還沒推出像GPTs商店那樣的合集,只能靠鏈接來進行傳播。
但是熱心網民這邊,已經在GitHub建好倉庫,開始全網徵集作品了。
![](http://n.sinaimg.cn/spider20240710/201/w1080h721/20240710/1184-a01d911025240b98dc6d03f1da33876b.png)
當然在Alex的評論區,也有不少網民已經曬出了自己的作品,甚至有大神直接在Claude里訓練起了神經網絡,並把程序也公開了。
![](http://n.sinaimg.cn/spider20240710/735/w1080h1255/20240710/6ea7-a651044038f666747ac1e89a539f617d.png)
遊戲應用,寫完就能發佈
對於這個新的模式,量子位在第一時間進行了一番體驗。
進入Claude後,對話框中會出現一個錐形瓶圖標,點開會發現工坊模式已經自動打開(沒有的話就手動開啟)。
![](http://n.sinaimg.cn/spider20240710/272/w1080h792/20240710/5564-aa4b086deebea21c59356506229810bf.png)
開啟之後,只要對Claude提出的需求涉及了相關內容,界面就會自動變成分欄模式(其實是浮窗,但由於整個頁面比較大所以看著像分欄)。
左邊是正常的聊天對話框,右邊是代碼和預覽窗格。
![](http://n.sinaimg.cn/spider20240710/33/w1080h553/20240710/eecb-2a8e4523760a875e46477d4c00955fb9.png)
在右半屏中,代碼會隨著生成過程飛速跑動,生成完畢之後就會立馬跳轉到預覽界面。
![](http://n.sinaimg.cn/spider20240710/758/w814h744/20240710/8b9e-gifb0bcb5b79ee0cb18bb951a50e2b08436.gif)
不過,在這個簡易計算器中,由於使用的JavaScript存在浮點數精度問題,會出現0.1+0.2不等於0.3這個經典bug。
![](http://n.sinaimg.cn/spider20240710/20/w428h392/20240710/0035-gif19ec03e6d56adf4e5e8a9c0b9bf3ead8.gif)
這時要求Claude進行修復,它就會一邊在左邊輸出文字解釋,一邊在右邊生成新代碼,然後仍然是自動跳轉預覽,可以看到這次bug已經修復成功了。
![](http://n.sinaimg.cn/spider20240710/9/w1080h529/20240710/d22d-2dd57e56a898314d82b3d527752dfaf9.png)
另外,「工坊模式」還會記住程序的每一個修改版本,點擊箭頭就能在多個版本之間切換,以備不時之需。
![](http://n.sinaimg.cn/spider20240710/22/w396h426/20240710/1ed5-gif77bbde0619efa93e12eb853345a5db01.gif)
比起「工坊模式」剛上線的時候,可以看到預覽框當中多了一個publish按鈕,也就是本次更新的核心了。
點擊之後會彈出對話框進行二次確認,然後再點下Publish & Copy Link就能獲得分享鏈接了。
![](http://n.sinaimg.cn/spider20240710/485/w1080h1005/20240710/0b5c-007a321296c84b591519ec569bb6daf2.png)
只要有鏈接,分享出的應用人人都可玩,無需會員,甚至不需要註冊Claude帳號。
對於通用大模型而言,這極大簡化了應用的部署過程,只要有想法,小白用戶也能設計並直接發佈自己的應用了。
畢竟之前的同樣大模型就是把代碼寫好,最多再用文字的形式教給你怎麼部署,後續流程仍然存在一些門檻。
另外,別人分享的應用,也支持一鍵複刻到自己的Claude帳號,並進行修繕甚至魔改。
這一功能的入口,就是分享頁面右下角的Remix了。
![](http://n.sinaimg.cn/spider20240710/268/w1080h788/20240710/819b-ca4a6d559e84599bd389148818a6c31b.png)
在已經登錄的前提下,點擊按鈕之後會自動跳轉到自己的對話窗口,然後就可以看到系統把應用轉換成了一個文檔,同時加上了一段提示詞。
![](http://n.sinaimg.cn/spider20240710/639/w1080h359/20240710/6204-2ba4994000397546f917a76c664198bf.png)
文檔的內容,就是完整的HTML代碼前面加上一段如何remix的指導。
![](http://n.sinaimg.cn/spider20240710/80/w808h872/20240710/1f97-d4691aa6653ee69e77c01b0f063a8a5b.png)
這裏我們就簡單試一下,改一改遊戲中火箭上面的文字,只需要像正常使用Claude一樣提出需求,很容易就修改成了。
![](http://n.sinaimg.cn/spider20240710/228/w1080h748/20240710/0cb2-0217df434bc03a205fa5f8be19cbfb33.png)
除了這個收到不少好評的更新,Anthropic還官宣了另外一項升級,涉及到的是Claude的開發者工作台(Developer Console)。
不會寫提示詞,系統幫你生成
具體來說,此次開發者工作台的更新主要涉及兩大功能。
第一個功能是提示詞的生成和優化。
雖然我們和大模型交流使用的是自然語言,但在對話風格上還是和真人存在一些差別的。
有了這項功能,就可以不用思考專門的提示詞語言,像正常和人說話一樣描述需求了。
它由最新的Claude 3.5 Sonnet驅動,會根據任務目標自動生成更適合大模型的提示詞,然後一鍵傳遞給模型。
![](http://n.sinaimg.cn/spider20240710/230/w1080h750/20240710/eaea-e8406d2e12977ab6a53f0afe99d648bf.png)
同時,Anthropic深知提示詞對生成結果有著重要影響,所以還專門加入了不同提示詞生成結果的比較功能,用戶還可以根據結果對系統生成的提示詞進行打分,從而鞭策Claude進行改進。
![](http://n.sinaimg.cn/spider20240710/360/w1080h880/20240710/61d4-fedad40d48411391c0d8261dfdeba106.png)
另外對於開發者而言,寫好程序之後的調試過程也是一項巨大的工程,其中就包括測試用例的蒐集。
而Claude的新版工作台,不僅支持從csv表格中一鍵導入,還能用大模型自動批量生成測試用例。
![](http://n.sinaimg.cn/spider20240710/256/w1080h776/20240710/4187-91358fe6d0e5c8af655e647f4c511435.png)
總之,如果你有被Claude這些新功能秀到,就親自動手試一試吧。
PS:如果用不了Claude本體的話,「工坊模式」也可以通過Poe平台來體驗,同樣支持分享,而且可用的模型不只有Cladue,還可以切換成GPT-4o、Gemini 1.5 Pro等一系列最新模型。
(比如下圖就是在Poe中利用GPT-4o實現這一功能的demo)
![](http://n.sinaimg.cn/spider20240710/250/w552h498/20240710/10d4-gif4716a76b0414a8a58164d4e6d94698b0.gif)
參考鏈接:
[1]https://x.com/alexalbert__/status/1810699033524195673
[2]https://www.anthropic.com/news/evaluate-prompts