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

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

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

---

## 📝 超簡單三步驟流程

### 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. 快速迭代

**完美是上線前的事！**