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

責任編輯:黃若彤

往下滑看下一篇文章
從「製造中心」到「亞洲NASDAQ」!詹文男揭示創新籌資平臺的附加價值與關鍵策略建議
從「製造中心」到「亞洲NASDAQ」!詹文男揭示創新籌資平臺的附加價值與關鍵策略建議

面對國際地緣政治的「去風險化」浪潮之下,長期觀察臺灣產業發展趨勢的數位轉型學院院長詹文男建議,臺灣不能再依賴單一的製造能力來換取戰略保障,而是將國家戰略從「製造中心」升級為「技術與系統整合」的樞紐。

在此背景下,金管會、證交所與櫃買中心共同成立的亞洲創新籌資平臺,詹文男觀察該平臺的價值,絕不僅是為資本市場引進活水,更能放大產業附加價值,成為驅動臺灣產業整合的關鍵引擎,打造下一波更多護國群山。

亞洲創新籌資平臺可望創造的三個附加價值

亞洲創新籌資平臺的核心宗旨,希望在臺灣本土打造「亞洲的NASDAQ」市場板塊,詹文男認為除了「籌資」的任務之外,其實平臺更可以扮演產業轉型的重要角色,進一步擴大其附加價值,其中可以體現於以下三個面向。

首先是先前美國商務部長提出「美臺晶片產能五五分」的主張,詹文男認為臺灣不能只靠單一「矽盾」作為我國戰略的屏障,也就是調整「重製造、輕解決方案」的現狀,讓製造轉向技術及解決方案的綜合發展,成為我國的新籌碼。隨著亞洲創新籌資平臺的建立,加上精進創新板上市及交易制度,開放當沖交易,提升創新板規模及流動性,都能讓更多具備利基技術的企業有機會進入資本市場。

第二個是亞洲創新籌資平臺能成為「軟硬整合」與「以大帶小」的創新引擎。詹文男指出,臺灣有數家市場領頭的電子硬體製造商代表,亞洲創新籌資平臺能進一步驅動這類科技業者與新創企業合作,例如以大帶小模式,當新創技術獲得大廠的認可,進而藉助大廠的商業人脈,打進全球大型客戶的供應鏈合作網絡,讓新創開發的技術方案與服務,有更多機會在全球落地。

詹文男認為第三個附加價值,有助於加速中小企業的AI轉型及數位化落地。他觀察臺灣多數中小企業仍處「數位化」階段,加上目前政府積極推動「百工百業用AI」,當越多加入創新板的企業推出類似AI as a Service的解決方案,能讓資源相對不足的中小企業,以較低門檻、不需高成本導入AI解決方案,又為新創企業帶來實際營收。「此模式促使新創和中小企業的Win-Win局面,同時驅動產業朝向AI轉型的助力,」詹文男補充道。

勿為上市而上市!登板企業應具備「全球思維」與「治理韌性」

不過對於渴望進入資本市場的創新經營團隊,詹文男院長也提醒,切忌把「募資作為單一手段,上市視作唯一目標」。詹文男提供企業創辦者幾個思考方向,第一是確立全球市場目標,臺灣可當成實地試驗(Field Try)和建立最佳實踐(Best Practice)的試煉場,但也建議新創在發展初期以全世界市場為目標,募資的規劃也可以從全球市場的角度出發,確保產品應用在國際市場獲得青睞。

第二是提升透明度與公司治理能力。上市後,投資人會高度關心公司治理及獲利能力,若要提升流動性,新創必須加強企業的透明度。因此詹文男院長強調,千萬不要「為上市而上市」,而是要有一個完整的規劃並依據目標按部就班,資本市場會給予相對的回饋。另外他也建議平臺針對上市前的企業,能提供「治理的輔導」,而非僅是「程序上的協助」,協助新創導入更健全管理制度。

建構亞洲NASDAQ的驅動引擎,給平臺的三大策略建議

因應亞洲創新籌資平臺成立後,迎來創新板交易制度改革、放寬外國企業上市櫃規範、帶動轉板彈性、鼓勵大眾參與等多項舉措。在此基礎之上,詹文男分享三大策略建議,期許平臺日後運作持續成長茁壯。

首先是強化非傳統資訊揭露,提升市場流動性。詹文男觀察創新板企業多處早期發展階段,傳統財報資訊較不足,導致降低投資人進場意願。為了強化流動性,他建議主管機關要求企業揭露更多反映成長性的實質指標,例如使用者數據、研發進度、商轉里程碑或專利成果。透過降低資訊不對稱,以活絡交易量。

第二個建議是建立研究報告體系,深化產業洞察。由於創新板企業的研究報告仍稀少,導致價格難以反映基本面,降低機構投資人的參與意願。詹文男認為平臺可透過獎勵機制、研究補助或資料庫資源的方式,邀請投信、券商或研究機構成立專責團隊,藉由定期提供具產業洞見的研究報告給投資人參考。

第三個方向是促進制度國際化,吸引跨國創新企業來臺上市。詹文男表示,「亞洲創新籌資平臺不僅是鼓勵臺灣企業在地上市,也希望吸引國際創新企業走進來。除了持續制度鬆綁開放,也要讓制度與流程國際化。」他舉例,推動跨境申報文件與流程的全面英語化、提供具預測的審查流程、以及稅務制度透明化,讓臺灣在全球資本競爭持續脫穎而出。

對於亞洲創新籌資平臺的最終期許,詹文男認為其價值可從「募資導向」轉向「品牌導向」。一方面讓全球瞭解臺灣除了半導體之外,還有領先的解決方案,進而建立起全球市場對我國產業的信任;另一方面,強化「說故事」能力,讓登板的企業協助全球打造AI及ESG「雙軸轉型」,進而建立起嶄新的國家形象。透過上述的努力,相信臺灣將能持續造山,確保下一波的護國群山如春筍般持續成長茁壯!

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

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