AI
ai
e
紫微斗數｜星曜命盤攻略－初階入門
NotebookLM 工作效率密技
AI
ai
e從零基礎到全端上線，善用 AI Vibe Coding 自動生成突破網頁開發瓶頸
菜鳥救星線上真人課程簡介
為什麼要學？
AI 網頁生成技術正以前所未有的速度改變開發圈，掌握 AI 工具已是現今產品開發與設計領域的必備能力。然而，許多想踏入網頁開發領域的學習者常面臨以下困擾：
- 🚫 想開發動態網頁，但非本科系出身，一看到複雜的程式碼與環境設定就退縮，遲遲無法突破瓶頸。
- 🚫 具備基本的視覺與 UI/UX 概念，卻缺乏前端切版與後端資料庫的實作能力，設計圖只能停留在靜態畫面。
- 🚫 傳統開發初期總是在處理 Bug 與語法錯誤，耗費過多時間，導致學習熱忱被消磨殆盡。
- 🚫 只會套用市面上的現成模板，無法客製化做出具備後端資料庫（如預約系統）的關聯式網站。
- 🚫 只會套用市面上的現成模板，無法客製化做出具備後端資料庫（如預約系統）的關聯式網站。
- 🚫想轉職或接案，卻缺乏一套從前端視覺到後端部署「完整上線」的真實作品集來證明實力。
這門課程將利用強大的 Lovable AI，帶你打破傳統程式語言的學習門檻。透過精準的指令碼（Prompt），我們將手把手教到會，帶你從零建構出一個具備真實預約功能的動態網站。
學習完後，你能獲得……
- 從無到有建置專屬「狗狗咖啡廳」全端動態網站作品，大幅提升求職或接案競爭力。
- 掌握 Lovable 的 AI 開發工作流，將網頁開發效率提升數倍，把時間留給創意與核心業務。
- 學會資料庫關聯設計與管理後台建置，順利突破純靜態網頁的限制。
- 擁有將專案部署至 Vercel 並使用 GitHub 進行代碼管理的業界實務經驗。
- 掌握核心技能，帶走一套能即學即用、靈活應對各種專案需求的 AI 網頁開發解決方案。
課程大綱
學習目標：運用 Lovable 與 AI 指令，快速生成具備專屬視覺風格與響應式排版的網站首頁。
- 單元1：認識 Lovable：免費與付費方案差異，以及利用 AI 生成網站的優秀作品拆解。
- 單元2：Lovable 起手式：撰寫高品質初始指令，定義「狗狗咖啡廳」視覺基調（暖色調、寵物友善風格）。
- 單元3：首頁元件迭代：快速生成響應式導覽列（Navbar）、柴犬成員、線上預約、職人餐點與聯絡我們。
- 單元4：調整畫面：利用 Lovable 的AI生成指令，修改或優化整體畫面。
- 單元5：互動微調：利用 Lovable 的「點擊編輯」功能，優化按鈕動畫與圖片間距。
作業
- 隨堂作業：註冊 Lovable 帳號，瀏覽 3 個平台上的優秀作品並記錄其視覺與互動特色。
- 隨堂作業：完成狗狗咖啡廳的首頁視覺，包含響應式導覽列與至少三張 AI 生成的圖片素材。
學習目標：透過 AI 建立關聯式資料庫與專屬管理後台，並實現前端網頁的資料動態渲染。
- 單元1：後端環境準備：演示 Lovable 如何自動初始化後端環境。
- 單元2：建立資料表 (Relational Schema)：設計並建立「預約資料表」與「柴柴相關資料表」。
- 單元3：建置管理後台：新增「管理者後台」介面與導覽列入口，直接管理預約資料。
- 單元4：動態渲染實作：從資料庫抓取狗狗清單並動態顯示在網頁畫面上。 隨堂作業：建立專屬的關聯式資料表，並成功於網頁前端渲染出資料庫中的狗狗名單。
學習目標：實作線上預約表單的資料寫入邏輯與狀態回饋，並掌握運用 AI 快速除錯的實戰技巧。
- 單元1：關聯式表單開發：實作「預約功能」，包含綁定 dogs 資料表動態驅動的下拉選單 (Select)。
- 單元2：處理寫入邏輯：演示提交預約後，資料如何正確存入 bookings 並關聯到正確的 dog_id。
- 單元3：狀態回饋設計：實作提交中（Loading）與預約成功後的通知 UI 畫面。
- 單元4：AI 除錯實戰：如何利用 AI 快速修正邏輯錯誤與 Bug。 隨堂作業：完成線上預約表單，並測試資料是否能順利寫入後台資料庫。
學習目標：學習 GitHub 版本控管與 Vercel 平台部署流程，將專案正式發布上線。
- 單元1：GitHub 從零開始：手把手申請 GitHub 帳號，並將 Lovable 專案連結同步，實現代碼版本控管。
- 單元2：正式上線：Vercel 完整部署流程操作。
- 單元3：總結與回顧：比較傳統程式開發與使用 Lovable 的開發速度及優勢差異。
作業
- 隨堂作業：將專案成功部署至 Vercel，繳交實際上線的狗狗咖啡廳專屬網址。
誰適合學
- 想體驗 Vibe Coding 的獨立開發者 / 非本科創辦人：想透過 AI 輔助快速打造出專屬的產品網頁原型服務，不需仰賴工程師也能自行驗證商業點子。
- 想轉職或接案的零基礎初學者：完全沒有寫過程式，渴望透過 AI 工具突破開發門檻，快速累積具備關聯式資料庫的全端作品集。
- 想升級技術的 UI/UX 設計師：擁有美感與設計圖，想將靜態畫面親手轉化為具備真實預約與寫入功能的動態網頁。
- 尋求高效產出的網頁工作者：想導入 AI 開發工作流，以倍速提升日常建站與處理接案需求的自由工作者。
課程優勢
亮點一：AI 賦能突破瓶頸
- 打破傳統語言的學習高牆，不會寫 Code 也能透過精準提示詞獨立開發全端網站。
亮點二：業界少見的動態資料實戰
- 不只教你做漂亮的靜態前端，更深入關聯式資料庫與預約系統串接，含金量極高。
亮點三：專案導向的實務產出
- 以「狗狗咖啡廳」為貫穿課程的完整情境，做中學，完課即擁有能直接面試的精美作品集。
亮點四：手把手除錯與上線教學
- 專門教授如何利用 AI 進行錯誤修正，並帶領學員走完 GitHub 與 Vercel 部署上線的最後一哩路。
講師介紹
鄭宥姍(瓦爾塔)
禾騫個人工作室總監
經歷
◆ 工作經驗
【台灣優莎諾】網頁設計師
【禾騫個人工作室】創辦人…
◆ 專案經驗
【啟耀印刷事業有限公司】
【MIZU水之美保養品網站】
【全球人壽EDM】
【信益玻璃纖維企業社】...
Q&A
可以。完成購買並成功付款後，系統完成開通即可登入會員帳號，進入「我的課程」開始觀看影音課程。建議購買後確認登入帳號是否與購課帳號相同，以免找不到課程。
可以。影音課程影片於平台上架留存期間，學員皆可不限次數重複觀看。你可以依照自己的學習進度安排時間，針對不熟悉的章節反覆複習，讓學習更有彈性。
*依專案不同，觀看期限可能有所調整，菜鳥救星保留修改權益之權利。
*依專案不同，觀看期限可能有所調整，菜鳥救星保留修改權益之權利。
可以。只要使用可連接網路的手機、平板或電腦，登入會員帳號後即可觀看課程。若課程內容需要同步操作軟體，建議使用電腦觀看與練習，學習效果會更好。
可以。同學可以在課程留言板詢問老師問題，或是加入line帳號：@lccedu，小編會協助同學詢問老師！
可以。完成購買後，平台會依訂單資訊開立電子發票，並寄送至購買時填寫的 Email 信箱。若有統編、抬頭或發票資訊需求，建議在付款前確認資料是否填寫正確。
注意事項
- 收到款項後，若不克參加申請退費，請參閱退費規則。
- 本課程結合講師職場實務經驗傳授，習者請反覆演練運用，並配合上課作業實作。
- 課程執行單位保留調整課程內容、日程與講師之權利。
課程留言板
優惠價
NT$6,000