Claude 一分鐘做出亂數抽籤工具、貪吃蛇遊戲，與 ChatGPT 對比
經過了一年的時間， Claude 從 2.0 版陸續升級到 3.5 Sonnet 版本（2024/6），在 Claude 3.5 Sonnet 中推出了幾個顯而易見的改進：
- 速度比之前版本更快。
- 能夠從圖片、文本中分析出更完整內容。
- 透過實驗中的「 Artifacts 」附加功能，可以直接生成簡報、文件、網頁、小工具，在對話中直接讓我們「預覽且操作」製作出來的成品，當然也能下載完成的檔案。
- 免費帳戶在每個時間區段中也可以使用數次的 Claude 3.5 Sonnet 加上「 Artifacts 」功能。
2024/6/29 更新新實測案例：實測 Claude AI 將一篇枯燥論文，生成老師給孩子的網頁互動遊戲
效果就如下面影片所示範的那樣，我只是簡單輸入請其製作貪吃蛇網頁遊戲的指令，很快的完成成品，並且右方預覽視窗就能直接遊玩。
你只要免費註冊登入一個「 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 檔案，而右邊視窗可以直接進行操作。
接著我們試試看 ChatGPT GPT-4o 做出來的成果如何？用同樣的指令， ChatGPT 也可以根據我的需求自行分析網頁需要的架構、邏輯，然後自行寫出程式碼。
這部分也可以參考我之前的實測：「ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具，實測心得」。
不過， ChatGPT 目前在程式碼上，沒辦法像 Claude 那樣在右方直接預覽成果。
所以我請 ChatGPT 直接打包成 HTML 檔案讓我下載。
和 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 」預覽直接「線上發佈」，有獨立網址可以瀏覽，分享給其他人使用。
看起來「 Claude 」 3.5 Sonnet 結合 Artifacts ，確實值得要產出程式碼、網頁、文件的朋友試試看。
有興趣的朋友可以進一步研究：
- ChatGPT 關鍵提示語技巧
- 2024 更新，我實驗了一年的 AI 工作流程總整理：2024 我和 ChatGPT AI 工具如何一起工作，提示語、常用案例指南
- ChatGPT 交談分類法：ChatGPT 的 PARA 聊天室分類法：增強 AI 協作威力實戰案例分享
- 一般人最好上手且有效的 ChatGPT 提問法，以生成英文練習題為例
- ChatGPT 提示語說明書：通用三層結構與 9 個技巧提高 AI 生產力
- ChatGPT 五種助理教練提示語分享：目標規劃、寫作、學習到教學
- ChatGPT 特殊功能
- ChatGPT 自動串聯多功能案例：上網＋圖像＋文件組合生成技巧
- 用 ChatGPT 開啟修改 Excel、 Google 試算表教學！分析數據生成圖表
- 利用 ChatGPT App 寫語音筆記，提升輸出效率的秘密武器
- ChatGPT 圖文混合提問 9 種超能力：程式、教育、學習到行銷應用
- 用 ChatGPT 語音對話，設計擬真英文會話練習 App ，提示語分享
- ChatGPT 跨對話記憶、無痕模式教學，訓練 AI 記住特殊要求實測
- ChatGPT o1 會思考的 AI 新舊版實測比較表格：翻譯、摘要、企劃、文案與寫程式
- ChatGPT 與 AI 工具的第二大腦與學習應用
- AI 如何與寫筆記結合？我最常利用的 6 種提升筆記效率功能與案例
- 讓 AI 成為閱讀助手， ChatGPT 摘要、翻譯與學習筆記提示語分享
- 把 Claude AI 當作免費強大的PDF 文件、論文文獻摘要研究工具
- SciSpace 論文研究 AI 助手，中文文獻問答、摘要引用與報告改寫
- 3個 ChatGPT 輸入到輸出實驗，第二大腦筆記用 AI 煉成文章報告
- ChatGPT 與 AI 工具的工作效率應用
- 讓 ChatGPT 教你如何利用 ChatGPT ，快速問對問題解決工作痛點
- ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具，實測心得
- 用 ChatGPT 快速將會議語音逐字稿轉成完美文章表格的 5 個技巧
- Gamma 用 AI 幫你設計簡報、網頁，瞬間完成戲劇化版面內容
- AI 繪圖工具應用
- ChatGPT DALL-E 3 的7個特殊 AI 繪圖應用教學，勝過 Midjourney
- 我如何訓練 ChatGPT 撰寫 Midjourney 提示語？AI 繪圖四個階段
- Recraft 免費 AI 繪圖工具快速生成獨特 ICON 圖示與向量插圖教學
- Bing AI 大升級，免費支援 GPT-4 與 DALL-E 3 AI 繪圖，實測比較
- Microsoft Designer 免費試用中， AI 設計社群圖片、海報卡片幫手
- AI 相關生產力工具
大家好，我是電腦玩物站長 Esor ，歡迎參考我的系列課程與書籍：
- 2024/6 最新著作上市，歡迎支持：《高效人生工作法圖解》
- 「個人數位生產力」線上課程（可使用電腦玩物老讀者折扣碼 ESOR500 ，獲得 500 元折價喔！）。
- 時間管理、筆記系統、AI 工具相關課程：「課程介紹連結」
- 著作：《防彈筆記法》
- 訂閱追蹤 podcast 節目：「高效人生商學院」（Apple podcast 訂閱、 Google Podcast 訂閱）
- 訂閱「電腦玩物電子報」，不定期出刊。
我的電子郵件是 esorhjy@gmail.com ，如果你有任何關於筆記術、時間管理、提升工作效率的問題，歡迎寫信跟我討論。
（歡迎社群分享。但全文轉載請來信詢問，禁止修改上述內文，禁止商業使用，並且必須註明來自電腦玩物原創作者 esor huang 異塵行者，及附上原文連結：Claude 一分鐘做出亂數抽籤工具、貪吃蛇遊戲，與 ChatGPT 對比）
留言
張貼留言
為了避免垃圾廣告留言過多，開始測試「留言管理」機制，讓我可以更容易回應讀者留言，並更簡單過濾掉廣告，但只要不是廣告留言都會通過審核。