:::info
本文件連結：https://hackmd.io/lyW5zLunSKSYkyLkuXkdWA
此為 2025 VibeCoding 公益體驗營課程資料，相關資源僅授權給該課程學員。
:::

## 第二週：運用 AI x SDD，上架自己的前端個人網站吧！

## 成就
* [本日 QA](https://discord.com/channels/801807326054055996/1428276857266110534/1438497957702799380)
* 小節作業 1073 份
* 主線任務 975 份
* 每日任務 700 人次打卡

## 商業型個人網站要素

### 1. 目標受眾：這個網站是給誰看的

* 範例：給想學會 Coding 的潛在學生

### 2. 目標行為（CTA）

你希望訪客做什麼？（填表單、加 Line、寄信、看作品集）

### 3. Landing Page 網站核心區塊
核心版塊：Hero 區、關於我、作品集、服務項目、聯絡方式。

### 4. RWD(Responseive Web Design)需符合手機版設計

* PC：1440px、1920px
* 平版：768px
* 手機：414px

### 5. SEO

• title / meta description
• 語意化標籤
• h1 只用一次，關鍵字清楚

### 6. 本週加碼
* [180 分鐘加碼上線一條龍影片](https://courses.hexschool.com/courses/d9be0311111/lectures/63430726)

## 團戰任務，突破 2,500 份的話...？

* 600份 1100份
* Git 300 份
* 2026Q1，加碼一堂直播課90分鐘：GitHub Copilot VIbe 自己的網站

## 中場休息

## 規格驅動開發 Spec-Driven Development (SDD)

* [簡報連結](https://gamma.app/docs/SDD--jj6hl96c56lwwlv)
* [第二週主線任務](https://rpg.hexschool.com/#/training/12062817613394040615/board/content/12062817613394040616_12062817613394040632?tid=12062817613394040686)

---

## 🔧 校長 SDD 個人網站流程

### Phase 1：先建立環境，將環境規格訂定好

性質：一次性產出的完整架構規格
內容：
- 技術限制（只用 HTML/CSS，禁止 JS）
- 網站結構（5 個 Section + 插槽系統）
- 樣式方向（顏色、排版、RWD）
- SEO 與無障礙規範

產出：完整的 index.html 骨架

**訂定好「全站規格書」。**

---

### Phase 2：區塊規格 + 依照區塊逐步更新

---

## 📊 流程圖解

寫規格              產出程式碼           檢查對應
   ↓                    ↓                  ↓
Phase 1 Spec  →  完整骨架 HTML  →  符合 Phase 1 規範
   ↓                    ↓                  ↓
Phase 2 Spec  →  更新單一區塊   →  符合 Section 規範
   ↓                    ↓                  ↓
（可重複）        （可重複）          （可追溯）

---

**「會用 AI」不稀奇，「會管理 AI 產出的品質」才重要。**

SDD 教你的不是「怎麼叫 AI 寫程式」，
而是「怎麼確保 AI 寫出來的程式符合你的需求」。

## 下週還有加碼！

* 抽書時間~ 週六日也可打卡分享自己的生活、學習進度，當天打卡才算，最晚期限是隔天中午 12 點，期間限一本
* 與後端伺服器有關，敬請期待~