Canva Code × Google Sheets：實戰動態網頁

你是否玩過 Vibe Coding，但發現生成的網頁一旦「做完」就變成「孤兒」？
想要修改一個價格、換一張圖片，卻發現看不懂程式碼，根本改不動？
別讓你的創意變成一次性的內容！真正的 AI 網頁，要能陪你長久運營。 

這堂課將帶你掌握 Canva Code 結合 Vibe Coding 的開發模式。我們不只教你用 AI 生成網頁，更教你如何打造「可持續更新」的內容系統。 

你不需要成為工程師，只需扮演「產品經理」，指揮 AI 建立後台與資料庫。從此，更新網頁就像改Excel一樣簡單，即使課程結束，你依然擁有100%的內容掌控權，隨時隨地都能讓網頁內容保持最新狀態！

什麼是 Vibe Coding？

寫程式不再是寫 Code，而是透過自然語言與 AI 對話。

1. 你負責「描述想像」：告訴 AI 你要的風格、功能與互動方式。
2. AI 負責「實踐創造」：AI 替你處理那些繁瑣的語法與邏輯。

這堂課將教你運用提示詞工程 (Prompt Engineering) 黃金公式：角色設定 + 視覺風格 + 功能需求 + 限制條件，將腦中的畫面轉化為真實運作的網頁應用，生成高質感的設計師級介面。

課程亮點

拒絕「一次性」網頁！四大優勢，讓你的作品真正落地運營

市面上許多 AI 生成教學只求「當下好看」，但我們更在乎「後續好用」。Canva Code 結合了設計與資料串接，帶來前所未有的「可持續性」創作體驗：

1. 解決 Vibe Coding 最大痛點
   教你打造「動態資料庫」，將網頁內容與程式碼分離，解決了「做完不能改」的致命傷。
2. 直覺式 Vibe Coding 開發
   用白話文描述需求，AI 就能精準生成對應的程式碼，懂設計就能做網頁。
3. 超越靜態，動態資料串接
   透過 Canva Code 串接 Google Sheets 試算表，讓你的網頁「活」起來。
4. 即時預覽，極速迭代
   左邊寫指令，右邊馬上看效果。所見即所得，將試錯成本降到最低。

實戰專案：你將親手打造兩大「可更新」互動作品

專案一：自帶內容管理系統後台的「專業級數位名片 App」

1. 亮點：把「修改權」還給自己
   這不只是一張名片，更是一個 App！我們將實作隱藏的「老闆編輯模式」。
2. 實戰成果：
   未來換了職稱、想改自我介紹，不用重新生成程式碼。直接在網頁上點擊隱藏按鈕，就能像填表單一樣修改內容並儲存。這才是真正能陪你職涯成長的數位名片。

專案二：串接 Google Sheets 的「動態品牌官網」

1. 亮點：Google 試算表就是你的網站後台
   告別「為了改一個價格，搞壞整個網頁」的惡夢。我們將網站連動到你的 Google Sheets。
2. 實戰成果：
   當店裡商品要調價，或者遇到颱風天要發公告，你只需要打開 Google Sheets 修改。回到網頁一鍵刷新，內容瞬間同步更新！就算完全不懂程式的店員也能輕鬆維護網站。

誰適合這門課？

如果你符合以下任一身份，這門課程將是你跨入 AI 互動設計的最佳起點：

1. 被 AI 程式碼嚇到的初學者：想玩 Vibe Coding，但怕生成出來的東西之後不會改、壞了沒人修。
2. 行銷企劃人員：需要常態性更新活動資訊，不想每次都還要拜託工程師或重新製作頁面。
3. 小型創業者/店家：需要一個能隨時用手機更新菜單、發布公告的低成本官網。 
4. 設計師與創作者：想讓平面設計「動」起來，並提供客戶「容易維護」的網頁作品。

課程內容

（一）Vibe Coding 思維啟動

1. 從 Coding 到 Vibe Coding：觀念翻轉，建立 AI 協作心態。
2. 提示詞工程 (Prompt Engineering) 黃金公式：學會精準指令，讓 AI 一次就懂你要什麼

（二）專案一：專業級數位名片 App 

1. AI 視覺引導：運用指令生成高品質介面。
2. 自製後台系統 (核心教學)：教你如何讓 AI 寫出「前端編輯功能」，實現「不碰程式碼也能改內容」的內容管理系統體驗。

（三）專案二：動態數據串接品牌官網

• 品牌視覺與動態首頁：製作吸睛的輪播牆與視覺風格。
• 雲端連動與自動更新 (核心教學)：建立雲端菜單，讓網站直接讀取 Google Sheets 資料。

（四）部署與發布：讓全世界看到你的作品

1. 完全免費的網頁託管：一鍵發布到 Canva 提供的免費網域，立即上線。
2. RWD 響應式完美適配：確保手機、電腦瀏覽都完美。
3. 進階部署 (Advanced)：原始碼匯出與外部平台 (Netlify/GitHub) 部署教學。

講師介紹

講師：黃信溢（茶米老師）

● 跨域技術整合專家： 長期深耕 AI 人工智慧、程式設計、雲端開發與多媒體影音 四大領域，擅長將複雜的「硬技術」轉化為直覺的「軟應用」，是少數能同時駕馭設計與程式的兩棲專家。 

● 資深企業顧問與圖書作者： 具備豐富的專案實戰底蘊，曾任多家知名企業與教育機構之講師顧問，並出版多本專業電腦圖書，擁有深厚的知識轉譯能力。

● 實務導向的教學風格： 拒絕枯燥理論，擅長以「實務案例」直球對決工作痛點。引導學員循序漸進，從零建立完整的知識架構與解決問題的能力。

● 數位轉型的最佳引路人： 致力於降低科技學習門檻，協助學員在快速變動的 AI 浪潮中，快速掌握強化專業競爭力與創新思維的關鍵鑰匙。

上課方式

• 上課方式：課程使用 Zoom 軟體進行直播，專屬會議連結最晚將於課前1小時發送至您的信箱。
• 直播時間： 2026/01/30(五) 14:00~16:00 
• 影片上架時間：課程影片預計於直播結束後一週內上架，每堂課上架後都會通知學員。影片可於2027年03月31日 23:59 前重複回看，不用擔心線上首播時間撞期其他行程。

注意事項 

此課程同步錄製2026年01月30日舉行的【線上直播】內容，保留原始授課節奏與講師風格，購買前請先確認此類直播實錄呈現是否符合您的觀看需求。