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

責任編輯:黃若彤

往下滑看下一篇文章
從智慧助手到自主代理:博弘雲端如何帶領企業走上 AI 實踐之路
從智慧助手到自主代理:博弘雲端如何帶領企業走上 AI 實踐之路

「代理式 AI 」(Agentic AI)的創新服務正在重新塑造企業對AI的想像:成為內部實際運行的數位員工,提升關鍵工作流程的效率。代理式AI的技術應用清楚指向一個核心趨勢:2025 年是 AI 邁向「代理式 AI」的起點,讓 AI 擁有決策自主權的技術轉型關鍵,2026 年這股浪潮將持續擴大並邁向規模化部署。

面對這股 AI Agent 浪潮,企業如何加速落地成為關鍵,博弘雲端以雲端與數據整合實力,結合零售、金融等產業經驗,提出 AI 系統整合商定位,協助企業從規劃、導入到維運,降低試錯風險,成為企業佈局 AI 的關鍵夥伴。

避開 AI 轉型冤枉路,企業該如何走對第一步?

博弘雲端事業中心副總經理陳亭竹指出,AI 已經從過去被動回答問題、生成內容的智慧助手,正式進化為具備自主執行能力、可跨系統協作的數位員工,應用場景也從單一任務延伸至多代理協作(Multi-Agent)模式。

「儘管 AI 前景看好,但這條導入之路並非一帆風順。」博弘雲端技術維運中心副總經理暨技術長宋青雲綜合多份市場調查報告指出,到了 2028 年,高達 70% 的重複性工作將被 AI 取代,但同時也有約 40% 的生成式 AI 專案面臨失敗風險;關鍵原因在於,企業常常低估了導入 GenAI 的整體難度——挑戰不僅來自 AI 相關技術的快速更迭,更涉及流程變革與人員適應。

2-RD096270.jpg
博弘雲端事業中心副總經理陳亭竹指出,AI 已經從過去被動回答問題的智慧助手,正式進化為具備自主執行能力、可跨系統協作的數位員工。面對這樣的轉變,企業唯有採取「小步快跑、持續驗證」的方式,才能在控制風險的同時加速 AI 落地。
圖/ 數位時代

正因如此,企業在導入 AI 時,其實需要外部專業夥伴的協助,而博弘雲端不僅擁有導入 AI 應用所需的完整技術能力,涵蓋數據、雲端、應用開發、資安防禦與維運,可以一站式滿足企業需求,更能使企業在 AI 轉型過程中少走冤枉路。

宋青雲表示,許多企業在導入 AI 時,往往因過度期待、認知落差或流程改造不全,導致專案停留在測試階段,難以真正落地。這正是博弘雲端存在的關鍵價值——協助企業釐清方向,避免踏上產業內早已被證實「不可行」的方法或技術路徑,縮短從概念驗證到正式上線的過程,讓 AI 真正成為可被信賴、可持續運作的企業戰力。

轉換率提升 50% 的關鍵:HAPPY GO 的 AI 落地實戰路徑

博弘雲端這套導入方法論,並非紙上談兵,而是已在多個實際場域中驗證成效;鼎鼎聯合行銷的 HAPPY GO 會員平台的 AI 轉型歷程,正是其最具代表性的案例之一。陳亭竹說明,HAPPY GO 過去曾面臨AI 落地應用的考驗:會員資料散落在不同部門與系統中,無法整合成完整的會員輪廓,亦難以對會員進行精準貼標與分眾行銷。

為此,博弘雲端先協助 HAPPY GO 進行會員資料的邏輯化與規格化,完成建置數據中台後,再依業務情境評估適合的 AI 模型,並且減少人工貼標的時間,逐步發展精準行銷、零售 MLOps(Machine Learning Operations,模型開發與維運管理)平台等 AI 應用。在穩固的數據基礎下,AI 應用成效也開始一一浮現:首先是 AI 市場調查應用,讓資料彙整與分析效率提升約 80%;透過 AI 個性化推薦機制,廣告點擊轉換率提升 50%。

