Canva 在四月中進行了一次重大更新，主打 AI 功能的 Magic Studio 全面升級，其中與 Claude 合作開發的 Canva Code 更是備受矚目。這項功能讓使用者能夠製作出真正可互動的工具，並將其應用於簡報或獨立網頁中。使用者無需編寫程式碼，也不需自行開發軟體，就能打造互動式表單、即時回饋、小遊戲原型，甚至 AI 工具介面。
Canva Code 的實用範例
以下整理幾個實用又有趣的 Canva Code 應用，帶領大家快速了解其功能：
拖曳式班表系統
-
使用者可以輸入人名，系統會自動產生文字方塊，最多可輸入 5 個人。
-
每個人的名字都有不同的底色，方便區分。
-
當拖曳失敗時，系統會顯示可愛的動畫特效。
-
Canva Code 支援 CSS 動畫和 JS 控制事件，確保互動順暢。
-
系統還會生成可愛的 emoji，並提供排班統計功能。
-
可以設定排班規則，例如一個人最多不能排超過 7 個時段，且連續只能排 2 個時段（早中或中晚）。
-
當違反排班規則時，系統會跳出提醒通知。
這個功能展示了 Canva Code 如何將使用者設定的規則轉化為程式邏輯，並應用於實際的排班系統中。
每日花費統計表
-
使用者可以設計一個互動個人網站，用於統計每日花費。
-
網站中間可以放置一個穿著通勤服的上班族社畜圖片。
-
使用者可以輸入自己的名字和每日預算金額。
-
網站下方設有花費輸入區，使用者可以記錄每日的花費項目和金額。
-
系統會根據花費情況，顯示不同的動畫表情，並提供預算提醒。
這個範例展示了 Canva Code 如何打造個人化的理財工具，幫助使用者掌握自己的消費狀況。
英文克漏字遊戲
-
Canva Code 可以用來設計英文克漏字遊戲，主題為飛機。
-
使用者輸入正確的英文單字，就可以擊毀敵機。
-
遊戲採用小學生程度的英文單字，並設有記分表，100 分即可過關。
-
系統會計算通關時間。
這個功能展示了 Canva Code 如何將教育融入遊戲，讓小朋友在玩樂中學習英文。
3D 飛行模擬器
-
Canva Code 可以用來製作 3D 飛行模擬器。
-
使用者可以在虛擬的台北市中駕駛飛機，並欣賞台北 101、中正紀念堂、故宮等知名地標。
-
可以調整飛機的飛行速度和方向。
這個範例展示了 Canva Code 如何創造沉浸式的遊戲體驗，讓使用者在虛擬世界中自由探索。
Link in Bio 工具
-
Canva Code 可以用來製作類似 Linktree 的 link in bio 工具。
-
使用者可以在頁面上放置個人圖片、logo，並提供各種連結，例如官方網站、YouTube 頻道、Facebook 粉絲專頁、Instagram 帳號等。
這個功能展示了 Canva Code 如何整合各種線上資源，方便使用者分享個人資訊。
熱門影片整理網頁
- 使用者可以將熱門影片的網址放入 Canva Code，系統會自動生成一個包含這些影片的獨立網頁。
這個範例展示了 Canva Code 如何快速建立影片分享平台，方便使用者推廣自己的作品。
蔬菜水果分類遊戲
-
Canva Code 可以用來製作蔬菜水果分類遊戲，讓小朋友學習辨識水果和蔬菜。
-
使用者需要將圖片拖曳到正確的分類中（水果或蔬菜）。
-
答對時會有煙火特效。
這個功能展示了 Canva Code 如何設計互動式教學工具，幫助小朋友學習知識。
電子雞
-
Canva Code 可以用來製作互動式網頁，主題為電子寵物。
-
電子寵物採用像素風格，整體風格復古懷舊。
-
使用者可以餵食電子寵物、摸摸牠，並與牠互動。
這個範例展示了 Canva Code 如何重現經典遊戲，讓使用者體驗養育電子寵物的樂趣。
Canva Code 的優缺點
Canva Code 是一個非常有趣且創新的功能，但它也存在一些缺點：
-
無法取得原始碼： Canva Code 生成的程式碼原始碼無法被使用者取得，使用者只能透過氛圍程式開發的方式進行修改。
-
成功率受運氣影響： 生成結果的成功與否，除了提示語的撰寫外，還受到伺服器穩定性和個人運氣的影響。
-
Claude API 的限制： 由於 Claude 不支援聯網搜尋，Canva Code 在抓取網路資訊時可能會遇到阻礙。
總結
Canva Code 是一個強大的工具，它讓使用者能夠在 Canva 中輕鬆建立互動式內容。雖然它存在一些缺點，但其易用性和豐富的功能使其成為設計師、教育者和任何想要創造互動體驗的人的理想選擇。
{# 
{#