Lovable AI - Vibe Coding編程課程

實體編程教學課程內容

Lovable AI - Vibe Coding編程課程大綱（三小時精華班） 這門課程引導學員運用Lovable AI平台實踐Vibe Coding理念，從自然語言描述快速生成全端應用程式。適合零基礎設計師、產品經理或技術教育者，在3小時內完成個人作品原型並上線。​

課程簡介

課程以Lovable的對話式開發為核心，教授如何透過聊天生成前端、後端與資料庫整合的應用，強調視覺編輯、GitHub同步與一鍵部署。學員學習精準提示工程、迭代除錯與協作流程，預期成果為電商商店或個人部落格原型。總時長3小時（講解30%、實作70%），參考Lovable模板如Portfolio與Event Platform，無需程式基礎即可上手。

第一小時：Vibe Coding基礎與Lovable入門（60分鐘）

• Vibe Coding概念介紹（15分鐘）：解析自然語言轉程式碼的代理式開發，比較傳統編碼與AI對話模式。強調「氛圍式」提示如描述介面風格與功能。

• Lovable平台導覽（15分鐘）：註冊、探索Chat介面、模板庫（如Ecommerce Store、個人Portfolio）。示範上傳草圖生成UI代碼。​​

• 實作一：生成簡單網站（30分鐘）：用提示「建立個人作品集網站」產生原型，預覽並微調顏色、佈局。

第二小時：功能建構與視覺優化（60分鐘）

• 全端應用開發（20分鐘）：指導AI整合Supabase資料庫與Stripe付款，建構事件平台原型。切換視覺編輯模式自訂元素。

• 提示優化與迭代（20分鐘）：練習進階提示（如「新增側邊欄與登入功能」），使用內建助手除錯並同步GitHub。

• 測試實作（20分鐘）：獨立生成時尚部落格，驗證響應式設計與資料持久化。​​

第三小時：部署、安全與進階應用（60分鐘）

• 部署與自訂域名（15分鐘）：一鍵發布應用，設定自訂網域並執行安全掃描。討論團隊協作與版本控制。

• 進階整合探討（20分鐘）：示範Figma匯入、即時協作與後端服務連接。分享快速原型案例，如生活風格部落格。

• 作品展示與Q&A（25分鐘）：學員分享成果、互相反饋。總結Vibe Coding五要訣（清晰描述、單任務迭代、視覺優先、除錯耐心、擁有代碼），附Lovable學習資源。