今日主題

復刻一個來自 Product Hunt 的靈感：Draw A Fish

簡單來說，這個產品是：使用者可以隨意畫一條魚，然後就可以放進魚缸，你的魚就會動起來，在一個全球共享的數位魚缸裡跟其他人畫的魚一起游泳

為什麼想做

看到這點子時，我第一反應是真有趣，平常看到的都是生產力的工具延伸，但原來可以用來做這麼童趣的點子。
其次，我評估它的難度不會太高，是「看著畫面與操作，可以拆解出明確需求」的類型。最後，我自己認為學習從模仿開始是很好的起點，至少會帶著一股動力想看自己能復刻到什麼程度。

思考如何做

• 工具選擇：Cursor→Github→Vercel
• 基本流程：我很喜歡這個版本的說明，至少在初學階段，很好釐清現在是哪個步驟和為這麼需要這步驟或工具，而且夠簡單
  
  (image Source: Jocelin Ho )
• 初步需求拆解：
  • 需要一個GI介面，包括：
    • 有區塊可畫魚
    • 畫筆顏色可選
    • 畫筆粗細度可調
    • 有魚缸區塊
  • 基礎功能，包括：
    • 畫錯可回到上一步
    • 魚放進魚缸後，可游動
    • 可以切換夜晚模式

成果校驗

• 使用介面：預期完成度 70%
• 預期互動性：預期完成度 50%

GI介面

幾次版本下來，最主要明顯幾個BUG

• 魚的游動不自然：
  • 第一版成品
    • 甚至是頭上腳下游，這是死了......才會有的飄法
    • 魚的尾巴不會動，有點沒誠意了
    • 只會固定從某一側出現，且短暫出現幾秒後消失，但預期是應該就在裡面一直游，顯然是我沒說清楚
  • 小結心得：調整魚的自然擺動是目前花最多時間在處理，但成效一直不好
    • 可能原因：Prompt 表達的不夠專業，就類似如果在生成影音，Stable Diffusion prompt 中可以加入「Dutch Camera Angle」，是一種攝影鏡頭做傾斜視角，用來讓畫面看起來比較動感或不穩定、有張力。簡稱荷蘭角（Dutch angle）
    • 預計初步優化：先跟 GPT 聊一下可行性更高的prompt
    • 再進一步優化：擬真小魚會成群游5動，大魚會追逐小魚
• 互動性不夠

  • 如果懶得畫那麼多，魚缸可以手動增加樣本魚，但現在增加的形式太單一了! 看到時笑出來，你大模型大可不必跟著我降低繪畫水準。
    

  • 白天/夜晚切換模式效果不佳，想像夜晚時，魚應該可以帶點螢光，或者背景就是大樓高廈燈光當襯托
    

  • 小結心得：目前並沒有花太多時間在處理這塊，列為第二階段，因為暫不影響主要功能體驗，只是會覺得有點雞肋

  • 預計初步優化：一樣先跟 GPT 聊一下可行性更高的prompt，最簡單應該就是把預期效果直接貼出來，而非單靠文字

  • 再進一步優化：

    • 輔助創作：AI幫魚添加細節讓它更生動
    • 風格轉換：將簡單線條轉換成精美插畫 ( 特別適合手殘的我)
    • 環境變化：添加水草、石頭、寶藏

  • 終極優化：

    • AR體驗：用手機看魚在現實空間游泳

其他補充：優化的建議，也跟 GPT 聊了很多，給的方向也都很實用，主要都是更多遊戲化機制，包括像一開始的原產品，有投票功能；其他也包括餵食遊戲，或者是跟其他魚類互動。

但我來說，就很取決於我自己的目的：我只是想要無聊時，可以把魚缸接到延伸螢幕，然後可以邊工作邊放鬆一下，所以與其把心思放在遊戲化，我更想增加的大概就是場景切換，而前提是這魚的游動效果也要達要一定效果水準，也就是明日的計畫。

今日總結

這個專案我把它歸類在「想做、要做、得做」裡面的 「想做」，純粹就是來療癒自己，所以在時間分配上會先做到60分的程度，然後再根據我個人喜好，決定優化順序。

這個小遊戲看似沒什麼生產力，但是是近期 Vibe Coding 讓我感到好玩的樂趣，畢竟失敗了也無傷大雅