UI Playground 的靈感啟發

前陣子看到 Notion 產品設計師 Brian Lovin 的訪談，他介紹了 Notion 團隊導入的 Prototype Playground 概念：建立一個獨立的空間，團隊成員對功能有任何設計想法，都可以丟上去彼此分享與查看。

另外，也看到 Linear 的設計工程師 Emil Kowalski 在 Twitter 上分享，他最近喜歡用 AI 測試 UI 的極端 edge case。他在 demo 影片中做了一個分頁切換，可以方便比較和測試 UI 效果，我很喜歡這個做法。(原文參考)

UI Playground 實作

我從這兩位大大身上各借了一個概念：「獨立空間」與「分頁切換比較」。我希望能在不影響現有 codebase 的情況下，嘗試探索不同的 UI 方案，尤其是視覺元素這一塊，例如字體、排版等。以下是我給 Claude Code 的提示詞：

我想建立一個 UI 探索用的 Lab，用來比較 App 畫面的不同設計方向，最後由我決定採用哪一個。

做法：
1. 先讀相關程式碼，告訴我目前的實作在哪裡、實際的值是多少。如果我的描述和程式碼不一致，先指出來，不要直接照做。
2. 在模擬器截完整的手機畫面，每個版本一張。截圖要控制變因：狀態列固定時間、關掉動態背景、用固定的示範資料；除了要比較的部分，其他像素要完全一致，截完請比對確認。
3. 做一個網頁 Lab：左邊 sidebar 列出實驗，中間是手機框裡的截圖，下方用分段 toggle 切換版本（像 iOS 的 segmented control，選取的那格會滑動）。要能用鍵盤左右鍵切換，也要有放大比較區的功能。頁面只放標題和版本名稱，不要加說明文字。
4. 把 Lab 發佈成私人連結，原始檔放在 repo 的 lab/ 資料夾，截圖用相對路徑，這樣本機瀏覽器也能直接打開。

限制：
- 實驗不能改變 App 的正式畫面。切換版本用的程式碼只能是暫時的，截完圖就移除。
- 修改任何檔案前先備份，截完從備份還原並核對內容；模擬器的設定也要還原。
- 只改我的指示中要比較的部分，其他的顏色、間距、字級、layout 都不要動。
- 如果需要下載字體或其他檔案，先問我。

給完提示詞後，就可以開始想嘗試的實驗，例如圓角、排版、字體風格等，最後打開瀏覽器比較。

UI Playground 的好處：記錄設計歷程與測試不同方案

一開始做這個 App 時，我的目標是先趕著做出來，所以沒有花太多時間探索設計細節的不同方案。很多 UI 修改都在同一個對話裡一輪接一輪地改，不同版本和修改的過程全散落在對話紀錄中，沒有被整理下來。透過這個 Playground，不同設計方案的畫面都集中在同一個地方，省下了查找紀錄和排版比較畫面的時間。

未來 Vibe Coding 時，我會先建立 UI Playground

這一版的實驗只處理比較，還沒有做到記錄決策。但我認為它會改變我未來用 Vibe Coding 做 UI 的流程：在專案前期就先導入 Playground，把每次和 AI 討論後做出的關鍵設計畫面和決策原因都留在同一個地方，之後要回頭查，或是跟老闆報告都很方便！