Day 11 把同一個畫面用三種 Prompt 改過一輪後，我開始注意到另一個問題。
不是哪一版比較漂亮，而是同一個產品裡的東西開始有點各長各的。
Filter Chip 的高度不太一樣、卡片圓角有差、按鈕有時黑底有時又換另一種樣子，連文字大小跟間距都會跟著每次生成一起漂。
單張看都還可以，放在一起就會開始有種「這真的是同一個網站嗎？」的感覺。
所以今天先不繼續生新畫面。
先把目前 Stitch 做出來的版本攤開，看哪些東西需要固定下來。

📸 圖片 1｜把目前幾個 Stitch 畫面並排

先救一致性，不做企業級 Design System

我沒有打算今天突然做一套幾十頁的 Design System。
這個專案目前只需要一件事：之後不管是 Stitch 繼續改 UI，還是進到 Coding，都不要每次重新發明一次 Button 跟 Card。
所以我先手動盤點現在真的會重複用到的東西：

• 主要／次要文字
• 主要色與狀態色
• 間距
• Button
• Filter Chip
• Cafe Card
• Work Tag
• Map Marker
• Bottom Sheet

尤其 Cafe Card、Filter Chip 跟 Map Marker 最容易一直重複出現。如果這三個每一頁都長得不一樣，後面只會越修越累。

📸 圖片 2｜手動盤點 UI 元件與不一致的地方

這次 Gemini 不設計，只負責收拾

前兩天 Stitch 已經幫我做夠多設計了。
今天 Gemini 的工作比較無聊：把現在有的東西整理成規則。
我給它的 Prompt 是：

我有一組由 AI 產生的咖啡廳 App UI。

我要整理成「夠這個 MVP 使用」的 Design System。

請幫我定義：
- Typography
- Spacing
- Color / Status Color
- Button
- Filter Chip
- Cafe Card
- Work Attribute Tag
- Map Marker
- Bottom Sheet

不要重新設計整個產品，也不要擴充成大型企業 Design System。

每個元件只保留：
- 必要尺寸或 Token
- 必要狀態
- 使用規則
- 什麼情況不要用

如果目前 UI 有互相矛盾的樣式，請指出來，不要自己偷偷增加第三種做法。

我特別補了最後一句。
因為我現在需要的不是 Gemini 再幫我創作一套新的，而是把已經有的東西收成一套。

📸 圖片 3｜丟給 Gemini 的 Design System Prompt

Gemini 整理得很完整，但又把被砍掉的東西撿回來了

第一眼看 Gemini 的結果，其實滿像一份可以直接拿去開發的 Design System。
Typography、Spacing、Color、Button、Filter Chip，甚至 Bottom Sheet 的狀態都有整理。
但往下看沒多久，我就看到熟悉的東西又長回來了。
Gemini 在檢查 Bottom Navigation 時，建議統一成：

• 探索
• 我的收藏
• 回報／推薦

問題是「收藏」跟「回報／推薦」前面就已經不在現在的核心流程裡。
我今天只是要整理 Design System，不是趁機把功能加回來。
所以這條不收。

📸 圖片 4｜Gemini 找出的矛盾，順便又製造一個矛盾

另一個更明顯的是 Map Marker。
它居然又拿：

⚡ 95% 插座

當範例。
但前面才剛把這種百分比拿掉。
「95% 插座」到底是 95% 的桌子有、座位有，還是今天剛好 95% 可以用？
這種看起來很精準、實際上不知道怎麼量的數字，我不想再放回來。
所以 Marker 的規則可以留，但內容要沿用前面已經決定的寫法，例如：

一般：
Ruins Coffee
⚡ 插座多

選取：
Ruins Coffee
● 營業中
⚡ 幾乎全有
📶 適合工作
🔇 安靜

Design System 應該統一「怎麼顯示」，不是把已經淘汰的資料格式復活。

真正值得留下來的是 Token

把這些產品層級的問題拿掉後，Gemini 整理的基礎規則其實滿有用。
Typography 最後只需要幾個層級：

H1            20px / Bold
Body Large    15px / Semi-bold
Body Regular  13px / Regular
Caption       11px / Regular

Spacing 也不用搞出十幾級：

8px   元件內小間距
16px  一般 Padding / 元件間距
24px  大區塊間距

顏色目前也只留真的會用到的：

Neutral 900   #111111
Neutral 100   #F8F9FA
White         #FFFFFF

Success       #10B981
Warning       #F59E0B

這個規模對現在剛好。
我不是要做一套可以支援公司未來二十個產品的 Design System，只是不要讓同一顆按鈕每次叫 Stitch 生一次，就換一次身材。

📸 圖片 5｜最後留下的最小 Design Token

元件也不用規定到每個 Pixel

接著才是目前真的會一直重複出現的元件。
例如 Filter Chip，我只需要先固定：

高度：36px
左右 Padding：12px
圓角：18px

Default：
白底／黑字／細邊框

Selected：
黑底／白字

Button 也是：

Primary：
48px 高
黑底白字
12px 圓角

Secondary：
48px 高
白底或淺灰底
12px 圓角

Cafe Card 則先固定資訊順序，不讓每次生成都自己重新發明：

店名
營業狀態
距離

插座
Wi-Fi
時間規則
環境

至於 Bottom Sheet，我比較在意的是它的行為：

Collapsed
→ 先看到足夠做決定的工作資訊

Expanded
→ 再看完整規則與導航

關閉
→ 回到原本地圖位置

這些才是我希望後面的 Stitch 跟程式碼不要一直漂掉的東西。

📸 圖片 6｜元件規則整理

還有一些 Gemini 給的規則，我先不收

例如它寫：

確保使用者在 3 秒內抓到店名與核心指標。
這句聽起來很合理，但「3 秒」又是從哪來的？
沒有測試，就先不要自己生 KPI。
另外 Bottom Sheet 的 Collapsed / Expanded 我會留下當互動方向，但像 36px Drag Handle、20px 圓角 這種數字，如果目前畫面沒有真的確認，也不會因為 Gemini 寫了就全部變成聖旨。
今天整理 Design System 的目的很單純：

把已經做過的決定固定下來，不是讓 Gemini 再替產品做一次決定。

所以 Gemini 這份結果，我會把它當整理工具，而不是規格來源。

最後把規則留下來，不要只存在聊天室裡

整理完如果只停在 Gemini 對話裡，其實沒什麼用。
我會把最後確認過的規則另外存成：

/docs/DESIGN_SYSTEM.md

後面開始 Coding 時，就可以先讓 Antigravity 讀 PRD，再讀這份 Design System。
至少之後要它做一顆 Filter Chip，不需要每次重新解釋圓角、狀態跟字級。

📸 圖片 7｜DESIGN_SYSTEM.md

今天沒有再多生一個新頁面。
反而是在想辦法讓已經生出來的頁面，不要下一輪又全部變臉。
AI 改 UI 很快，這點很好用。
但它也代表一件事：跑版跟風格漂移，一樣可以很快。
所以這份 Design System 不需要很大，只要之後每次新增畫面時，能少一點「這顆按鈕怎麼又不一樣」就已經值回票價了。