| 規則 | 原因 |
|---|---|
每做完一個功能就跑一次 npm run build | build 不過立刻回報，不要累積問題 |
| build 不過不繼續往下做 | 一個 bug 沒解完，不開下一個主題 |
| 每次只修一個東西 | 兩個 bug 一起貼，AI 會混淆 |
4.10 專案結束回顧 SOP
每做完一個網站，執行以下 15 分鐘流程。這不是額外工作，是讓下一個網站更快完成的投資。
流程
① 你對 AI 說：
「請讀 PROJECT_NOTES.md，對照 SETUP_GUIDE.md，
提取這次專案跟之前專案的差異中，
有哪些值得寫進手冊但還沒寫進去的？」
② AI 回傳 3-5 條建議，每條格式：
- 教訓：[一句話]
- 建議寫入：§X.X
- 原因：[為什麼這是可複製的經驗]
③ 你逐條確認：
☐ 寫進去 ☐ 暫緩（等更多案例） ☐ 不寫（太特殊）
④ AI 把確認的條目寫進手冊對應章節
案例：從 ming-website 提取的教訓
| 原始經驗 | 寫進手冊哪裡 |
|---|---|
產品對比表在手機上不能用 <table>，要同時做桌面表格 + 手機卡片兩個版本（hidden md:block / md:hidden） | §5.3 首頁設計原則 |
按鈕顏色用 string 欄位讓客戶手打 HEX → 改成 select 下拉（8 色可選） | §6.4 設計原則 |
| 行銷頁出現「Home Assistant / Zigbee / Intel N100」，客戶會自己 Google 比價，覺得「不就是買零件」 | §4.6 技術名防洩漏，補真實案例 |
為什麼這個流程重要
第一個網站 → 手冊有 100% 的「做了什麼」 第二個網站 → 手冊有 100% 的「做了什麼」+ 80% 的「差在哪」 第五個網站 → 手冊開始出現「預測」：接到新案，AI 在你開工前就說「這個客戶需要產品對比表，見 §5.3；這個客戶是科技業，注意 §4.6 技術名洩漏」
記得好，才能越做越快。 PROJECT_NOTES.md 不是工作日誌，是教訓日誌：
❌ 不好的記錄：
「今天做了產品頁，完成」
✅ 好的記錄：
「產品頁完成。學到：對比表在手機上不能用 <table>，
要同時做兩個版本（桌面表格 + 手機卡片）。
之前以為 responsive 會自動處理，結果不會。
解法：hidden md:block / md:hidden 兩套並存」
[[#table-of-contents|← 回目錄]]
第 5 章：一頁一頁拆解
👤 你：決定架構、審美驗收 — 🤖 AI：產出 .astro 檔案、確保手機/桌面雙版正常
5.1 頁面總覽（13 頁）
| 路由 | 檔案 | 類型 | 說明 |
|---|---|---|---|
/ | index.astro | 動態 | 首頁 Hero + 3 卡片 + 最新 3 篇 |
/blog | blog/index.astro | 動態 | 部落格文章列表 |
/blog/[...slug] | blog/[...slug].astro | 動態 | 文章 detail |
/destinations | destinations.astro | 動態 | 目的地卡片列表 |
/destinations/[slug] | destinations/[slug].astro | 動態 | 目的地 detail |
/gallery | gallery.astro | 動態 | 攝影集 + Lightbox |
/about | about.astro | 動態 | 關於我（CMS collection） |
/contact | contact.astro | 靜態 | 聯絡表單（mailto） |
/admin-guide | admin-guide.astro | 靜態 | 後台使用說明 |
/404 | 404.astro | 靜態 | 404 頁面 |
/privacy | privacy.astro | 靜態 | 隱私權政策 |
/terms | terms.astro | 靜態 | 使用條款 |
/rss.xml | rss.xml.ts | 動態 | RSS Feed |
5.2 核心架構：Layout.astro
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
const siteUrl = 'https://你的網域';
const { title, description, image } = Astro.props;
---
<head>
<title>{title}</title>
<meta property="og:title" content={title} />
<meta property="og:image" content={`${siteUrl}${image}`} />
<link rel="alternate" type="application/rss+xml" href="/rss.xml" />
<script type="application/ld+json" set:html={...} />