Canva Code × Google Sheets：實戰動態網頁
本課程包含以下內容：
課程簡介
你是否玩過 Vibe Coding，但發現生成的網頁一旦「做完」就變成「孤兒」？
想要修改一個價格、換一張圖片，卻發現看不懂程式碼，根本改不動？
別讓你的創意變成一次性的內容！真正的 AI 網頁，要能陪你長久運營。
這堂課將帶你掌握 Canva Code 結合 Vibe Coding 的開發模式。我們不只教你用 AI 生成網頁，更教你如何打造「可持續更新」的內容系統。
你不需要成為工程師，只需扮演「產品經理」，指揮 AI 建立後台與資料庫。從此，更新網頁就像改Excel一樣簡單，即使課程結束，你依然擁有100%的內容掌控權，隨時隨地都能讓網頁內容保持最新狀態！
什麼是 Vibe Coding？
寫程式不再是寫 Code，而是透過自然語言與 AI 對話。
- 你負責「描述想像」：告訴 AI 你要的風格、功能與互動方式。
- AI 負責「實踐創造」：AI 替你處理那些繁瑣的語法與邏輯。
這堂課將教你運用提示詞工程 (Prompt Engineering) 黃金公式：角色設定 + 視覺風格 + 功能需求 + 限制條件，將腦中的畫面轉化為真實運作的網頁應用，生成高質感的設計師級介面。
課程亮點
拒絕「一次性」網頁！四大優勢，讓你的作品真正落地運營
市面上許多 AI 生成教學只求「當下好看」，但我們更在乎「後續好用」。Canva Code 結合了設計與資料串接，帶來前所未有的「可持續性」創作體驗：
- 解決 Vibe Coding 最大痛點
教你打造「動態資料庫」，將網頁內容與程式碼分離，解決了「做完不能改」的致命傷。 - 直覺式 Vibe Coding 開發
用白話文描述需求，AI 就能精準生成對應的程式碼，懂設計就能做網頁。 - 超越靜態，動態資料串接
透過 Canva Code 串接 Google Sheets 試算表，讓你的網頁「活」起來。 - 即時預覽，極速迭代
左邊寫指令，右邊馬上看效果。所見即所得，將試錯成本降到最低。
實戰專案：你將親手打造兩大「可更新」互動作品
專案一：自帶內容管理系統後台的「專業級數位名片 App」
- 亮點：把「修改權」還給自己
這不只是一張名片，更是一個 App！我們將實作隱藏的「老闆編輯模式」。 - 實戰成果：
未來換了職稱、想改自我介紹，不用重新生成程式碼。直接在網頁上點擊隱藏按鈕，就能像填表單一樣修改內容並儲存。這才是真正能陪你職涯成長的數位名片。
專案二：串接 Google Sheets 的「動態品牌官網」
- 亮點：Google 試算表就是你的網站後台
告別「為了改一個價格，搞壞整個網頁」的惡夢。我們將網站連動到你的 Google Sheets。 - 實戰成果：
當店裡商品要調價，或者遇到颱風天要發公告，你只需要打開 Google Sheets 修改。回到網頁一鍵刷新，內容瞬間同步更新！就算完全不懂程式的店員也能輕鬆維護網站。
誰適合這門課？
如果你符合以下任一身份，這門課程將是你跨入 AI 互動設計的最佳起點：
- 被 AI 程式碼嚇到的初學者：想玩 Vibe Coding，但怕生成出來的東西之後不會改、壞了沒人修。
- 行銷企劃人員：需要常態性更新活動資訊，不想每次都還要拜託工程師或重新製作頁面。
- 小型創業者/店家：需要一個能隨時用手機更新菜單、發布公告的低成本官網。
- 設計師與創作者：想讓平面設計「動」起來，並提供客戶「容易維護」的網頁作品。
課程內容
（一）Vibe Coding 思維啟動
- 從 Coding 到 Vibe Coding：觀念翻轉，建立 AI 協作心態。
- 提示詞工程 (Prompt Engineering) 黃金公式：學會精準指令，讓 AI 一次就懂你要什麼
（二）專案一：專業級數位名片 App
- AI 視覺引導：運用指令生成高品質介面。
- 自製後台系統 (核心教學)：教你如何讓 AI 寫出「前端編輯功能」，實現「不碰程式碼也能改內容」的內容管理系統體驗。
（三）專案二：動態數據串接品牌官網
- 品牌視覺與動態首頁：製作吸睛的輪播牆與視覺風格。
- 雲端連動與自動更新 (核心教學)：建立雲端菜單，讓網站直接讀取 Google Sheets 資料。
（四）部署與發布：讓全世界看到你的作品
- 完全免費的網頁託管：一鍵發布到 Canva 提供的免費網域，立即上線。
- RWD 響應式完美適配：確保手機、電腦瀏覽都完美。
- 進階部署 (Advanced)：原始碼匯出與外部平台 (Netlify/GitHub) 部署教學。
講師介紹
講師：黃信溢（茶米老師）
● 跨域技術整合專家： 長期深耕 AI 人工智慧、程式設計、雲端開發與多媒體影音 四大領域，擅長將複雜的「硬技術」轉化為直覺的「軟應用」，是少數能同時駕馭設計與程式的兩棲專家。
● 資深企業顧問與圖書作者： 具備豐富的專案實戰底蘊，曾任多家知名企業與教育機構之講師顧問，並出版多本專業電腦圖書，擁有深厚的知識轉譯能力。
● 實務導向的教學風格： 拒絕枯燥理論，擅長以「實務案例」直球對決工作痛點。引導學員循序漸進，從零建立完整的知識架構與解決問題的能力。
● 數位轉型的最佳引路人： 致力於降低科技學習門檻，協助學員在快速變動的 AI 浪潮中，快速掌握強化專業競爭力與創新思維的關鍵鑰匙。
上課方式
- 上課方式：課程使用 Zoom 軟體進行直播，專屬會議連結最晚將於課前1小時發送至您的信箱。
- 直播時間： 2026/01/30(五) 14:00~16:00
- 影片上架時間：課程影片預計於直播結束後一週內上架，每堂課上架後都會通知學員。影片可於2026年07月31日 23:59 前重複回看，不用擔心線上首播時間撞期其他行程。
注意事項
此課程同步錄製2026年01月30日舉行的【線上直播】內容，保留原始授課節奏與講師風格，購買前請先確認此類直播實錄呈現是否符合您的觀看需求。
課程要點
自然語言開發：透過對話描述需求，由 AI 負責實踐程式語法與邏輯 。
動態資料串接：將 Google 試算表連結至網頁，更新內容就像改 Excel 一樣簡單。
雙專案實作：親手打造具備後台編輯功能的數位名片 App 與品牌官網 。
快速部署上線：學習如何將成品發布至免費網域或 Netlify 等外部平台 。
關於講師
黃信溢（茶米老師）
● 跨域技術整合專家：
長期深耕 AI 人工智慧、程式設計、雲端開發與多媒體影音 四大領域，擅長將複雜的「硬技術」轉化為直覺的「軟應用」，是少數能同時駕馭設計與程式的兩棲專家。
● 資深企業顧問與圖書作者：
具備豐富的專案實戰底蘊，曾任多家知名企業與教育機構之講師顧問，並出版多本專業電腦圖書，擁有深厚的知識轉譯能力。
● 實務導向的教學風格：
拒絕枯燥理論，擅長以「實務案例」直球對決工作痛點。引導學員循序漸進，從零建立完整的知識架構與解決問題的能力。
● 數位轉型的最佳引路人：
致力於降低科技學習門檻，協助學員在快速變動的 AI 浪潮中，快速掌握強化專業競爭力與創新思維的關鍵鑰匙。
常見問題