Canva AI大升級！程式小白也能「Vibe Coding」打造互動式網頁：免費版教學一次看

今年的 Canva Create 2025 上，Canva 公司發表了多項產品更新，其中最受矚目的，莫過於在 Canva 中直接透過 AI 生成程式碼 的功能！只需輸入簡單指令，就能輕鬆打造兼具互動性與美感的介面，讓設計工具也能「Vibe Coding」。

《數位時代》將詳細拆解如何在 Canva 中運用這項新功能，值得注意的是，即使是免費版 Canva 帳號 也能使用喔！

在開始前，我們要先找到Canva Code的入口。操作步驟非常簡單：

• 開啟 Canva 首頁。
• 選擇「Canva AI」選項。
• 點擊下方的「幫我撰寫程式碼」，即可開始輸入指令。

如果對於想製作什麼頁面沒有頭緒，Canva 也下方也有預設的模板，這些模板內建了 Canva 設定好的提示詞（Prompt）。使用者可以根據自身的需求，直接對這些提示詞進行修改。

實測一：用Canva製作「今天要吃什麼」菜單

我們想設計一個隨機菜單推薦頁面，讓使用者在不知道吃什麼時，能透過隨機抽取的方式決定餐點。

我們在Canva Code對話框輸入以下指令（Prompt）：

請為「今天要吃什麼？」這個主題設計一個互動式頁面。
核心功能 ：
- 介面需提供五個輸入框，讓使用者自行填入餐點選項。
- 使用者輸入完畢後，可以點擊一個開始按鈕。
- 系統將在五個選項中以閃爍的方式進行隨機選擇，最終顯示一個隨機選出的餐點。

設計風格與元素：
- 整體風格需活潑。
- 採用明亮的配色方案，建議使用黃、橙、淺綠等色調。
- 介面可加入食物相關的趣味小圖示或背景紋理，但務必保持簡潔不雜亂，確保文字內容清晰易讀。

約莫3-5分鐘，Canva便會生成互動式頁面，若對視覺或互動效果不滿意，也可繼續在在對話框內調整需求。

我們有針對Canva產出的初版進行字體、顏色、互動方式的微調，以下為Canva最終產出的版本（來看看今天要吃什麼吧！）：

實測二：用Canva製作問答遊戲

我們以《數位時代》網站文章《白話科技｜沙電池是什麼？沙子如何儲存熱能？和鋰電池差在哪？運作原理一次看》為例，希望Canva能製訂互動式問答遊戲。

經過我們實測，由於Canva Code本身並不具備連網功能，因此需要事先設定好問題與答案給Canva。

以下為在Canva中輸入的指令：

製作一項問答遊戲，主題為「沙電池是什麼？」

遊戲包含5道選擇題，每題有4個選項，使用者點擊選項作答。

作答後，立即顯示答案正確或錯誤的視覺回饋（例如：打勾/打叉圖示、顏色變化）。

答對加分，回答完畢後自動跳到下一題。遊戲結束時，顯示最終得分。

介面需有進度條或題號顯示。

整體介面風格應簡潔、現代且具科技感，可以融入沙子、能量、環保等元素的概念。

以下為每道問題的題目與答案：
1.沙電池主要是利用哪一種能量儲存方式？
A. 電化學儲能
B. 熱能儲存（正確答案）
C. 機械儲能
D. 氣體壓縮儲能

2.沙電池在儲能過程中，主要透過什麼方式將電力轉換為熱能？
A. 太陽能加熱
B. 電阻加熱（正確答案）
C. 微波加熱
D. 化學反應

3.沙電池相較於鋰電池的主要優勢是什麼？
A. 安全性高、可長期儲存熱能（正確答案）
B. 體積更小、攜帶方便
C. 充電速度更快、能量損耗更低
D. 不佔空間、製作方法簡單

4.除了沙子，還有哪些材料可以作為沙電池的儲熱介質？
A. 碎石或混凝土（正確答案）
B. 木材
C. 鋰金屬
D. 塑膠

5.沙電池選用沙子作為儲熱介質的主要原因是什麼？
A. 沙子能產生電流
B. 沙子成本低廉且來源廣泛（正確答案）
C. 沙子可以溶解於水
D. 沙子容易導電

Canva需要大概3-5分鐘的時間產出頁面，如果對視覺或互動效果不滿意，可以繼續在對話框內調整需求。

以下為Canva最終產出的問答測試（快來測測看你對沙電池的認識吧！）：

怎麼發布Canva製作的網頁？

首先，需要將製作好的頁面導入成網頁形式，點擊頁面上方的「在設計中使用」後，選擇「網站」。

導入成功後，由Canva Code產生的頁面便會以網頁形式呈現，可以透過以下3種方式發布：

（一）發布成網站（Canva 網域）

在設計完成後，點擊右上角的「分享」或「發佈網站」。選擇「網站」類型，Canva 會自動將專案轉換為網頁形式。

（二） 分享連結

點擊「分享」後選擇「公開可檢視連結」，即可將設計直接分享給他人。受邀者可透過連結檢視作品。

（三） 取得 HTML 嵌入碼

點擊「分享」→「查看更多」→「嵌入」。Canva 會產生一段 HTML嵌入碼。

複製這段程式碼後，可以將其貼到 WordPress、個人網站、部落格或任何支援 HTML 嵌入的平台。

Canva Code 有哪些好處？適合什麼人？

從上述2項實測結果來看，即時是輸入繁體中文，Canva AI也能很好地理解使用者想要表達的需求，還能 在兼具美感的情況下設計出具有互動效果小遊戲。

從應用層面而言， Canva Code很適合不具備程式撰寫能力的設計師、行銷人員、社群小編、教育工作者，甚至是中小型企業 ，過去需要耗費大量時間或外包才能實現的動態網頁、趣味問答遊戲等，現在只需透過簡單的文字描述，便能由 AI 快速生成。

延伸閱讀：2025最新｜Canva不只能做簡報，免費、付費怎麼選？想商用必知這些事！
影片｜不寫程式碼也能開發產品！Vibe Coding是什麼？3款好用AI工具＋6步驟教學一次看

責任編輯：黃若彤

延伸閱讀

Gemini推Canvas新功能！不只幫忙寫作還可「Vibe Coding」：拋一句提示就能寫遊戲
Google推AI工具Stitch！一句話就可生成UI設計：VibeCoding新利器，如何顛覆設計流程？
「加入《數位時代》LINE好友，科技新聞不漏接」