Day 3 依舊是繼續刻一個魚缸：分析優化方向 & 重構2.0

2025 iThome 鐵人賽

DAY 3

生成式 AI

學都學了：GenAI 從試錯到實用的實驗筆記系列第 3 篇

17th鐵人賽

vachen

2025-09-17 13:45:08

64 瀏覽

分享至

今日主題

前情提要：Day 2 來自 Product Hunt 的靈感：復刻一個魚缸，使用Cursor + Vercel

上一篇進度是算是第一版成果，但我認為最大BUG是魚的游動並不自然，這是首要問題，另外，就是個人互動性也不夠。從0到1很簡單，但接下來每個細節就都需要實際再想清楚溝通 Prompt。陸續跟其他資深夥伴討論的幾個重點，得到的方向和經驗是：

Prompt 優化：
- 移動算法作為關鍵字嘗試
- 如果不是用關鍵字：
  - 比例設定：多少 % 魚群依循 X 規則或 Y 規則
  - 初始設定：初始狀態定義
  - 場景設定：遇到 X 狀況，應該有 Y 行為產生
- 素材跟功能分開處理溝通
管理面：
- 元件分開管理，方便迭代

思考如何做

經判斷，重構或許更快，趁此也把規格定義清楚
目標：在不寫花俏功能的前提下，先交付一個可用、可迭代、可拆修的第一版。重點元件獨立儲存，以這個專案來說：互動、移動算法、GI介面就需要分開管理，以利後續改版

自己產出：初始想法、需求定義、設計風格、GitHub類似專案資料
AI 產出：PRD 規格、完成實際網站、程式碼撰寫
協作流程圖：flowchart
A[Idea 發想] --> B[ChatGPT 討論規格文件]
B --> C[產出 PRD]
C --> D[Cursor 生成第一版成果]
D --> E1[找設計風格]
D --> E2[關鍵功能演算檢討]
E2 --> F1[回頭跟 GPT 討論可能做法]
E2 --> F2[到Github找相關專案參考]
E1 --> G[修正問題]
F1 --> G
F2 --> G
G --> H[完成 75%~80% 第一版成果]
H --> I[部署上線]

Step1：根據需求設定PRD

*初始對話 Prompt：

有一個點子是魚缸小遊戲，是這樣子的。需要一個網站，首頁進去有魚缸區塊，裡面已經有 50 隻魚在裡面游泳，有大魚也有小魚，魚的移動要用移動演算法來設計。

同時要有另一個區塊：有人進到這網站，可以自己畫一條魚並放進魚缸一起游泳。所以這個區塊需要包含一個可以繪圖的介面，而畫布旁邊的工具列至少要有三種最基本的功能：
可以選擇畫筆顏色、可以選擇畫筆粗細、可以用橡皮擦回到上一步，此外，還要能一次清空畫布。

當使用者完成繪圖後，要有功能按鈕可將魚丟進魚缸，和其他魚一起游動，魚缸裡原本有 50 隻魚在游，而使用者用童趣插畫風格畫出的魚，也能丟進去一起游。這條新魚的游動規律也要遵照魚類自然的移動法則。

以上這就是我想要的 MVP 產品。請根據這些條件幫我設計一份可能需要的功能規格。先不要直接寫程式，只需要列出基本功能即可。「魚的移動」請務必把移動演算法獨立成元件，方便我管理或做個別修改。現在只需要先有 MVP 規格即可。

產出如下

// MVP PRD//
## 0. 系統範圍（Scope）
- 單頁網站（SPA）
- 進站即見「魚缸」主區塊，預設 50 隻魚，自然游動
- 互動：
  - 左鍵點擊：該點產生吸引力，魚群靠近
  - 右鍵點擊：該點產生小型隱形障礙，魚會繞開
- 一鍵切換日/夜模式（夜間顯示星空閃爍背景）
- 「獨立視窗」按鈕：將魚缸以新視窗獨立呈現
- 「自畫魚」元件：畫布＋工具列（顏色、筆刷粗細、橡皮擦/復原一步、清空），完成後丟進魚缸
- **非目標（MVP 不含）**：會員、後端儲存、多人協作、素材庫、AI 風格化、行動 App

---

