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步驟教學一次看

責任編輯:黃若彤

往下滑看下一篇文章
從地下室到演唱會都不卡!台灣大哥大如何解鎖全場景、有感升級的5G體驗?
從地下室到演唱會都不卡!台灣大哥大如何解鎖全場景、有感升級的5G體驗?

5G開台邁入第五年,戰場早已從「誰有5G」轉向「誰的5G好用」。夜市、演唱會、地鐵、商圈——這些人潮洶湧、訊號最容易卡頓的地方,才是檢驗網路品質的真實考場。要打造真正有感的5G體驗,靠的不是技術名詞,關鍵在於能否把網路資源變成看得見、用得到的流暢速度。

台灣大哥大擁有最大5G黃金頻寬,以及高覆蓋率的NRCA載波聚合領先技術,為網路傳輸佈局暢行無阻的地圖,打通每一個收訊死角,再加上OpenSignal權威認證背書,不僅是技術成績站得住腳,更讓用戶日常生活使用有感提升。

全台獨家最大頻寬100MHz,讓5G跑得快又穩

要解析5G效能優劣,關鍵在於「頻寬」配置。頻寬就像道路的寬度,直接決定數據傳輸的承載容量。頻寬越寬,越能支撐大量用戶同時連線,確保下載、串流、直播等應用維持順暢體驗,避免因流量壅塞導致服務中斷。簡言之,頻寬就是撐起網路用戶體感的關鍵。

台灣大哥大目前在全球主流5G黃金頻段3.5GHz上,獨家取得全台最大100MHz頻寬資源,達到頻譜配置的頂規水準。實測結果顯示,在理想條件下,此頻寬配置可擁有高達2Gbps下載速率。

1216001092_53M.jpg
圖/ shutterstock

同時,台灣大哥大也已在全台超過2,000處熱點完成5G黃金頻段基地台升級。因此即使遇到夜市商圈、大型演唱會、跨年活動等高密度人流聚集場景,當用戶數量暴增、頻寬需求激增時,完整的基礎建設布局仍能確保訊號不中斷、網速不卡頓。

打通收訊死角,體驗有感不只是口號

除了速度與流量,5G還有一項棘手難題——涵蓋死角與訊號穿透力。特別是在室內深處、地下室等場域,即使該處已有5G涵蓋,實際使用仍有可能無法完全避免的卡頓或不穩狀況。

原因在於5G高頻段雖速度快,但穿透力弱,容易因手機功率有限而發生不穩定的情況。對此,台灣大哥大結合700MHz低頻段的穩定性優勢,以互補式的高低頻協作架構,強化訊號深度與廣度。換言之,在戶外大場景跑得快,在室內密閉空間也能收得到。

NRCA自動切換最佳頻段,上網不怕訊號塞車

台灣大哥大的核心技術優勢,還有NRCA(New Radio Carrier Aggregation)載波聚合技術;NRCA讓行動裝置能同時使用多個頻段上網,如同多車道高速公路,讓資料流在不同頻段間靈活切換,兼顧高速率與深度覆蓋率。當某一頻段出現壅塞,系統能自動將資料流量轉至其他頻段傳輸,以提升整體承載效率與傳輸穩定性。

自2021年率先佈建高低頻NRCA,目前已有超過六成基地台支援這項技術,有效壓縮延遲、提升連線穩定度、強化訊號覆蓋與穿透。此外,合併台灣之星後,台灣大哥大更將全球主流5G黃金頻段3.5GHz的60MHz與40MHz頻寬合併,打造業界最大100MHz,為全台唯一同時整合5G高高頻與高低頻NRCA的電信業者,在5G網路體驗與穩定度領先同業,達到頻譜配置的頂規水準。

隨著短影音、直播、雲端工作等即時傳輸需求爆炸成長,用戶對「穩定滑順」的網路依賴不斷提高。台灣大哥大領先的NRCA載波聚合技術,正好回應用戶需求,無論是在捷運上滑臉書,還是在人聲鼎沸的夜市直播吃美食,都能享受多場景流暢切換的優質5G體驗。

2334636029_63M (1).jpg
圖/ shutterstock

優質有感體驗,經國際權威OpenSignal認證

根據國際第三方認證機構OpenSignal於2025年6月公布的行動網路體驗報告,台灣大哥大在「可用率」、「5G影音體驗」與「整體影音體驗」三項用戶有感的指標上獲得第一名。所謂可用率,意指用戶隨時隨地都能連上網路,關鍵時刻訊號不缺席,不論身處室內或移動場景,都能穩定連線不中斷;同時,良好的影音體驗指標,則代表用戶在觀看影片、雲端會議或滑短影音時,能享有畫質流暢、連線穩定、不易中斷的完整體驗。OpenSignal向來以實測數據為依據,其認證結果可視為對 5G 體驗品質的權威背書。

今年第一季,OpenSignal也針對合併電信後的網路表現進行評比。自2023年底台灣大哥大與台灣之星完成合併後,其在涵蓋體驗的評分顯著提升,並在品質一致性指標上維持82~84%的穩定水準。相較其他合併案例,台灣大哥大是體驗提升幅度最大、整體穩定性維持最佳的合併業者,顯見其網路品質、營運韌性與整合效率。

5G技術是否能成為使用者真正信賴的基礎,關鍵在於能否在生活場景中「被感受到」。台灣大哥大以完整的頻寬資源、彈性技術架構與佈建策略,從速度到穩定、從戶外到室內,打造順暢5G體驗,可期待在這場長期5G競賽中,成為用戶最仰賴的行動網路選擇。

有關更多相關資訊,請查詢網站:https://www.taiwanmobile.com/content/event/nrca/index.html

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
電商終局戰
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