打造高質感前端：
用設計 Skill 擺脫「AI 公版廉價感」
認識現代前端框架（Next.js + Tailwind CSS）與元件化思維，親手建立品牌設計技能手冊，完成《今天學AI》教學專欄與工作坊報名介面。
用「餐廳外場」秒懂前端網頁的三大要素
使用者打開瀏覽器看《今天學AI》網站時，所有看得到、點得到的畫面都稱為「前端（Frontend / Client）」：
決定網頁「有哪些內容」
就像餐廳的隔間與菜單上的文字：哪裡放標題、哪裡放文章段落、哪裡放報名表單的輸入框。
決定網頁「長得美不美」
就像餐廳的燈光、壁紙與桌椅配色：控制深墨藍背景、思源宋體標題、卡片邊框與手機版自動排版（RWD）。
決定網頁「怎麼跟人互動」
當學員點擊「AI Agent」分類按鈕時立刻篩選文章，或點擊「送出報名」時檢查 Email 有沒有填寫。
為什麼要從單檔 index.html 升級到 Next.js？
單檔 HTML ＝ 一人小攤車
- 適合做一頁式的倒數計時器、課堂小遊戲或投影片
- 當網站有好幾頁（首頁、文章頁、教師後台 `/admin`）時，單一檔案會膨脹到好幾千行，連 AI 修改都容易改A壞B
- 沒有內建後端伺服器，無法安全地讀寫報名資料庫
Next.js ＝ 現代化中央廚房餐廳
- 元件化（Components）：把導覽列、文章卡片、報名表單拆成獨立積木，好管又好改
- 自帶後端廚房（API Routes）：同一個專案裡就能寫前端畫面跟後端 API，不用分開架兩台伺服器
- Vercel 親生兒子：階段六推上 Vercel 時，零設定直接完美部署！
像樂高積木一樣拆解《今天學AI》首頁
當你學會用「元件名稱」跟 Antigravity 溝通，AI 修改畫面的精準度會提升 10 倍：
品牌導覽列與英雄區
展示《今天學AI》Logo、教師定位介紹，以及下一場工作坊的即時倒數計時橫幅。
AI 教學文章專欄區
上方有分類篩選按鈕（全部／提示詞工程／AI Agent／教學應用），下方為結構化文章卡片。
近期工作坊活動亮點
列出近期開設的兩場實戰活動時間、適合對象與課綱大綱。
線上報名表單積木
收集學員姓名、Email、報名場次、背景職稱與課前提問的互動表單。
建立專屬設計 Skill：
徹底擺脫「AI 公版廉價感」
把字體大小、行高、留白間距與卡片邊框規範寫成一本 SKILL.md 專業手冊，讓 AI 每次寫前端都像資深設計師出手。
為什麼別人用 AI 做的網站，一看就知道是 AI 做的？
不給設計規範時，AI 最愛做的事：
- 濫用紫藍霓虹漸層：不管什麼主題都配紫色漸層按鈕
- 滿地浮誇圓角與厚重陰影：每個框都加 rounded-2xl shadow-xl
- 濫用 Emoji 當圖示：每個標題前面都塞火箭 🚀、燈泡 💡、火苗 🔥
- 字級過小、行距擁擠：內文常只有 14px，長輩或投影根本看不清楚
用設計 Skill 強制執行的美學標準：
- 沉穩雙色系統：墨藍（#172e46）主導結構、青綠（#216d73）點綴重點
- 人文書卷字體：標題用思源宋體（Noto Serif TC），內文用思源黑體
- 細線方角建築感：1px 實線分隔（#dbe2e8），零陰影、方正俐落
- 不使用 Emoji 充當圖示：改用編號標籤（01 / 02）或極簡幾何線條
一本標準的 SKILL.md 長什麼樣子？
專案專屬技能放在 .agents/skills/<技能名稱>/SKILL.md，由「頂部觸發卡片（Frontmatter）」與「SOP 內文」組成：
實作任務一：請 Antigravity 建立專案專屬 brand-ui 技能
不用自己手建資料夾！直接複製下方 Prompt，請 AI 幫我們把設計技能手冊建好：
包含標準 YAML frontmatter（name: brand-ui），並在內文定義《今天學AI》的 UI 規範：1. 墨藍 #172e46 與青綠 #216d73 色票系統；2. 標題使用 Noto Serif TC、內文使用 Noto Sans TC（行高 1.8）；3. 所有卡片、按鈕與表單輸入框一律採用方角與 1px 細線邊框，不使用陰影與 emoji 圖示。」
動手打造《今天學AI》：
Next.js 現代化前端實戰
啟動本地開發伺服器 http://localhost:3000，一步步拼出「AI 文章專欄」與「工作坊報名表單」。
實作任務二：初始化 Next.js 專案並啟動本地預覽
1. 將階段一做的單檔 index.html 移到 archive/index-prototype.html 保存。
2. 在目前目錄初始化 Next.js（App Router + Tailwind CSS）專案結構，保留專案鐵三角與 .agents/ 資料夾。
3. 安裝套件後啟動 npm run dev 開發伺服器，並告訴我預覽網址。」
別被多出來的檔案嚇到！新手只需認識這 3 個資料夾
打開瀏覽器輸入 localhost:3000
- 當 npm run dev 啟動後，在瀏覽器打開 http://localhost:3000
- 熱更新（Hot Reload）魔法：只要 AI 儲存了 src/ 裡面的程式碼，瀏覽器畫面不用按重新整理，會在 0.5 秒內自動變身！
實作任務三：套用 brand-ui 技能，打造首頁與教學文章專欄
1. Navbar 導覽列：左側為網站名稱，右側為『教學專欄』『近期工作坊』『立即報名』『教師後台』連結。
2. Hero 英雄區：深墨藍底色、教學理念主標題、下一場工作坊即時倒數計時器。
3. ArticleSection 教學文章專欄：支援點擊分類按鈕（全部／AI Agent 實戰／提示詞工程／課程設計）即時過濾，內建 6 篇精選 AI 教學文章卡片，點擊可展開閱讀全文。」
實作任務四：打造近期工作坊亮點與線上報名表單 UI
1. 左欄（活動亮點）：列出場次 A（AI Agent 工作流入門）與場次 B（全端網站實戰班）的日期、課綱與名額。
2. 右欄（線上報名表單）：包含姓名、Email、報名場次下拉選單、身分職稱、課前提問文字框，以及『確認送出報名』方角按鈕。」
覺得哪裡不夠好看？學會用這 3 種方式指揮 AI 微調
直接截圖貼進對話框
看到某個區塊太擠或對齊歪掉，直接用系統截圖貼進 Antigravity：「請看截圖紅框處，把這兩張卡片的上下間距拉大一點。」
用 @元件檔名 局部施工
只想改報名表單時，輸入 @WorkshopRegistration.tsx，AI 就絕對不會去動到上面的文章專欄。
把瀏覽器視窗拉窄試試看
學員常在手機上報名！把視窗拉窄，若字太擠就對 AI 說：「請確保在手機螢幕寬度下，左右兩欄自動改為上下垂直排列。」
現在試填一筆報名資料，然後按下 F5 重新整理網頁！
為什麼重新整理後，剛填的報名紀錄就消失了？
- 因為目前我們只有做出「餐廳外場（前端畫面）」
- 學員填好的點菜單（報名資料）只暫時拿在外場服務生手裡（瀏覽器記憶體 State）
- 一旦重新整理網頁或關掉分頁，服務生手上的單子就飛走了，老師在自己的電腦上也完全看不到誰報了名！
要讓報名真正生效，我們需要「後端廚房與冰箱」
- API 傳菜口：接收前端送來的報名資料並進行安全檢查
- Database 資料庫冰箱：把每一筆報名永久寫入硬碟或雲端資料庫
- 這正是我們在階段四要解鎖的核心能力！
階段三總結與下一階段預告
升級 Next.js 元件化
理解 HTML/CSS/JS 外場分工，啟動 localhost:3000 即時熱更新預覽。
親手打造 brand-ui
建立第一本專案專屬 SKILL.md，讓網站徹底擺脫 AI 公版廉價感。
文章專欄與報名表單就緒
完成可篩選的 AI 教學文章區與工作坊報名表單 UI。別忘了說聲「收工」更新進度！
階段四：後端 API 與資料庫 ── 給《今天學AI》裝上大腦與報名記憶庫
下一階段我們將進入餐廳的「廚房與冷凍庫」，搞懂什麼是 GET / POST API，並讓 Antigravity 幫我們建立資料庫，把每一位學員的報名資料真實、永久地記錄下來！