## 1. 技術選型（MVP）
- 前端框架：React 18（Vite 建置）
- 狀態管理：Zustand 或 React Context
- 畫布：HTML `<canvas>`（2D）
- 動畫：`requestAnimationFrame`（60 FPS 目標）
- 視覺：Tailwind CSS 或 CSS Modules
- 型別：TypeScript（建議，但非強制）

---

## 2. 移動算法（Boids-Lite，MVP）
- **核心行為**
  - 分離（Separation）
  - 對齊（Alignment）
  - 凝聚（Cohesion）
  - 邊界回彈/轉向
  - 吸引場（Attractor）
  - 障礙避讓（Obstacle Avoidance）
  - 速度鉗制（含阻尼）
- **參數（預設值）**
  - 視覺半徑：70–100 px
  - 分離距離：20–30 px
  - 速度：小魚快、大魚穩
  - 邊界緩衝：25 px
  - Attractor 強度：0.8
  - Obstacle 半徑：40–60 px
- **效能優化**
  - 使用空間分割（grid 或 quadtree）

---

## 3. 互動規格（滑鼠）
- 左鍵：建立 Attractor（吸引點，ttl = 8000ms）
- 右鍵：建立 Obstacle（障礙，ttl = 8000ms）
  - 使用 `preventDefault()` 避免跳出瀏覽器選單
- 指標提示：
  - 左鍵游標 → 「吸引」圖示
  - 右鍵游標 → 「禁止通行」圖示

---

## 4. 日/夜模式
- Toolbar 提供切換按鈕
- 日間：淺色背景
- 夜間：星空 Canvas 疊層
- 切換模式不會重置魚群狀態

---

## 5. 獨立視窗（投影模式）
- Toolbar 提供「獨立視窗」按鈕
- `window.open()` 新頁顯示魚缸
- **狀態同步**
  - A：新視窗自行啟動魚群（MVP）
  - B：使用 BroadcastChannel 傳送快照（進階）

---

## 6. 自畫魚（Drawing）
### 6.1 畫布與工具列
- 畫布：512×512 px
- 工具：
  - 顏色選擇（至少 8 色）
  - 筆刷粗細（1–24 px）
  - 橡皮擦（透明像素）
  - 復原一步
  - 清空畫布
  - 「丟進魚缸」→ 輸出透明 PNG
- 鍵盤快捷：
  - Z 復原
  - Del 清空
  - [/ ] 調整筆刷粗細

### 6.2 去背與輸出
- 畫布底色透明
- PNG 輸出並建立 HTMLImageElement
- 邊界裁切去除全透明區域

### 6.3 放入魚群初始化
- size：24–48 px
- 初速：隨機，方向部分對齊群體
- 權重：初期 2 秒降低分離權重

---

## 7. 視覺與可用性
- 響應式設計，隨容器縮放
- 幀率目標 60 FPS；低於 30 時停用星空動畫
- 可存取性：按鍵切換模式、清空畫布、提供 Tooltip

---

## 8. 主要使用流程（User Flows）
1. 進站 → 看到 50 隻魚
2. 左鍵點擊 → 魚群靠近
3. 右鍵點擊 → 魚繞開障礙
4. 切換夜間模式 → 顯示星空
5. 點「獨立視窗」→ 新頁只顯示魚缸
6. 「自畫魚」→ 完成繪製 → 丟進魚缸 → 融入群游

---

## 9. 測試案例（Acceptance Criteria）
- [魚群] 進站即見 50 隻魚，自然游動
- [左鍵] 點擊處附近魚群靠近，8 秒後恢復
- [右鍵] 魚繞開障礙，無瀏覽器右鍵選單
- [日/夜] 切換正常，魚狀態不受影響
- [獨立視窗] 可正常開啟，魚持續游動
- [自畫魚] 功能完整，魚能融入群體

---

## 10. 參數表（MVP 預設）
- 魚數量：50
- 視覺半徑：90 px
- 分離距離：24 px
- 速度範圍：0.6–2.2 px/frame
- 邊界緩衝：25 px
- 吸引 TTL：8000 ms（強度 0.8）
- 障礙 TTL：8000 ms（半徑 50 px）
- 新魚保護期：2000 ms（降低分離 50%）

---

## 11. 風險與取捨（MVP）
- 效能：MVP 使用 grid，未來可升級 quadtree
- 獨立視窗：先採方案 A，後續再升級
- 去背：僅透明畫布與橡皮擦，不做 AI 去背