3-RD096215.jpg
左、右為博弘雲端事業中心副總經理陳亭竹及技術維運中心副總經理暨技術長宋青雲。宋青雲分享企業導入案例,許多企業往往因過度期待、認知落差或流程改造不全,導致專案停留在測試階段,難以真正落地。這正是博弘雲端存在的關鍵價值——協助企業釐清方向,避免踏上產業內早已被證實「不可行」的方法或技術路徑,縮短從概念驗證到正式上線的過程,讓 AI 真正成為可被信賴、可持續運作的企業戰力。
圖/ 數位時代

整合 Databricks 與雲端服務,打造彈性高效的數據平台

在協助鼎鼎聯合行銷與其他客戶的實務經驗中,博弘雲端發現,底層數據架構是真正影響 AI 落地速度的關鍵之一,因與 Databricks 合作協助企業打造更具彈性與擴充性的數據平台,作為 AI 長期發展的基礎。

Databricks 以分散式資料處理框架(Apache Spark)為核心,能同時整合結構化與非結構化資料,並支援分散式資料處理、機器學習與進階分析等多元工作負載,讓企業免於在多個平台間反覆搬移資料,省下大量重複開發與系統整合的時間,從而加速 AI 應用從概念驗證、使用者驗收測試(UAT),一路推進到正式上線(Production)的過程,還能確保資料治理策略的一致性,有助於降低資料外洩與合規風險;此對於金融等高度重視資安與法規遵循的產業而言,更顯關鍵。

陳亭竹認為,Databricks 是企業在擴展 AI 應用時「進可攻、退可守」的重要選項。企業可將數據收納在雲端平台,當需要啟動新型 AI 或 Agent 專案時,再切換至 Databricks 進行開發與部署,待服務趨於穩定後,再轉回雲端平台,不僅兼顧開發效率與成本控管,也讓數據平台真正成為 AI 持續放大價值的關鍵基礎。

企業強化 AI 資安防禦的三個維度

隨著 AI 與 Agent 應用逐步深入企業核心流程,資訊安全與治理的重要性也隨之同步提升。對此,宋青雲提出建立完整 AI 資安防禦體系的 3 個維度。第一是資料治理層,企業在導入 AI 應用初期,就應做好資料分級與建立資料治理政策(Policy),明確定義高風險與隱私資料的使用邊界,並規範 AI Agent「能看什麼、說什麼、做什麼」,防止 AI 因執行錯誤而造成的資安風險。

第二是權限管理層,當 AI Agent 角色升級為數位員工時,企業也須比照人員管理方式為其設定明確的職務角色與權限範圍,包括可存取的資料類型與可執行的操作行為,防止因權限過大,讓 AI 成為新的資安破口。

第三為技術應用層,除了導入多重身份驗證、DLP 防制資料外洩、定期修補應用程式漏洞等既有資安防禦措施外,還需導入專為生成式 AI 設計的防禦機制,對 AI 的輸入指令與輸出內容進行雙向管控,降低指令注入攻擊(Prompt Injection)或惡意內容傳遞的風險。

4-RD096303.jpg
博弘雲端技術維運中心副總經理暨技術長宋青雲進一步說明「AI 應用下的資安考驗」,透過完善治理政策與角色權限,並設立專為生成式 AI 設計的防禦機制,降低 AI 安全隱私外洩的風險。
圖/ 數位時代

此外,博弘雲端也透過 MSSP 資安維運託管服務,從底層的 WAF、防火牆與入侵偵測,到針對 AI 模型特有弱點的持續掃描,提供 7×24 不間斷且即時的監控與防護。不僅能在系統出現漏洞時主動識別並修補漏洞,更可以即時監控活動,快速辨識潛在威脅。不僅如此,也能因應法規對 AI 可解釋性與可稽核性的要求,保留完整操作與決策紀錄,協助企業因應法規審查。

「AI Agent 已成為企業未來發展的必然方向,」陳亭竹強調,面對這樣的轉變,企業唯有採取「小步快跑、持續驗證」的方式,才能在控制風險的同時,加速 AI 落地。在這波變革浪潮中,博弘雲端不只是提供雲端服務技術的領航家,更是企業推動 AI 轉型的策略戰友。透過深厚的雲端與數據技術實力、跨產業的AI導入實務經驗,以及完善的資安維運託管服務,博弘雲端將持續協助企業把數據轉化為行動力,在 AI Agent 時代助企業實踐永續穩健的 AI 落地應用。

>>掌握AI 應用的新契機,立即聯繫博弘雲端專業顧問

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

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