先從純前端網頁設計開始，畫面看得到、錯誤比較好理解。
每次只改一小段，保留需求、diff、截圖、驗收命令和回復方式。
需要 ChatGPT Plus、Codex、Claude Code 或付費外掛時，任務會先提醒。
API key、會員資料、付款、發信、刪除和權限改動都保留人工確認。
30 天任務路線
每天完成一個看得見的小成果
這條路線先從靜態網頁開始，逐步接到 GitHub、部署、資料庫前置、發信設計、Agent 協作和作品集。
第 1 週Day 1-7：把 AI Coding 環境準備好
先知道 Codex / Claude Code 可以幫你做什麼，完成第一個純前端小頁面。
展開每日任務收合每日任務這週交作業：一個本機可打開的個人作品頁草稿與 GitHub repo
第 1 週
Day 1-7：把 AI Coding 環境準備好
先知道 Codex / Claude Code 可以幫你做什麼，完成第一個純前端小頁面。
- Day 1Dchatgpt / codex / claude-code
設定 ChatGPT Plus、Codex 桌面版與工作資料夾
示範：建立一個 `ai-coding-starter` 資料夾，放 README、設計參考、截圖資料夾和任務紀錄。
交作業：完成工具安裝檢查表，寫下你想做的第一個小作品，例如個人介紹頁、工具清單頁或作品卡片頁。
完成成果
完成 Codex 起手資料夾、第一個作品題目和工具登入狀態截圖。
付費 AI 工具提醒
建議使用 ChatGPT Plus / Codex；Claude Code 可先列為備用工具。
- Day 2Dchatgpt / claude / codex
把想做的網頁寫成白話規格
示範：把「我想做一個作品頁」改成目標讀者、內容區塊、色彩感、按鈕、手機版需求和驗收標準。
交作業：寫出一份 1 頁規格，包含頁面目標、三個區塊、要放的文字、不要出現的內容和完成判斷。
完成成果
完成第一份 AI Coding 任務規格。
付費 AI 工具提醒
可用免費聊天工具練習；若要直接交給 Codex，建議使用已開通的 Codex 環境。
- Day 3Dcodex / claude-code / chrome
建立純前端 HTML 第一版
示範：請 Codex 依規格產出 `index.html`、`styles.css`，先讓畫面能在瀏覽器打開。
交作業：完成一頁靜態網頁，至少有主標、三張卡片、一個 CTA 和手機版基本排版。
完成成果
本機可打開第一版 HTML/CSS。
付費 AI 工具提醒
Codex 或 Claude Code 可加速產檔；也可以先用 ChatGPT 產程式碼後手動貼檔。
- Day 4Dchrome / codex / claude-code
用 Chrome 檢查手機版與文字溢出
示範：用 Chrome DevTools 切到手機寬度，看按鈕、卡片、長標題是否跑版。
交作業：列出 3 個畫面問題，請 AI 幫你改 CSS，改完截圖前後版本。
完成成果
完成手機版基本檢查與一輪 CSS 修正。
付費 AI 工具提醒
Chrome 免費；若請 Codex 改檔，需可用 Codex 或 Claude Code。
- Day 5Cgithub / codex
認識 GitHub repo 與第一次 commit
示範：建立 GitHub repository，上傳 `index.html`、`styles.css`、README 和截圖。
交作業：完成第一次 commit，README 說明作品用途、如何打開、目前限制和下一步。
完成成果
完成 GitHub repo 與第一個 commit。
付費 AI 工具提醒
GitHub 基本功能可免費使用；使用 Codex 操作 git 前先確認 diff。
- Day 6Cgithub / vercel / netlify
部署成可分享的靜態頁
示範：用 GitHub Pages、Vercel 或 Netlify 部署純前端頁面，取得公開網址。
交作業：部署第一版，並用手機打開確認主畫面、CTA 和圖片都正常。
完成成果
取得可分享的靜態頁 URL。
付費 AI 工具提醒
GitHub Pages / Vercel / Netlify 基本部署可免費開始；自訂網域可等後面再處理。
- Day 7Dnotion / google-docs / chatgpt
整理第一週作品回顧
示範：用一張表記錄需求、AI 幫忙的地方、人工修改、部署網址和下一個要改的區塊。
交作業：整理第一週作品紀錄，寫出 3 個你已經學會的事和 3 個還卡住的事。
完成成果
完成第一週作品回顧卡。
付費 AI 工具提醒
可用 Notion、Google Docs 或本機 Markdown；不需要付費 AI 工具。
第 2 週Day 8-14：把小頁面變成可展示作品
練習元件拆分、互動狀態、表單假資料、圖片素材與基本動畫。
展開每日任務收合每日任務這週交作業：一個有互動狀態、假資料和作品說明的前端頁
第 2 週
Day 8-14：把小頁面變成可展示作品
練習元件拆分、互動狀態、表單假資料、圖片素材與基本動畫。
- Day 8Ccodex / claude-code
把頁面拆成可修改區塊
示範：把 hero、卡片區、FAQ、CTA 拆成清楚註解，方便後面請 AI 修改。
交作業：請 AI 幫你重構 HTML 結構，保留畫面效果，並寫下每個區塊用途。
完成成果
完成可維護的前端區塊結構。
付費 AI 工具提醒
建議使用 Codex / Claude Code 看檔案並改檔；改完要看 diff。
- Day 9Ccodex / claude-code / chrome
新增按鈕 hover、focus 與收納卡片
示範：做一張可展開卡片，平常只顯示標題，點開才看步驟。
交作業：新增 3 張可展開卡片，並確認鍵盤 focus 看得見。
完成成果
完成基本互動元件和可及性檢查。
付費 AI 工具提醒
可用 Codex / Claude Code 協助修改；Chrome 可免費檢查互動。
- Day 10Cchatgpt / codex / claude-code
加入假資料清單與篩選器
示範：用一組作品資料，做分類按鈕：全部、寫作、設計、自動化。
交作業：建立至少 8 筆假資料，讓頁面能依分類切換顯示。
完成成果
完成第一個資料驅動畫面。
付費 AI 工具提醒
可用免費工具完成；請 AI 產假資料時避免使用真實個資。
- Day 11Ccodex / chrome / resend
加入表單 UI 與送出前檢查
示範：做一個訂閱表單 UI，送出時先顯示假成功訊息，不接真實 Email。
交作業：完成表單欄位、錯誤提示、成功提示和不送出真資料的備註。
完成成果
完成安全的前端表單 prototype。
付費 AI 工具提醒
今天不串正式發信服務；Resend / Supabase 留到後面練。
- Day 12Cchatgpt-images / canva
用 GPT Image 或 Canva 做作品素材
示範：產生一張作品封面圖，再用 Canva 排成卡片縮圖。
交作業：為作品頁完成 3 張封面圖或圖卡，記錄 prompt、尺寸和授權注意事項。
完成成果
完成作品頁素材包。
付費 AI 工具提醒
GPT Image、Canva 進階功能可能需要付費；可先用免費額度或自製簡單圖卡。
- Day 13Bgsap / codex / chrome
加入 GSAP 或 CSS 微互動
示範：用 CSS transition 或 GSAP 做進場淡入，避免大面積動效拖慢頁面。
交作業：新增一個不干擾閱讀的微互動，並提供關閉動畫或降低動態的備案。
完成成果
完成一個可驗收的微互動。
付費 AI 工具提醒
GSAP 基本使用可免費開始；若用 Skill 輔助，先確認套件與授權。
- Day 14Cgithub / vercel / netlify / cloudflare
第二週部署與截圖驗收
示範：部署後用桌機和手機各截一張圖，列出這版改了什麼。
交作業：完成第二週部署，README 新增版本紀錄、截圖和已知問題。
完成成果
完成可展示的第二週作品版。
付費 AI 工具提醒
部署平台可先用免費方案；若使用自訂網域，先確認 Cloudflare 設定成本。
第 3 週Day 15-21：接到資料庫、會員與自動化前置
用低風險方式認識 Supabase、表單資料、Email 草稿和部署環境。
展開每日任務收合每日任務這週交作業：一個可描述資料流、權限和手動驗收的產品 prototype
第 3 週
Day 15-21：接到資料庫、會員與自動化前置
用低風險方式認識 Supabase、表單資料、Email 草稿和部署環境。
- Day 15Cnotion / google-slides / chatgpt
畫出資料流與使用者路線
示範：畫出訪客打開頁面、填表單、資料進資料庫、管理者收到通知的路線。
交作業：整理一張資料流圖，標出哪些步驟今天只做假資料。
完成成果
完成資料流與風險邊界圖。
付費 AI 工具提醒
可用白板、Notion 或 Google Slides；不需要先接真資料。
- Day 16Bsupabase / codex / claude-code
建立 Supabase 專案概念與資料表草稿
示範：設計 `subscribers` 或 `tasks` 資料表欄位，不先寫入 production。
交作業：完成一份資料表欄位草稿，包含欄位名稱、用途、是否敏感和誰可以讀。
完成成果
完成 Supabase schema 草稿。
付費 AI 工具提醒
Supabase 免費額度可先練；正式資料庫操作前請先備份並確認 RLS。
- Day 17Bsupabase / codex-security / codex
做前端表單到 Supabase 的測試規格
示範：先寫測試資料、成功訊息、錯誤訊息和回復方式，再決定要不要真的串接。
交作業：請 AI 幫你寫串接計劃，不直接執行，列出環境變數、RLS 和測試步驟。
完成成果
完成 Supabase 串接計劃與手動核准清單。
付費 AI 工具提醒
需要 Supabase 專案與安全設定；API key 不可貼到公開頁面或對話紀錄。
- Day 18Bresend / cloudflare / codex
設計自動回信草稿與人工確認點
示範：使用 Resend 前先寫 Email 模板、寄件條件、取消訂閱和測試收件人。
交作業：完成一封歡迎信草稿與發信流程圖，標明正式寄送前要人工確認。
完成成果
完成 Email 回信系統設計稿。
付費 AI 工具提醒
Resend 或其他發信服務可能需要驗證網域；正式寄送前先用測試收件人。
- Day 19Bsupabase / google / codex
規劃會員狀態與權限畫面
示範：畫出未登入、免費會員、已購買資源、管理員看到的不同狀態。
交作業：完成一張權限矩陣，不接真實付款，只說明畫面差異。
完成成果
完成會員權限矩陣。
付費 AI 工具提醒
Supabase Auth 可先讀文件；正式 OAuth、付款與權限改動保留人工核准。
- Day 20Bvercel / netlify / zeabur / cloudflare
部署到 Vercel、Netlify 或 Zeabur 的檢查表
示範：列出 build command、env vars、domain、preview URL、rollback 和 smoke test。
交作業：替你的作品完成一份部署檢查表，先不放真密鑰。
完成成果
完成部署檢查與 rollback 計劃。
付費 AI 工具提醒
部署平台可先用免費方案；自訂網域與額外資源可能收費。
- Day 21Bcodex-security / codex / github
第三週安全回顧
示範：請 Codex Security 檢查是否有 secret、公開資料、錯誤權限或危險操作。
交作業：完成安全回顧表，列出 5 個不能讓 AI 自動做的動作。
完成成果
完成第三週安全與權限檢查。
付費 AI 工具提醒
Codex Security 外掛可輔助掃描；正式修正前仍要人工看 diff。
第 4 週Day 22-30：把 AI Agent 協作整理成作品集
練習讓 Codex / Claude Code 分工、使用 Skills、整理驗收紀錄與作品頁。
展開每日任務收合每日任務這週交作業：一份 AI Coding 作品頁、開發紀錄和下一輪功能 backlog
第 4 週
Day 22-30：把 AI Agent 協作整理成作品集
練習讓 Codex / Claude Code 分工、使用 Skills、整理驗收紀錄與作品頁。
- Day 22Bcodex / claude-code
把需求交給 Codex 或 Claude Code
示範：寫一段 agent 任務說明，包含背景、改動範圍、驗收命令和不要碰的檔案。
交作業：完成一份 Agent 任務卡，請工具先提出計劃，不直接改大範圍檔案。
完成成果
完成 Agent 任務卡與核准流程。
付費 AI 工具提醒
Codex / Claude Code 可能需要付費方案；大型修改前先用 plan mode 或要求先回報計劃。
- Day 23Bgithub / codex
用 GitHub issue 管理小功能
示範：把「新增 FAQ 收納」寫成 issue，附上畫面、完成標準和測試方式。
交作業：建立 3 張 issue：一張 bug、一張功能、一張文案改善。
完成成果
完成 GitHub issue backlog。
付費 AI 工具提醒
GitHub 可免費開始；用 AI 讀 issue 前先移除敏感客戶資訊。
- Day 24Bcodex / gsap / product-design
使用設計與前端相關 Skills
示範：為小頁面挑 open-design、gsap、product-design 或 build-web-apps 類型 Skill，整理何時使用。
交作業：完成一張 Skills 選用表，寫出你會用在哪個任務、輸入資料和驗收方式。
完成成果
完成 Codex Skills 使用地圖。
付費 AI 工具提醒
Skills 本身視來源而定；新增套件或外部工具前要先確認依賴與授權。
- Day 25Bchatgpt / claude / codex
建立可重複的 Prompt 與檢查清單
示範：把「改一個卡片樣式」整理成可重複使用的 prompt、截圖需求和驗收清單。
交作業：整理 5 條 AI Coding 常用 prompt，包含改版面、修錯誤、寫 README、跑測試、整理 commit。
完成成果
完成 AI Coding Prompt Bank。
付費 AI 工具提醒
可用任何聊天工具完成；給 Agent 使用時需補檔案範圍和驗收命令。
- Day 26Acodex / claude-code / chrome
做一次錯誤修復演練
示範：故意建立一個小錯誤，請 AI 讀錯誤訊息、定位檔案、提出修法和驗證命令。
交作業：完成一個 bug 修復紀錄，包含錯誤訊息、原因、修改 diff 和驗證結果。
完成成果
完成第一份 debug case study。
付費 AI 工具提醒
Codex / Claude Code 可協助讀錯；若涉及 production 資料或權限，停止自動執行。
- Day 27Aremotion / creative-production / gsap
加入簡單動畫或 Remotion 展示素材
示範：把作品頁變成 10 秒展示短片腳本，或用簡單微互動呈現作品特色。
交作業：完成一段作品展示素材：短片腳本、截圖輪播或微互動 demo 擇一。
完成成果
完成作品展示素材。
付費 AI 工具提醒
Remotion、影像生成或剪輯工具可能需要額外環境；先從截圖輪播或簡單腳本開始。
- Day 28Bgithub / google / chrome / supabase / codex-security
整理推薦 Plugins 與 Skills 路線
示範：把 GitHub、Google、Chrome、Supabase、Codex Security 和 Build Web Apps 分成新手、進階、審核用途。
交作業：完成一張外掛與 Skills 選擇表，標記用途、風險、是否需要授權和第一個練習任務。
完成成果
完成 Codex 新手起手包工具地圖。
付費 AI 工具提醒
部分外掛、Skill 或服務需安裝、授權或付費；先用低風險專案測試。
- Day 29Bnotion / github / codex
把作品整理成一頁 Portfolio
示範：用作品頁說明問題、你怎麼交代需求、AI 做了什麼、你怎麼驗收。
交作業：完成一頁 portfolio case study，附上公開網址、截圖、學到的事和下一版計劃。
完成成果
完成 AI Coding 作品頁。
付費 AI 工具提醒
可用既有靜態頁或 Notion；若部署公開頁，先確認沒有秘密資訊。
- Day 30Bgithub / notion / chatgpt
設計下一輪 30 天功能 backlog
示範：把下一輪功能分成內容、UI、資料、會員、部署、自動化和安全檢查。
交作業：完成 10 張下一輪任務卡，並挑 1 張作為下週第一個任務。
完成成果
完成下一輪 AI Coding backlog 和學習回顧。
付費 AI 工具提醒
可用 GitHub issue、Notion 或 Google Sheets；正式開發前再確認 scope。
建議先認識的 Plugins
GitHubGoogle 全家桶ChromeSupabaseCodex SecurityBuild Web AppsTemplate CreatorRemotionCreative ProductionProduct Design
建議整理成工具箱的 Skills
greensock / gsap-skillsnexu-io / open-designGoogle Stitch / DESIGN.mdJavis603 / token-monitoraddyosmani / agent-skillsVoltAgent / awesome-agent-skills