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

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

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

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

  1. 開啟 Canva 首頁。
  2. 選擇「Canva AI」選項。
  3. 點擊下方的「幫我撰寫程式碼」,即可開始輸入指令。
Canva Code入口.jpg
圖/ Canva

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

Canva Code的範本.jpg
圖/ Canva

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

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

我們在Canva Code對話框輸入以下指令(Prompt):

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

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

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

Canva Code產出.jpg
圖/ 針對Canva Code產出的效果,可以在對話框中持續輸入指令,已達成自己想要的效果。

我們有針對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製作的網頁?

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

將Code導入到網頁.jpg
圖/ 數位時代

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

(一)發布成網站(Canva 網域)

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

(二) 分享連結

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

(三) 取得 HTML 嵌入碼

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

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

Canva 網頁發布方法.jpg
Canva網頁可透過網址、公開連結或嵌入的方式發布。
圖/ 數位時代

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

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

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

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

責任編輯:黃若彤

往下滑看下一篇文章
影音體驗成行動網路新戰場!Opensignal 揭台灣大哥大奪「雙料冠軍」,連網穩定撐起高負載影音與 AI 協作
影音體驗成行動網路新戰場!Opensignal 揭台灣大哥大奪「雙料冠軍」,連網穩定撐起高負載影音與 AI 協作

現代人手機不離手,通勤時滑短影音、午休追串流影劇、下午開視訊會議,網路影音應用成為工作與生活的普遍情境。然而,一旦畫面卡頓、畫質不穩,或聲畫不同步,使用體驗立刻打折,甚至影響工作效率與專業判斷。

也因此,網路品質不再只是「快不快」的問題,更關乎能否在高使用量的日常情境下,維持穩定、連續的表現;對此,第三方評測也採用更貼近使用者情境的方式衡量網路體感。而 Opensignal 最新報告指出,台灣大哥大在影音體驗相關項目是業界唯一同時拿下「影音體驗」與「5G 影音體驗」雙項獎項的電信商,其中,關鍵的差異是什麼?

為何「影音體驗」是網路品質的關鍵指標?

愈來愈多消費者入手旗艦機,追求的不只是硬體規格,還有流暢的 AI 應用與多工協作。然而,無論是視訊即時翻譯或雲端會議,這些高階功能都有一個共同前提:網路必須穩定。一旦網路品質不佳導致畫質下降或音畫不同步,旗艦級的 AI 功能將形同虛設。

這也意味著,檢驗網路價值的標準已經改變。如今,不能只看單點測速的瞬間峰值,更重要的是高負載情境下的耐力表現。因此,比起單點測速,影音體驗會是更完整的測試標準,直接挑戰了網路在室內深處、移動途中或人潮聚集時的網路實力;而唯有在長時間串流下依然不卡頓、不降畫質,才稱得上是高品質的連線。

換言之,隱身在硬體背後的電信商,才是發揮旗艦機性能的關鍵;唯有透過最佳網路品質,才能讓手中的旗艦機既是規格領先、也是體驗領先。

唯一影音體驗雙料冠軍,Opensignal 權威認證的有感體驗

雖然相較於測速數據,影音體驗更貼近日常使用,但也更難量化。對此,國際權威認證 Opensignal 的「影音體驗分數」,依循 ITU 國際標準,透過真實用戶裝置在行動網路上進行影音串流的實測數據,觀察不同電信網路在實際使用情境下的表現。

簡單來說,評測聚焦三項核心指標:影片載入時間、播放期間的卡頓率,以及畫質(解析度)是否能穩定維持。使用者從開始播放到持續觀看的整體品質,分數以 0–100 呈現,分數愈高,代表在三項指標的表現愈佳。相較於單點測速,這類評測更能呈現長時間、高使用量下的網路品質。

人流情境不降速.jpg
圖/ 數位時代

而在今年最新公布的 Opensignal 評測中,台灣大哥大獲得「影音體驗」獎項唯一雙料冠軍。其中,「整體影音體驗」為全台獨得第一名,「5G 影音體驗」則與遠傳並列第一。

之所以能在影音體驗拔得頭籌,關鍵在於台灣大哥大目前是全台唯一整合 3.5GHz 頻段 60MHz 與 40MHz、形成 100MHz 總頻寬的電信業者,亦是現階段全台最大 5G 黃金頻寬配置。頻寬愈寬,代表單位時間內可傳輸的資料量愈大;在大量使用者同時進行影音串流、視訊互動的狀態下,更能維持穩定傳輸、減少壅塞發生機率。

台灣大獲權威認證,NRCA技術撐起穩定基礎

除了頻寬帶來的流量優勢,台灣大哥大也採用「NRCA 高低頻整合技術」,也就是透過高低頻協作,讓 3.5GHz 負責高速傳輸、700MHz 補強覆蓋與室內連線,改善室內深處與移動情境的訊號落差,提升連線連續性。

同時,為了讓住家、通勤動線、商圈與觀光熱點等高使用場域維持穩定表現,台灣大哥大已在全台超過213個住宅、觀光及商圈熱點完成 100MHz 布建,提升人流密集區的網路覆蓋率。

5G高速(小).jpg
圖/ dreamstime

值得注意的是,在今年的 Opensignal 評比中,台灣大哥大還拿下了「5G 語音體驗」與「網路可用率」兩項第 1 名,累計獲得 4 項獎項。這意味著不僅具備影音體驗優勢,在語音互動與連線率等關乎用戶日常應用的基礎指標,皆有亮眼成績。

尤其,隨著影音與即時互動成為新世代的工作常態,網路品質的重要性只會持續上升。無論是遠距協作所仰賴的視訊與畫面共享即時同步,內容創作對直播與即時上傳連續性的要求,或是 AI 視訊互動、即時翻譯與會議摘要等新應用,都高度依賴低延遲與穩定的資料傳輸。網路品質因此不再只是連線條件,更是支撐內容生產、協作效率與新應用落地的基礎能力,甚至直接牽動競爭力。

而台灣大哥大經 Opensignal 認證、於多項關鍵指標領先業界,不僅將成為 AI 時代的重要後盾,也讓使用者能更充分發揮高階手機的效能,把「快、穩、滑順」落實在每天的工作與生活中。

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
進擊的機器人
© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