Claude 一分鐘做出亂數抽籤工具、貪吃蛇遊戲,與 ChatGPT 對比



之前在電腦玩物介紹過由 Anthropic 開發的「 Claude 」生成式 AI 服務,他在 2023/10 開放全球使用,那時候就具備一個強大的特色:可以上傳大量文字內容的 PDF 文件,進行 AI 分析與問答。(延伸閱讀:把 Claude AI 當作免費強大的PDF 文件、論文文獻摘要研究工具

經過了一年的時間, Claude 從 2.0 版陸續升級到 3.5 Sonnet 版本(2024/6),在 Claude 3.5 Sonnet 中推出了幾個顯而易見的改進:

  • 速度比之前版本更快。
  • 能夠從圖片、文本中分析出更完整內容。
  • 透過實驗中的「 Artifacts 」附加功能,可以直接生成簡報、文件、網頁、小工具,在對話中直接讓我們「預覽且操作」製作出來的成品,當然也能下載完成的檔案。
  • 免費帳戶在每個時間區段中也可以使用數次的 Claude 3.5 Sonnet 加上「 Artifacts 」功能。


效果就如下面影片所示範的那樣,我只是簡單輸入請其製作貪吃蛇網頁遊戲的指令,很快的完成成品,並且右方預覽視窗就能直接遊玩。




你只要免費註冊登入一個「 Claude 」帳戶,就能開始使用最新的 Claude 3.5 Sonnet 模型,然後別忘了開啟「 Artifacts 」功能,試試看直接在對話中生成你需要的網頁小工具、小遊戲,乃至於簡單的簡報。

下面我會實際測試這些成果,並且與 ChatGPT 製作出來的版本做對比,提供有興趣的朋友參考。





用 AI 快速設計一個亂數抽籤工具:Claude 3.5 VS ChatGPT-4o


我用下面這個共同指令,來測試看看 Claude 3.5 與 ChatGPT-4o 是否可以「直接」做出可用的亂數抽籤網頁小工具。

你是一位注重功能與舒適介面的程式設計師,幫我設計一個「亂數抽籤」網站工具,讓我可以輸入一數字,決定要抽出的數量,然後工具就會抽出符合數字範圍內、符合數量的中獎數字。

請一步一步分析,根據我的需求,設計基本的網頁架構,接著設計好輸入的欄位,並且設計一些符合這個需求,可以增加美觀的網頁效果,然後寫出網頁程式碼。



讓我先來試試看 Claude 3.5 Sonnet 結合「 Artifacts 」的效果。直接輸入上面的指令, Claude 就會分析我的需求,開始撰寫程式碼,並立即生成可以預覽、互動的 HTML 檔案,而右邊視窗可以直接進行操作。




看起來 Claude 3.5 Sonnet 只要簡單的指令,就能很好的理解我的需求,並且可以自己設計需要的架構與程式碼,我並沒有講得太細,實際呈現出來的效果都是 Claude 3.5 Sonnet 自己分析出來的。




接著我們試試看 ChatGPT GPT-4o 做出來的成果如何?用同樣的指令, ChatGPT 也可以根據我的需求自行分析網頁需要的架構、邏輯,然後自行寫出程式碼。





不過, ChatGPT 目前在程式碼上,沒辦法像 Claude 那樣在右方直接預覽成果。

所以我請 ChatGPT 直接打包成 HTML 檔案讓我下載。




下載後,下面是 ChatGPT 製作出來的版本。介面與操作也很不錯,並且自己加上了一個可以自訂數字範圍的額外欄位。




和 Claude 3.5 Sonnet 版本對比,你覺得哪一個比較好呢?





用 AI 快速設計一個貪吃蛇小遊戲:


接著,我測試了設計貪吃蛇網頁小遊戲,用下面的指令,直接套用在 Claude 和 ChatGPT 上。

你是一位注重功能與舒適介面的程式設計師,幫我設計一個「貪吃蛇」網頁小遊戲。
請一步一步分析,根據我的需求,設計基本的網頁架構,接著設計好輸入的欄位,並且設計一些符合這個需求,可以增加美觀的網頁效果,然後寫出網頁程式碼。



把指令輸入 Claude 3.5 Sonnet,同樣的, AI 自動分析需要的架構、邏輯,一次問答,就生成出右方一個可以操作互動的貪吃蛇小遊戲。

遊戲中可以用鍵盤控制方向,有吃球長大的效果,也有失敗的機制,是一個可玩的小遊戲。




同樣的指令輸入 ChatGPT GPT-4o, ChatGPT 這次寫出一串很長很長的程式碼,我同樣請其直接打包成 HTML 檔案給我,同樣是一次生成,中間沒有經過任何修改。




下面是 ChatGPT 製作出來的貪吃蛇小遊戲,多出了一個「控制遊戲快慢」的功能,而其他部分則和 Claude 的效果一樣。





Claude 3.5 Sonnet Artifacts 延伸利用:

從前面兩個實際測試案例來看, Claude 3.5 和 ChatGPT-4o 都能「一次生成」上述的網頁小工具、小遊戲,他們都會完整的分析我的需求, AI 自行進行需要的設計邏輯分析,然後自動寫出完整的程式碼。

不過 Claude 3.5 Sonnet 多出了一個 Artifacts 功能,可以直接在右方預覽成果,確實看起來很方便,如果要進一步修改,也會更加簡單。

例如,我下面嘗試讓 Claude 3.5 Sonnet 製作簡報,我先提供一些資料,請 AI 設計大綱並產出簡報, Claude 3.5 Sonnet 就製作出一個可以在右方預覽的版本,而且是真的可以換頁。




但我想調整風格,所以我上傳一張風格圖片,請 Claude 3.5 Sonnet 分析,並據此改變簡報風格,沒想到效果居然非常好!(如下圖)




2024/7/10 更新, Claude 製作的小工具,現在可以透過「 Artifacts 」預覽直接「線上發佈」,有獨立網址可以瀏覽,分享給其他人使用。

下面是我測試的一個簡單亂數抽籤網頁:https://claude.site/artifacts/0413c2e2-7193-43e6-a03d-deec13770a0a




看起來「 Claude 」 3.5 Sonnet 結合 Artifacts ,確實值得要產出程式碼、網頁、文件的朋友試試看。

有興趣的朋友可以進一步研究:




大家好,我是電腦玩物站長 Esor ,歡迎參考我的系列課程與書籍:


我的電子郵件是 esorhjy@gmail.com ,如果你有任何關於筆記術、時間管理、提升工作效率的問題,歡迎寫信跟我討論。

(歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:Claude 一分鐘做出亂數抽籤工具、貪吃蛇遊戲,與 ChatGPT 對比

留言

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Dropbox 雲端資料同步軟體能用來幹嘛?10個我最常被滿足需求

AI 如何與寫筆記結合?我最常利用的 6 種提升筆記效率功能與案例

Facebook login out 遠端登出臉書帳號,安全清除遠端電腦密碼

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Luma AI 免費生成逼真影片實測,用中文指令或圖片創造短片教學

Draw.io 中文線上製作流程圖首選!專業水準完全免費