Day21：先做一個樣子，再做裡面的內容

承接昨天提到的，老婆那台放著吃灰的 Stream Deck
我們今天的目標
就是去試看看，這種本來開發成本很高的需求
其實現在已經可以透過 Vibe Coding，用很簡單的方式來實現了

就是這麼簡單

這次做了什麼？

東西本身，不是這次的重點
這次的重點，是用 Codex 開發，並且在實際開發之前，先請它做出一個 mock 版本的這個技巧

Vibe Coding 小技巧：
Mock 就是先做一個「看起來像、也可以按，但背後還沒真的接起來」的假版本
確定方向對了，再往下開發真的骨架

先請它 mock 一個看看

幫我mock一個可以在這個Stream Deck上簡單互動可以跑的可愛貓咪顯示或是小遊戲

為什麼是貓咪？
其實就是隨口一提，拿來當 demo 展示而已

兩分多鐘後，對話裡就出現了一個 15 鍵、可以直接點的 mock

看了才知道要改什麼

1. 找貓咪遊戲很好，然後加入分數和高分統計。
2. 不要“睡覺”，而是它會走來走去和一些遊走的動作（你設計看看）
3. 可以餵食，不用默默按鍵，而是按貓咪的時候摸摸。

這三點，都是看到第一版之後才講得出來的
下排的「摸摸」「睡覺」，就換成了「上局分數」「最高分」

Vibe Coding 經驗分享：
Claude app 內建的 visualize，用來繪製結構圖很不錯
而 Codex 內建的 visualize，用來製作 mock 很不錯

開發

開發看看
遇到難解的時候，先回頭停下來和我確認

6 分鐘後，Codex 就交出了可以安裝的插件

從 CDD / Vibe Coding 的角度來看，這次的價值在於？

工具的價值

想做一個專屬的東西，不用再回頭慢慢啃文件
從幾句話就到可以安裝的插件

工具的成本

而先 mock、再實際開發
方向要改的時候，就只需要考慮畫面
這樣比較省 token 和時間

工具的極限

這個做法，主要處理的是互動和畫面的部分
遇到更複雜的系統，光靠 mock 可能就不夠了

結語

這次做的貓咪小遊戲，並沒有解決什麼大問題
但它驗證了一件事：想要一個專屬的小東西，其實成本越來越低了

那你家裡那些放著吃灰的東西
會想拿來做什麼呢？

C010 的小煩惱：放著吃灰的 Stream Deck
驗證完畢，就此宣布解決！