FB 建議貼文

選取貼文複製成功(包含文章連結)!

Canva AI 也可以 Vibe coding!不用懂程式碼,就能製作出精美的互動式網頁

Canva AI 也可以 Vibe coding!不用懂程式碼,就能製作出精美的互動式網頁

Canva 先前在年度「Canva Create」活動上發表全新升級的 Visual Suite 2.0,而今多項功能皆已正式開放,包含 Canva AI 中的 Canva Code 等,不用任何懂程式碼,只要使用自然語言下指令,就可以透過 Canva 製作出各種互動式內容。也就是說,Canva AI 現可作為 Vibe coding 的前端工具。

什麼是 Vibe coding?

Vibe Coding(氛圍編碼)是一種新興的程式設計方法,核心概念是透過自然語言描述你想要的功能或應用程式,然後讓 AI 來生成實際的程式碼。 程式設計師的角色從手動編寫程式碼轉變為引導、測試和完善 AI 生成的程式碼。

這個概念在 2025 年初開始受到關注,並被認為是由 OpenAI 的共同創辦人 Andrej Karpathy 所提出。 Karpathy 本人將其描述為一種「順著感覺走(embracing the vibes)」,讓開發者可以更專注於想法和邏輯,而不用過於擔心語法和細節。

Canva AI:透過自然語言即可生成圖片、文字、程式碼

Canva 全新 AI 工具「Canva AI」旨在讓使用者「從對話開始設計」,透過文字、語音輸入指令,便能生成圖片、文字、影片。而其中的 Canva Code 工具,則是可以讓使用者透過自然語言製作出互動式內容,像是遊戲、計算機、教材卡片等,主打不需要編碼技能,就能打造出數位互動體驗。

Canva AI 也可以 Vibe coding!不用懂程式碼,就能製作出精美的互動式網頁

而要使用 Canva Code 也相當簡單,只需要在主頁中找到 Canva AI,接著點擊「幫我撰寫程式碼」,就會看到一系列官方預設的範例可以參考。點選後提示詞還會自動出現在對話框中,將提示詞送出 Canva 便會開始撰寫程式碼,撰寫完成在頁面中就會直接跳出呈現結果;當然不使用官方預設好的模板,直接輸入自己想要生成的內容也是可以的。

製作互動式內容:單字閃卡、3D太空探索遊戲、數位賀卡都可以

而使用 Canva Code 可以製作出各種互動式內容,像是外語的單字閃卡,點擊卡片可以看到中文意思,很適合用來學習新的語言;或是有滑桿功能的價格計算器,點選服務並用拖拉方式調整時間,就會自動計算出金額。還有互動式的 3D 太空探索遊戲、具有動畫效果的數位賀卡等等都可以。

Canva AI 也可以 Vibe coding!不用懂程式碼,就能製作出精美的互動式網頁

Canva AI 也可以 Vibe coding!不用懂程式碼,就能製作出精美的互動式網頁

另外做完這些功能後,點選「在設計中使用」然後發布到網站,還可以分享給其他人玩,例如筆者這裡製作了一個「數學詞彙配對遊戲」,讀者們可進到連結中試用;也相當適合老師設計給學生玩,用來輔助學習。

Canva AI 也可以 Vibe coding!不用懂程式碼,就能製作出精美的互動式網頁

Canva AI 包含 Canva Code 皆為免費功能,相比起其它對話式的聊天機器人,個人認為 Canva Code 所撰寫出來的結果,在視覺呈現上都更為美觀。Canva AI 先前僅開放生成文字、圖片,不過近日開啟 Canva 時看到「程式碼」也已開放使用,不知是否是分批開放,讀者們可以再自行去試看看。

ycr
作者

PC home 雜誌、T 客邦產業編輯,也負責 T 客邦影新聞 YouTube 頻道短影音製作。關注 AI 相關應用,並有軟體教學報導。(大頭貼為 AI 生成)

使用 Facebook 留言
發表回應
謹慎發言,尊重彼此。按此展開留言規則