先從純前端網頁設計開始，畫面看得到、錯誤比較好理解。
每次只改一小段，保留需求、diff、截圖、檢查命令和回復方式。
可以先用手邊已有的 AI 工具開始；需要 ChatGPT 桌面版的 Codex、Claude Code、額外 credits 或付費外掛時，任務會先提醒。
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 1D
把已選的 Codex 或 Claude Code 接上練習工作區
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 1 計劃 - Day 2D
把第一頁 SPEC 補成能執行規格
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 2 計劃 - Day 3D
建立純前端 HTML 第一版
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 3 計劃 - Day 4D
用 Chrome 檢查手機版與文字溢出
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 4 計劃 - Day 5C
把 Git 狀態與差異收成第一次 commit
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 5 計劃 - Day 6C
部署成能分享的靜態頁
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 6 計劃 - Day 7D
整理第一週作品回顧
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 7 計劃
第 2 週Day 8-14：把小頁面變成能展示作品
練習元件拆分、互動狀態、表單假資料、圖片素材與基本動畫。
展開每日任務收合每日任務這週交作業：一個有互動狀態、假資料和作品說明的前端頁
第 2 週
Day 8-14：把小頁面變成能展示作品
練習元件拆分、互動狀態、表單假資料、圖片素材與基本動畫。
- Day 8C
把頁面拆成能修改區塊
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 8 計劃 - Day 9C
新增按鈕 hover、focus 與收納卡片
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 9 計劃 - Day 10C
加入假資料清單與篩選器
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 10 計劃 - Day 11C
加入表單 UI 與送出前檢查
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 11 計劃 - Day 12C
用 GPT Image 或 Canva 做作品素材
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 12 計劃 - Day 13B
加入 GSAP 或 CSS 微互動
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 13 計劃 - Day 14C
第二週部署與截圖檢查
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 14 計劃
第 3 週Day 15-21：接到資料庫、會員與自動化前置
用低風險方式認識 Supabase、表單資料、Email 草稿和部署環境。
展開每日任務收合每日任務這週交作業：一個能描述資料流、權限和手動檢查的產品 prototype
第 3 週
Day 15-21：接到資料庫、會員與自動化前置
用低風險方式認識 Supabase、表單資料、Email 草稿和部署環境。
- Day 15C
畫出資料流與使用流程
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 15 計劃 - Day 16B
建立 Supabase 專案概念與資料表草稿
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 16 計劃 - Day 17B
做前端表單到 Supabase 的測試規格
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 17 計劃 - Day 18B
設計自動回信草稿與人工確認點
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 18 計劃 - Day 19B
規劃會員狀態與權限畫面
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 19 計劃 - Day 20B
部署到 Vercel、Netlify 或 Zeabur 的檢查表
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 20 計劃 - Day 21B
第三週安全回顧
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 21 計劃
第 4 週Day 22-30：把 AI Agent 協作整理成作品集
練習讓 Codex / Claude Code 分工、使用 Skills、整理檢查紀錄與作品頁。
展開每日任務收合每日任務這週交作業：一份 AI Coding 作品頁、開發紀錄和下一輪功能 backlog
第 4 週
Day 22-30：把 AI Agent 協作整理成作品集
練習讓 Codex / Claude Code 分工、使用 Skills、整理檢查紀錄與作品頁。
- Day 22B
通過安全檢核後，把需求交給 Agent
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 22 計劃 - Day 23B
用 GitHub issue 管理小功能
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 23 計劃 - Day 24B
從專案規則接到 Skill 或官方文件
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 24 計劃 - Day 25B
建立精簡、能量測的 Prompt 與檢查清單
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 25 計劃 - Day 26A
做一次錯誤修復演練
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 26 計劃 - Day 27A
加入簡單動畫或 Remotion 展示素材
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 27 計劃 - Day 28B
幫專案省下 Context 與 Token
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 28 計劃 - Day 29B
把作品整理成一頁 Portfolio
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 29 計劃 - Day 30B
設計下一輪 30 天功能 backlog
先看這一天的練習主題。完整情境、手把手步驟、交作業、AI 家教與測驗會在購買完成、帳號資格確認後開放。
查看 Day 30 計劃
建議先認識的 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