Bolt.new AI - Vibe Coding編程課程

實體編程教學課程內容

「Bolt.new AI - Vibe Coding編程課程」大綱（三小時精華班） 這門課程專為初學者與產品團隊設計，利用Bolt.new的瀏覽器內AI開發環境，實踐Vibe Coding從自然語言提示直達全端應用原型。學員將在3小時內透過迭代對話，建構並部署如部落格或QR碼生成器。

課程簡介

課程聚焦Bolt.new的即時IDE與AI代理功能，教授用日常語言描述需求、生成前端後端程式碼，並透過Diff模式高效迭代。無需本地安裝，適合設計師、PM或技術教育者，預期成果為完整SEO部落格原型。總時長3小時（講解30%、實作70%），強調提示工程與除錯流程。

第一小時：Vibe Coding入門與Bolt.new導覽（60分鐘）

• Vibe Coding核心概念（15分鐘）：介紹對話式開發流程，先描述最終成果再迭代Prompt，比較Bolt.new與Replit/Lovable差異。​​

• Bolt.new平台操作（15分鐘）：瀏覽器直接啟動、探索Chat介面與即時預覽。示範免費版生成簡單網頁。​

• 實作一：基礎網站生成（30分鐘）：用提示「建立顧問首頁」產生原型，體驗AI自動補全HTML/CSS/JS。​

第二小時：全端開發與迭代優化（60分鐘）

• 後端整合實戰（20分鐘）：連接Supabase資料庫，建構部落格管理系統。啟用Diff模式僅修改變更部分。​

• 提示工程進階（20分鐘）：練習精準指令如「新增Admin Dashboard與響應式設計」，處理常見錯誤並要求AI除錯。​​

• 測試實作（20分鐘）：獨立開發QR碼生成器，驗證資料持久化與跨裝置顯示。​

第三小時：部署、客製與最佳實踐（60分鐘）

• 一鍵部署Netlify（15分鐘）：發布應用並獲取公開連結，討論開源版本自架優勢。​​

• 進階應用示範（20分鐘）：整合SEO優化、多頁面導航，分享Vibe Coding在MVP驗證的實戰案例。​

• 作品展示與Q&A（25分鐘）：學員分享成果並互相反饋。總結五項關鍵技能（清晰描述、迭代耐心、Diff優化、除錯思維、擁有原始碼），提供Bolt.new進階資源。