# 🚀 簡化開發流程 (開發階段專用) ## 核心原則:快速迭代、立即看結果 --- ## 📝 超簡單三步驟流程 ### 1️⃣ 告訴我要改什麼 ```markdown 「我要修改 [功能名稱]」 「現在是 [A],我要改成 [B]」 ``` ### 2️⃣ 我幫你改 - 我會先看檔案 - 直接修改 - 告訴你改了什麼 ### 3️⃣ 你測試確認 - 瀏覽器看結果 - OK → 繼續下一個 - 不OK → 告訴我,馬上修 --- ## 💬 對話範例 ### 範例 1:改文字 ``` 你:「Dashboard 的標題要改成『學習中心』」 我:改好了 你:看瀏覽器確認 ``` ### 範例 2:改功能 ``` 你:「登入成功後要跳到 /dashboard 不是 /home」 我:改好了,在 login/page.tsx 第 XX 行 你:測試 OK ``` ### 範例 3:改樣式 ``` 你:「按鈕太小,改大一點,顏色改成綠色」 我:改好了 你:「再大一點」 我:調整了 ``` --- ## 🔧 常用需求快速指令 ### UI 調整 - 「把 X 改成 Y」 - 「這個太小/太大」 - 「顏色改成 #XXXXXX」 - 「加個按鈕做 XXX」 ### 流程修改 - 「點擊後要跳到 XXX 頁」 - 「這個欄位要必填」 - 「加個 loading 狀態」 - 「錯誤訊息改成 XXX」 ### 資料調整 - 「這個假資料改成 XXX」 - 「多加幾筆測試資料」 - 「預設值改成 XXX」 --- ## ⚡ 快速修復 ### 頁面壞了 ``` 你:「/flashcards 打不開」 我:馬上修復 ``` ### 樣式跑版 ``` 你:「手機版跑版了」 我:調整 responsive ``` ### 功能失效 ``` 你:「按鈕點了沒反應」 我:檢查並修復 ``` --- ## 📁 檔案位置速查 ``` 頁面 → /app/[頁面名]/page.tsx 樣式 → /app/globals.css 或 Tailwind classes 設定 → /next.config.mjs, /tailwind.config.ts ``` --- ## 🎯 一句話原則 **「先做出來,能動就好,之後再優化」** --- ## 💡 小技巧 1. **不用管 Git**:開發階段改了再說,最後再整理 commit 2. **不用寫文檔**:先把功能做出來 3. **不用完美**:70% 完成度就可以繼續下一個 4. **隨時問**:卡住就問,不要糾結 --- ## 🔄 每日收尾(可選) 結束前跟我說: ``` 「今天改完了,幫我 git add + commit」 ``` 我會幫你: - 整理今天的修改 - 寫 commit message - 推上 Git --- ## ⚠️ 唯一要注意的 **開發伺服器要開著** ```bash npm run dev ``` 如果壞了: 1. Ctrl+C 停止 2. `npm run dev` 重開 3. 還是壞了就叫我 --- ## 🚫 不用管的事 - ❌ 測試 - ❌ 文檔 - ❌ Code Review - ❌ 效能優化 - ❌ TypeScript 錯誤(如果能動) - ❌ Console 警告(如果能動) **這些等要上線前再處理** --- ## 📢 記住 > 現在是開發階段,目標是: > 1. 快速看到結果 > 2. 快速調整 > 3. 快速迭代 **完美是上線前的事!**