Vibe Coding 實戰工作坊｜3 小時打造你的 形象網站

課程定位

這是一堂專為「想快速上手 AI 建站」的實戰工作坊。不用寫程式、不用懂技術，只要會用 AI 工具，3 小時內就能做出一個真正能用的網站。

---

課程大綱（3 小時完整流程）

第一階段：工具介紹與環境設定（30 分鐘）

1. Vibe Coding 是什麼？為什麼你該學？

• AI 建站的趨勢與優勢
• Vibe Coding 與傳統寫程式的差異
• 實際案例展示：這些網站都是 AI 做的

2. 工具準備與帳號設定

• 必備工具：Gemini / Claude / Cursor（擇一）
• 基本設定
• 開發環境快速建置

3. AI 建站的核心邏輯

• 如何跟 AI 溝通（Prompt 技巧）
• AI 能做什麼、不能做什麼
• 常見錯誤與解決方式

---

第二階段：需求規劃與規格書產出（40 分鐘）

1. 你的網站要做什麼？（需求釐清）

• 確定網站類型：銷售頁 / 作品集 / 工具型網站 / 預約系統
• 定義核心功能：你的網站最重要的 3 個功能是什麼？
• 目標受眾分析：誰會用你的網站？

2. 用 AI 產生專業規格書

• 如何用 Gemini / ChatGPT / Claude 產生網站規格書
• 規格書必備元素：功能、頁面、流程、設計風格
• 實際示範：從想法到規格書（10 分鐘完成）

3. 規格書優化與檢查

• 檢查清單：功能是否完整、邏輯是否合理
• 常見漏洞：這些地方最容易出錯
• 如何讓 AI 理解你的需求（避免做出四不像）

---

第三階段：避雷點與注意事項（20 分鐘）

1. AI 建站常見的 5 大坑

• 功能太複雜，AI 做不出來
• 沒有明確指示，AI 亂做一通
• 忽略 RWD（手機版），結果手機看起來超醜
• 沒有測試，上線才發現一堆 Bug
• 過度依賴 AI，不懂基本邏輯

2. 如何避免踩雷？

• 分階段開發：先做核心功能，再加細節
• 每次修改都要測試：不要一次改太多
• 善用範例網站：參考別人怎麼做
• 保留原始碼：隨時可以回到上一版

3. 講師範例網站解析

• 範例網站功能說明
• 原始碼結構解析
• 如何修改成你自己的版本

---

第四階段：上機實戰（40 分鐘）

1. 實作目標：做出你的第一個 AI 網站

• 選擇你要做的網站類型（講師提供 3 種範本）
• 用 AI 產生網站原始碼
• 即時修改與優化

2. 講師即時指導

• 學員實作，講師巡場協助
• 常見問題即時解答
• 確保每個人都能做出成果

3. 網站上線（如果時間允許）

• 如何把網站放到網路上
• 免費 / 付費主機選擇
• 網域設定（選修）

---

第五階段：成果展示與課程總結（30 分鐘）

1. 學員成果分享（自願）

• 展示你做出來的網站
• 分享遇到的問題與解決方式

2. 課程重點回顧

• 今天學到的核心技巧
• 回家後可以繼續練習的方向

3. 課後資源說明

• 講師範例網站原始碼下載
• 課後討論群組（3 個月）
• 課程錄影回放說明
• 延伸學習資源推薦

---

課後討論時間

針對學員個別問題深度討論

• 我的網站可以加什麼功能？
• 遇到 Bug 怎麼辦？
• 如何優化網站效能？
• 其他技術問題

---

課程特色

1. 完全實戰導向 不講理論，直接做出成果。3 小時內，你會有一個真正能用的網站。

2. 提供講師範例網站原始碼 不用從零開始，直接修改範例就能快速上手。

3. 課後 3 個月討論群組 遇到問題隨時問，講師和同學都能幫你解答。

