一、AI 能做網站了，但為什麼新手還是做不出「想要的」？
AI 工具越來越強大，現在只要輸入一句話：「幫我做一個網站」，GPT 或其他 AI 工具就能直接給你 HTML、CSS、JavaScript 程式碼。但現實是，大多數第一次嘗試 AI 做網站的新手，經常會遇到這些挫折：
- 無法調整單一功能
- 修改半天仍然一堆 BUG
- 最後網站長得完全不是自己想像的樣子
這時，你可能會在心裡想：「為什麼我總是做不出我想要的網站？」其實原因常常不是 AI 不夠強，而是你可能踩中了這幾個常見陷阱：
1. 不知道從哪開始，只能憑感覺問 AI
你想做網站，但連需要哪些頁面、什麼功能、互動方式……都還沒想清楚。就會導致 AI 給你的結果每次都不太一樣。
2. 來回調整，結果 BUG 越改越多
每一次的 prompt 都像重新開案，AI 會依照你的描述產出邏輯不同的新程式碼，導致版本越改越混亂。結果就是，加了一個功能，其他功能壞掉。
這些問題看似不同，但本質其實是同一件事，還沒建立「規格先行」的開發習慣。要讓 AI 替你生成一個能使用、好維護、不容易壞的網站，你需要的不只是 prompt，而是規格。
這也是為什麼越來越多開發者開始使用 SDD（Specification-Driven Development，規格驅動開發）一個對新手而言超關鍵的 AI 時代開發方法。
二、SDD（規格驅動開發）是什麼？為什麼特別適合新手？
SDD 的核心思想其實很簡單：
先把網站規格寫清楚，再請 AI 依照規格生成程式碼。
這些「規格」包含：
- 頁面要有哪些元素
- 每個元件要顯示什麼資訊
- 使用者點擊後會有什麼互動
- 要遵循的 UI 格式或動態行為
✔ SDD 為什麼特別適合新手？
（1）不怕程式語法，因為你只需描述「你要什麼」
你在寫的是需求，不是程式。對零程式基礎的人更佳友善。
（2）AI 生成的程式碼更穩定
因為規格清楚，AI 的輸出就有一致方向。
（3）更容易除錯（Debug）
有規格才能比對哪裡不符合，把不符合的部分重新描述給 AI，就能精準修復。
SDD 讓你不再依賴指令，而是用一套邏輯來指揮 AI。
以一個例子來看差別：
❌ 模糊指令：
「幫我做一個卡片 UI，用來顯示角色資訊。」
✅ 清楚指令：
- 角色卡片（Character Card）
- 元素：頭像（80px）、角色名稱、描述文字、按鈕（查看更多）
- 行為：滑過時卡片陰影放大、按下按鈕跳出角色更多資訊
- 排版：三欄 RWD、手機版改為一欄
當 AI 接收到相對完整的規格時，生成的程式碼自然穩定許多，後面有提供更完善的規格範例，繼續看下去。
三、SDD 如何應用在 AI 開發流程
在 《 Vibe Coding 實踐指南｜打造你的第一個互動網站 》 直播課程中，我們會用最簡單的方式帶你實作完整的 SDD 流程。
課程中你會學到…
（1）如何把「我想做一個互動網站」轉成可用的規格文件。就算你沒有任何 coding 背景，也可以透過老師獨家開發的 GPTs 快速產出。
（2）如何用 AI x SDD 生成網站頁面、元件、互動功能等
（3）如何讓 AI 幫你 debug，修正程式產出你想要的網站
（4）如何部署雲端，讓全世界都能看到你的網站，帶走實際成果
2025/12/14 正式開課 ! 歡迎你一起加入 ✨
四、零基礎也能上手！簡單示範一段 SDD 規格
個人飲水量記錄 APP
## 專案目標
建立一個手機版網頁（或 Web App），讓個人用戶能快速記錄每日飲水量，並查看飲水統計。
## 使用者角色
一般上班族、學生
想提升健康、需要提醒喝水
喜歡簡單介面、不想設定太複雜
## 核心需求
能在幾秒內快速記錄喝了多少水
能看到自己今天喝多少、離目標還有多少
能自訂每日飲水目標
需要喝水提醒
有歷史紀錄／統計頁面
## 頁面與功能規格
1）首頁（今日飲水 Dashboard）
顯示：今日進度（目前喝水量 / 目標量）
顯示進度條（例如 1200 / 2000 ml）
按鈕：＋喝水（進入新增畫面）
今日飲水列表（時間＋ml）
2）新增飲水紀錄頁
選擇喝水量：
按鈕：200ml、300ml、500ml、自訂輸入 ml
按鈕：新增 → 儲存到今日紀錄
3）設定頁
設定每日目標（例如 2000 ml）
設定提醒功能：開啟／關閉提醒
提醒頻率：每 30 / 60 / 90 分鐘
4）統計頁
顯示過去 7 天飲水量
圖表類型：折線圖
顯示平均每日飲水量
## 互動邏輯
1. 新增飲水紀錄
按下「新增」
選擇量 → 立即寫入 localStorage 或 DB
更新今日總量
2. 今日進度計算
今日總量 = sum(today water_logs)
百分比 = 今日總量 / daily_goal
3. 喝水提醒（簡易實作）
使用 setInterval() 做倒數提醒
或使用 Notification API 推送通知
## 成功驗收標準
記錄一次飲水操作不超過 5 秒
今日進度更新沒有延遲
手機版 UI 清楚可用
能記錄至少 30 天歷史資料
能離線記錄（localStorage 儲存）
## 不在本次範圍
不做帳號登入
不做社群分享
不整合健康資料（如 Apple Health、Google Fit）
不做進階醫療計算五、誰適合學 SDD？
如果你符合以下幾點，其實你比自己想像中更適合學 SDD！
- 想用 AI 做 Side Project
- 沒有程式基礎但想做互動網站
- 想快速看到成果，而不是先學語法
- 想建立一套有邏輯、有流程的方法來使用 AI
六、SDD 讓 AI 開發不再混亂，而是可控、可複製、可預測
AI 已經能寫程式，但能否變成「你的開發夥伴」，全取決於你給它的規格是否清楚。SDD 給新手一套清楚、簡單、可複製的方法，而這正是你能靠 AI 打造真正可用的網站的關鍵。
如果你想從「不知道怎麼開始」到「真的做出一個能動的網站」，那這堂 Vibe Coding 實踐指南｜打造你的第一個互動網站 會非常適合你！歡迎你一起加入課程！