dramaling-vocab-learning/docs/03_development/simple-dev-workflow.md

🚀 簡化開發流程 (開發階段專用)

核心原則：快速迭代、立即看結果

---

📝 超簡單三步驟流程

1️⃣ 告訴我要改什麼

「我要修改 [功能名稱]」
「現在是 [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

---

⚠️ 唯一要注意的

開發伺服器要開著

npm run dev

如果壞了：

1. Ctrl+C 停止
2. npm run dev 重開
3. 還是壞了就叫我

---

🚫 不用管的事

• ❌ 測試
• ❌ 文檔
• ❌ Code Review
• ❌ 效能優化
• ❌ TypeScript 錯誤（如果能動）
• ❌ Console 警告（如果能動）

這些等要上線前再處理

---

📢 記住

現在是開發階段，目標是：

1. 快速看到結果
2. 快速調整
3. 快速迭代

完美是上線前的事！