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

責任編輯:黃若彤

往下滑看下一篇文章
為懂生活的你而生:Panasonic旗艦型6枚刃電鬍刀,進化你對刮鬍的所有想像
為懂生活的你而生:Panasonic旗艦型6枚刃電鬍刀,進化你對刮鬍的所有想像

早晨的鬧鐘響起,行程滿檔的你沒有多餘時間應付不給力的電鬍刀。對於講究效率與細節的高階經理人來說,刮鬍子不只是例行公事,更是一種自我管理的儀式感。

男性電鬍刀走向高階市場,AI技術打造刮鬍細節感知力

隨著個人美容保養意識逐漸提升,男性專屬電器市場正快速朝向高端化發展。Panasonic觀察到,30至50歲的都會男性愈來愈重視刮鬍產品的舒適性、效率與科技感,特別是在工作節奏緊湊、生活壓力大的商務族群中,一款兼顧「省時、省力與精緻細節」的電鬍刀,不僅是外表管理的工具,更象徵著生活品質與效率思維。

面對這樣的市場轉變,「AI技術」正成為高階電鬍刀的新標準。Panasonic所代表的日製品質與刮鬍科技,一直在這個細分市場中保持穩定的技術優勢。長期以來致力於提升刀刃效率與耐用度,更善用AI數據化思維,將科技融入日常儀式,讓刮鬍這件小事,也能成為品味與智慧的體現。

截圖 2025-06-05 上午11.58.02.jpg
對細節的講究,從每日的儀式開始。Panasonic將日式精工品質與AI數據化思維完美結合,讓刮鬍不再只是例行公事,而是 體現個人品味與智慧的頂級享受。
圖/ 數位時代

這款全新的Panasonic日本製旗艦型6枚刃電鬍刀ES-L690U,即是AI應用實力的展現,專為講求質感與細節的高品味商務人士打造。其所具備的「LAMDASH AI智慧升級」系統,可自動偵測鬍鬚濃密度,並根據感測結果自動切換模式:鬍鬚濃密時BOOST模式(橘光);鬍鬚較少時SOFT模式(白光)。將動力數據可視化,能依照臉上不同區域的需求,自動調整刮鬍力道,這樣的調節幾乎無需使用者干預,就能在整個刮鬍過程中明顯感受到「每一刀都恰到好處」,避免多餘拉扯與肌膚負擔。

刮鬍完成後,更於液晶面板上直接產出個人化數據報告,除了動力分配外,亦可得知刮鬍所花的時間。

Panasonic
「LAMDASH AI智慧升級」系統,AI 智慧感應可自動偵測鬍鬚濃密度,並根據感測結果自動切換模式:鬍鬚濃密時BOOST模式(橘光);鬍鬚較少時SOFT模式(白光)。
圖/ 數位時代

智慧電鬍刀革命:6大關鍵升級,一次到位

除了LAMDASH AI在刮鬍科技上所展現的革新意義,Panasonic日本製旗艦型6枚刃電鬍刀ES-L690U更整合六大技術升級,從刀刃、馬達到整體設計,讓日常刮鬍這件事,從此變得更直覺、更聰明,也更貼近使用者的真實需求。

搭配「新.極薄深剃刀刃」,使剃淨效率提升約50%,密著5D浮動刀頭能緊密貼合各種臉部輪廓,就連下巴曲線、嘴角弧線等難處理的區域,也能順利帶過、不留殘鬚,輕鬆駕馭各種鬍鬚型態。而內部搭載的極速線性馬達,磁懸浮馬達可達每分鐘14,000轉,超高速驅動帶來的是強勁、但絲滑的刮鬍感受,特別是在刮除濃密、捲曲或臥倒型鬍鬚時,能一次到位、避免拉扯。即使電量將盡,也能穩定運行至電力耗盡前最後一刻。

Panasonic
搭載「新.極薄深剃刀刃」,能緊密征服下巴、嘴角等各種刁鑽角度,一刮即淨,不留殘鬚。
圖/ 數位時代

獨家日本製的6枚刃系統,傾斜排列的刀網,提升孔洞覆蓋範圍,模擬專業理容師的細緻手法,實現全面服貼、乾淨且俐落的整體效果。即使在刮鬍後無法立即洗臉的早晨,也不會感到不適。Panasonic日本製旗艦型6枚刃電鬍刀ES-L690U亦榮獲2024 GOOD DESIGN獎項,機身細節沿襲日系極簡風格,從握感到按鍵配置都恰到好處,兼具機能性與現代品味,即便是放置在洗手檯上,也如同一件精緻藝品般,增添質感氛圍。

Panasonic
日本製刀刃工藝,多重刀刃舒適刮鬍,深層有效率的刮除大量、頑強、臥倒的鬍鬚。
圖/ 數位時代

對於經常出差的商務人士來說,產品所提供的USB(Type-C)充電設計無疑是一大加分。相容於現有手機與筆電的充電規格,旅行中也能一線搞定所有裝置。返家後,只需放入全自動洗淨充電座,即可完成洗淨、除菌、乾燥與充電,一氣呵成、免手洗保養,日常維護也輕鬆省心。

Panasonic
只需放入全自動洗淨充電座,就能一鍵完成洗淨、除菌、乾燥到充電,讓日常維護輕鬆又省心。
圖/ 數位時代

Panasonic日本製旗艦型6枚刃電鬍刀ES-L690U所整合的每一項技術,最終目的都指向同一件事:讓平凡的刮鬍工事,成為值得期待、甚至享受的質感時刻。

科技為生活細節加值,從容迎接每一個重要場合

企業策略顧問David長年忙於各種會議與提案,但對外型的整潔度要求不容妥協。過去他總因早晨刮鬍耗時感到煩躁,自從使用Panasonic日本製Pro 6旗艦型電鬍刀ES-L690U後,才發現原來AI可以這麼貼心,「BOOST模式啟動的橘光像是提醒我:這裡是重點區域,該加強了。刮起來不但乾淨,還很溫和。」David分享。

Panasonic
從容自信的起點,源於對細節的絕不妥協。Panasonic旗艦型6枚刃電鬍刀,結合AI智慧與日本製極致工藝,為懂生活的你,打造每一天的完美開場。
圖/ 數位時代

這樣的場景,正是Panasonic所描繪的生活畫面——讓科技真正服務日常,讓刮鬍子不再是瑣事,而是一場品味的展演。在這個速度決定一切的時代,真正懂生活的人,不會在細節上妥協。Panasonic日本製旗艦型6枚刃電鬍刀ES-L690U不只追求刮鬍效率,更是「細節控」的祕密武器,用AI與極致工藝,為你的每一天打造從容自信的起點。

現在擁有全新旗艦型6枚刃電鬍刀(ES-L690U),即享好禮5選1登錄送,指定機種加碼贈送「真無線降噪藍芽耳機」,還有多項好禮精緻送給你!

【活動時間】: 2025/06/20 至 2025/08/31
【導購連結】:https://pse.im/7qddu4

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

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