4. 完整課程錄影回放 沒跟上進度？想複習？隨時可以重看課程內容，確保每個步驟都學會。

5. 適合完全新手 不用會寫程式，只要會用電腦就能學。

---

適合對象

✅ 這堂課適合你，如果你⋯

• 腦中有想法，但不知道怎麼變成產品的設計師、攝影師、創業者、自由工作者

你知道自己想做什麼，但不知道從哪裡開始？這堂課會教你用 AI 把想法變成真正的網站。

• 沒有程式基礎，對 Vibe Coding 好奇的任何人

不用會寫程式，只要願意學習如何跟 AI 溝通，就能做出專業的網站。

• 想學 AI 溝通，也想知道怎麼靠工具賺錢

學會這套方法後，你可以用 AI 快速複製、快速產出，甚至建立自己的服務，把技能變現。

• 想在 3 小時內親手做出一個能上線的網站工具

不想只是聽理論，想要實際做出成果？這堂課就是為你設計的。

---

❌ 可能不適合你，如果你⋯

• 想上傳統的程式語言教學課程

這堂課不教你寫 JavaScript、Python，而是教你如何用 AI 工具快速產出。如果你想學傳統程式語言，這堂課可能不適合。

• 對 AI 輔助開發沒興趣

這堂課的核心就是「用 AI 做網站」，如果你對 AI 工具沒興趣，可能會覺得不適應。

• 沒有預算購買付費帳號

學習 AI 工具需要一些時間和金錢成本，課程中會使用 Gemini Pro 或其他 AI 工具（Claude / Cursor），需要有相關帳號才能順利操作。如果你完全不想投資工具，可能會影響學習效果。

---

學員可以帶走什麼？

• 一個真正能用的 AI 網站
• 完整的網站原始碼
• AI 建站的核心技巧
• 講師範例網站原始碼
• 3 個月課後討論群組
• 完整課程錄影回放（可重複觀看）

---

課程資訊

時間： 3 小時 人數： 建議 8-15 人（確保講師能照顧到每個學員） 費用： 3600元 / 人 地點： （實體 / 線上） 錄影回放： 課後提供完整錄影，可重複觀看

---

報名須知

學員需自備：

• 💻筆記型電腦（Mac / Windows 皆可）
• 穩定的網路連線
• Gemini / ChatGPT / Claude 帳號（規格書設計，免費版即可）
• Gemini / Claude / Cursor 帳號（除一頁式網站，建置網站建議用付費版）

課前準備：

• 想好你想做什麼類型的網站
• 準備好網站需要的素材（文字、圖片等）

課後資源（課後提供）：

• 講師範例網站原始碼
• 完整課程錄影回放
• 3 個月課後討論群組
• 延伸學習資源包

---

常見問題 Q&A

Q1：我完全不會寫程式，真的學得會嗎？ A：當然可以！這堂課就是專為「不會寫程式」的人設計的。只要你會用電腦、會打字，就能學會用 AI 做網站。

Q2：3 小時真的能做出網站嗎？ A：可以！我們會提供範例網站原始碼，你只需要修改成自己的內容就能快速完成。而且課後還有錄影可以重看，不用擔心跟不上。

Q3：課後遇到問題怎麼辦？ A：我們有 3 個月的課後討論群組，遇到問題隨時可以在群組發問。而且還有完整錄影可以重複觀看，確保你能學會。

Q4：錄影可以看多久？ A：錄影會在課後 24 小時內提供，可以重複觀看（建議至少在 3 個月討論群組期間內充分利用）。

Q5：我可以用課程做出來的網站接案嗎？ A：當然可以！學會這套方法後，你就能幫客戶快速做出網站，甚至可以開發自己的產品。

Q6：一定要用付費版嗎？免費版可以嗎？ A：建議使用 Claude Pro 或 Gemini Pro，因為免費版有使用次數限制，可能會影響實作進度。不過課程中也會教你如何搭配其他免費工具使用。