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 對比）

    文章分類：
    電腦玩物站長 Esor （異塵行者），在電腦玩物上的文章有別於單純的軟體和服務介紹，而是更強調軟體和服務背後的數位工作思維及方法，並說明實際應用後帶來的生活改變。著有《電腦玩物站長的筆記思考術》、《大腦減壓的子彈筆記術：用Evernote打造快狠準系統》、《比別人快一步的Google工作術：從職場到人生的100個聰明改造提案》等暢銷書籍。

    留言

    張貼留言

    為了避免垃圾廣告留言過多，開始測試「留言管理」機制，讓我可以更容易回應讀者留言，並更簡單過濾掉廣告，但只要不是廣告留言都會通過審核。

    這個網誌中的熱門文章

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

    作者：
    圖片
    現在大家照片都儲存在數位手機、相機、硬碟或雲端，數位欣賞與分享很方便。但有時候就是需要拿到「實際照片」，例如： 小朋友學校的勞作作業 想要製作家庭相框 用照片來當小禮物 把照片貼在紙本手帳上 這時候，有什麼方法可以快速把數位照片「洗」成實體照片？而且最好能不花時間、立即拿到、價格也不貴呢？ 如果家裡沒有印表機（或是沒有好的印表機），又不想跑照相館，那麼這時候 「便利商店」同樣也提供了印照片的服務 ，而且價格不貴，可以立即拿到，操作流程也十分簡單。 之前我在電腦玩物分享過：「 不需買印表機也免隨身碟， 7-11 全家雲端列印超方便教學 」。這篇文章則從印照片出發： 同樣的不需買印表機、不需隨身碟，就能快速印出高品質的照片成品。
    ........................繼續閱讀全文內容

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

    作者：
    圖片
    在之前寫完「 善用 Google 航班搜尋找出理想便宜機票的 10 個技巧 」一文後，我想繼續挖掘 Google 幫我們規劃自助旅行的潛力。 今天這篇文章，就深入的來聊聊 Google 的「我的地圖」服務，這是一個可以讓我們「自訂地圖」的工具 ，在地圖上任意繪製地標、路線，對商務需求來說可以打造出一張一張資料地圖（例如我之前在製作一本新書時建立的「 台灣推薦空拍地點地圖 」），對生活需求來說，則可以讓我們規劃自助旅行路線！ Google 「我的地圖」在規劃自助旅行路線時可以解決許多問題： 國外地點名稱地址常常難懂，用自訂地圖就能自己取一個好辨識的名稱。 在規劃路線之外，自訂地圖還能補充許多旅遊圖文資料，讓這張地圖就是旅遊手冊。 好看的自訂地圖一方面旅行時帶來好心情，二方面事後就是最好的旅遊回憶之一。 自訂地圖還能跟朋友共享合作，讓彼此都能在手機上查看這次旅行地圖。
    ........................繼續閱讀全文內容

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

    作者：
    圖片
    你聽過或用過 Slack 嗎？過去一年， Slack 這一個團隊通訊平台服務不僅在國外爆紅，在台灣我也看過好幾個創業團隊使用 Slack 來做公司內部的訊息管理，到底 Slack 有什麼魅力？它是不是比起 LINE 或 Facebook 或 Email 更能有效率的管理團隊溝通呢？我自己今年也有機會在一個專案合作中使用了 Slack 一段時間，我覺得它吸引人之處有三點： 1. 「 很有趣 」： Slack 裡擁有跟 LINE 或 Facebook 一樣易於讓公司同事聊天打屁、傳送有趣影音圖文的功能。 2. 「 有效率 」：但是 Slack 的頻道、群組機制讓茶水間的聊天，不會干擾工作的討論，並且星號與釘選功能讓每個同事可以從聊天中記錄重點。 3. 「 有彈性 」： Slack 的架構可以讓每一個團隊設計出符合自己需求的通訊平台， Slack 的軟體則讓同事可以在任何地方和公司保持聯繫。 如果你需要中文版的同類平台，可以參考： JANDI 高效率團隊通訊平台完整教學，比 Slack 更適合中文用戶 。 2017/3 新增 ： Sortd for Slack： 改造 Slack 討論串介面變成專案任務排程看板
    ........................繼續閱讀全文內容

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

    作者：
    圖片
    Google NotebookLM 是一個以 AI 筆記本為概念的線上生成式 AI 問答工具。和 ChatGPT 、 Copilot 不同的是， Google NotebookLM 「相對」不會憑空生成內容，也不是上網找答案，而是結合文件資料庫 AI 分析功能（透過  Gemini Pro  分析我們的知識庫），幫助我們根據自己上傳的大量筆記、文件，生成有明確引用的論文摘要、報告企劃、文章大綱。 相較之下很適合自己已經有足夠資料，只是需要 AI 協助分析與輸出的人，例如老師規畫課程、學生製作報告、研究者撰寫論文、創作者撰寫草稿來使用。
    ........................繼續閱讀全文內容

    Miro 遠距工作開視覺會議的免費強大白板，專案圖解實例教學

    作者：
    圖片
    團隊一起開會討論專案規劃、產品設計， 為了把大家的想法表達得更清楚，需要將各種思考視覺化，把各種計畫圖解化。 例如用 心智圖 展開專案流程，用 系統思考法 釐清專案關鍵環節，或是畫一張 商業模式精實畫布 。 面對面開會時，我們可以在會議室的大白板上，畫出這些圖解。 但如果想要遠距工作、遠端會議，這時候，就可以利用「線上協同合作的白板工具」 。這類遠距視覺會議的工具其實也不少，我之前介紹過的簡單版工具就有： Witeboard 世界上最簡單快速的協同合作白板，開會上課利器 Awwapp 觸控靈敏線上共用白板，免註冊電腦平板手機立即可用 但說到功能強大，可以滿足各種視覺會議的圖解需求，就不能不提到： 「 Miro 」這個線上視覺圖解白板工具。
    ........................繼續閱讀全文內容

    Google 表單自動關閉回覆教學：時間人數到達就過期

    作者：
    圖片
    Google 表單，是 Google 雲端硬碟裡用來製作線上問卷調查的免費工具。 愈來愈強大、愈來愈漂亮的 Google 表單，可是設計出各式各樣擁有專業問題、滿足特殊調查需求的精美問卷，如果你還不知道怎麼活用他的基本功能，那麼一定要參考下面三篇我在電腦玩物中所寫的一系列教學，從基本功能到隱藏功能，會帶你上手這個好用的工具： 設計問卷調查快速免費，新版線上 Google form 表單教學 不再只有醜醜範本！如何幫 Google 表單美化背景外觀？ Google 表單的 10 個專業問券調查設計秘密教學  也因為寫了一系列實用的 Google 表單教學，所以很多朋友來問我： Google 表單還能不能滿足某某個需求？ 而其中被詢問度最高的就是：「 可不可以讓 Google 表單 自動關閉回覆 ？時間過期了問卷就關閉，填寫人數到達限額了就自動停止。 」如果可以做到，那麼 Google 表單甚至可以用在報名表、抽獎表之類的應用了。好消息是，這個問題有解了，今天開始 Google 表單可以做到限期、限額自動關閉回覆的功能囉！ 2017/8/31 新增 ： 自動移除額滿選項！ Google 表單報名購物限制數量最簡單教學
    ........................繼續閱讀全文內容

    畫張圖說得更清楚！ Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

    作者：
    圖片
    今天要跟大家介紹一個很有意思，也可能對老師、創作者、常做簡報的職場工作者很有幫助的 AI 工具：「 Napkin （餐巾紙）」，這是一個 AI 會根據我們提供的文字，創作手繪圖表、圖解、圖說的線上工具。 為什麼叫做 Napkin（餐巾紙）？如果你看過可以說是簡報經典著作的《簡報 Show and tell》、《餐巾紙的背後》作者丹‧羅姆（Dan Roam）系列書籍，你應該就能心領神會。
    ........................繼續閱讀全文內容

    少記筆記，減少整理，高效輸出：6 原則打造任務驅動型第二大腦

    作者：
    圖片
    筆記越記越多，卻越來越難找到實用的內容？你是否浪費了大把時間整理從未使用過的資料？其實很多時候： 「放下資料，不整理」，就是最有效的整理方法。 就像「精實管理」中強調的：「需要的東西，在需要的時候，只提供需要的量。」減少庫存、人工的額外浪費。當我們在打造個人第二大腦時，也可以把握這個整理原則。
    ........................繼續閱讀全文內容

    Google 表單的 10 個專業問卷調查設計秘密教學

    作者：
    圖片
    2018 年最新教學整理 ： Google 表單不是只能做問卷， 你沒想到的10個活用案例教學   說到 Google 表單功能，現在愈來愈多人知道可以利用他來製作免費的線上問卷調查，或是利用他來收集學校班級、公司團體裡的各種投票、意見、資料。利用「 Google 表單」，任何人都可以不花一毛錢、不需要寫程式技巧、不需要自己架站，就可以自己完成例如訂便當網頁、線上報名系統，或是線上讓上百上千人一起回答的問卷統計。 而且最新版的 Google 表單還提供了漂漂亮亮的各種新版面，就算不滿意也能讓自己新增照片、影片、調整外觀，製作出實用又好看的問卷： 設計問卷調查快速免費，新版線上 Google form 表單教學 不再只有醜醜範本！如何幫 Google 表單美化背景外觀？ Google 表單的基本功能很好上手，但是大家有沒有深入挖掘一下 Google 表單更多的潛力？或者一些缺少的功能有沒有技巧可以轉個彎補足？我們可以在 Google 表單中做出跳轉答案的心理測驗遊戲嗎？或是可以在 Google 表單限制回答者一定要在郵件欄位填寫電子郵件？ 今天這篇文章，我要總結 Google 表單的新舊功能， 一起來看看可能很多朋友不知道的 Google 表單設計秘密。 2014 補充秘密：讓 Google 表單可以到期自動關閉 ： Google 表單自動關閉回覆教學：時間人數到達就過期 2015/9/6 新增 ： Google 表單新介面你試過嗎？快速設計時尚問卷調查 2015/9/21 新增 ： Excel 記帳雲端進化！ Google 表單比記帳 App 還好用 2016/3/21 新增： 如何讓 Google 表單報名成功後自動寄出確認通知信？ 2016/6/28 新增 ： Google 表單測驗卷製作教學，幫老師自動改考卷評分 2017/1/23 新增 ： 用 Google 表單設計九宮格晨間日記教學：問卷自動轉特殊文件 2017/6/27 新增 ： Google 表單支援中文智慧型問卷，寫好題目自動設計好答案！ 2017/7/9 新增 ： 出國旅行記帳分帳不混亂教學：免裝 App 的記帳表格範本下載   2017/7/11 新增 ： 免費簡單架設報名徵選傳檔網頁， Google 表單上傳檔案開放了 2017/...
    ........................繼續閱讀全文內容