程式小白用AI寫互動式網頁的組合技

2025 Jun 02 AI 應用

內容目錄

前幾週解鎖Canva AI 功能後，
建置了好幾個不同功能使用的互動式網頁工具，
整理了一下目前我要Vibe Coding 時會經歷的流程，
以及查詢+測試的各工具比較。

起手式：從記事本開始撰寫指令

先打開一個空白記事本，開始撰寫指令草稿，
這些指令就是你希望AI幫你生成網頁的需求描述，
例如：版面配置、互動功能、配色風格等。

使用Canva AI反覆測試與修改

將指令丟到Canva AI 進行測試與修改，
每次請AI協助修改的部分，
記得同步更新記事本的內容，保持指令版本一致，
若最終產出符合以下兩項條件，
這個作品就可以直接公開發布，無需額外處理：

1. 不需下載任何檔案
2. 不需內嵌至自己的網站

如果沒有 Canva AI 或付費版，
也可以考慮使用 Claude，
它目前提供相對較高的免費使用次數。

若需下載或內嵌，將指令貼至以下AI工具

如果你需要將產出的成果轉成檔案下載下來，
例如word、JPG、PNG，
可以複製記事本上最終版的指令，
丟到 Gemini 2.5 Pro 的 Canvas 功能或 Trickle AI 裡跑，
再逐步修改，
這兩個工具生成的網頁都能下載內容，

如果有嵌入網站的需求，
Gemini 2.5 Pro也可以直接複製程式碼，
非常適合已經有個人網站的創作者。
——
拜AI工具進步所賜，
就算不會寫程式也能創作自己想要用的互動式網頁程式，
真的是創作者跟講師的福音~

Canva AI 製作的抽籤小程式

陳韋安
投身教育訓練領域超過15年，
具備 企管顧問規劃師、企業內訓練部門主管、授課講師 全方位經歷，
專精 教學技巧、領導管理、職場溝通、團隊協作 主題，
擅長運用多元的教學技巧，創造互動有趣的學習過程，
幫助學員能由淺入深掌握關鍵、進行反思與活用，提高課後行為改變的可能性。