Day 12 做完之後，我現在手上其實只有兩樣東西：

• 前面 Stitch 已經產生、而且我比較想繼續用的探索頁版本
• 一份人工整理過的 DESIGN_SYSTEM.md

還沒有真正的 390px 手機畫面
這點我想先講清楚
因為如果文章直接從 Design System 跳到一張 Mobile UI，看起來就會像那張圖自己長出來的
今天真正要做的事情，其實是：

把昨天定下來的規則重新交回 Stitch，叫它沿用同一套設計，做出第一版 Mobile First 畫面

不是進 Antigravity，也還不是寫程式
Day 13 仍然是在設計階段

先把昨天留下來的東西重新整理成 Stitch 看得懂的 Context

Day 12 的 DESIGN_SYSTEM.md 是寫給後面開發看的，不代表我可以整份貼進 Stitch，它就一定照單全收
所以今天第一步，我先從裡面抓出真正會影響畫面的規則：

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

Spacing
- 8px
- 16px
- 24px

Button
- Primary：48px 高，黑底白字
- Secondary：48px 高，白底或淺灰底

Filter Chip
- 36px 高
- Default：白底黑字
- Selected：黑底白字

Cafe Card
資訊順序：
店名 → 營業狀態 → 距離 → 插座 → Wi-Fi → 時間規則 → 環境

Map Marker
一般狀態保持簡短
選取後才增加工作資訊

Bottom Sheet
Collapsed → 先看重點
Expanded → 再看完整規則與導航
關閉 → 回到原本地圖位置

這些才是今天真的要交回 Stitch 的東西
像 Day 12 Gemini 自己補的「收藏」、「回報／推薦」、95% 插座，當然就不會再帶回去
不然昨天才剛刪掉，今天又自己送回去，這個系列會變成每天跟自己打架

📸 圖片 1｜Day 12 最後留下的 Design System 規則

這次不是叫 Stitch「做一個手機版」

接著回到 Stitch
我會直接拿 Day 11 最後想繼續用的探索頁版本當基底，不從空白畫面重新開始
這點很重要
如果我重新開一個 Prompt，只寫：

幫我做一個適合數位遊牧者的咖啡廳 Mobile App

那前面 Day 10～12 做的事情差不多全部歸零
它很可能又重新發明一套 Button、Card、Marker，甚至順便送我一個會員中心
所以這次 Prompt 要同時告訴 Stitch 三件事：

1. 沿用哪一個既有畫面
2. 哪些 Design System 規則不能亂改
3. 手機上真正要完成的任務是什麼

我準備給 Stitch 的 Prompt 會是：

請以目前這個「咖啡廳探索頁」為基礎，
整理成約 390px 寬的 Mobile First 版本

不要重新設計整個產品
不要建立一套新的視覺風格

請沿用目前 Design System：
- H1：20px / Bold
- Body Large：15px / Semi-bold
- Body Regular：13px / Regular
- Caption：11px / Regular
- Spacing：8 / 16 / 24px
- Primary / Secondary Button
- Filter Chip
- Cafe Card
- Map Marker
- Bottom Sheet

使用情境：
使用者人在外面，一手拿手機，
想快速找到附近適合工作兩小時的咖啡廳

主要流程：
1. 確認目前位置或搜尋地點
2. 快速套用工作條件
3. 從地圖查看附近店家
4. 點選店家查看核心工作資訊
5. 需要時展開 Bottom Sheet 看完整規則
6. 開啟 Google Maps 導航

手機版請優先處理：
- 搜尋、Filter、地圖不要互相遮擋
- 不要讓 Cafe Card 吃掉太多地圖空間
- Filter Chip 太多時要有合理的手機操作方式
- 一般 Map Marker 保持簡短
- Selected Marker 才顯示更多工作資訊
- Bottom Sheet 第一層只放做決定需要的資訊

不要新增：
- 收藏
- 回報／推薦
- 會員功能
- 排行榜
- 新的 Navigation
- 新的產品功能

重點不是把桌面版縮小，
而是沿用同一套 Design System，重新安排手機上的資訊優先順序

我這次最在意的是最後一句

同一套 Design System，不代表同一套 Desktop Layout 可以直接縮小

Design System 管的是元件怎麼長、狀態怎麼變；Mobile First 還要處理另一件事：什麼東西應該先出現，什麼東西應該先收起來

📸 圖片 2｜丟回 Stitch 的 Mobile First Prompt

這時候才會有第一張 390px Mobile 畫面

Prompt 送出去後，我才會拿到今天真正的第一個新產出：

沿用 Day 12 Design System 的 Mobile First 探索頁

這張才是 Day 13 的第一版，不是 Antigravity 寫出來的網頁，也不是我用 DevTools 把某個現成網站硬縮到 390px
它仍然是 Stitch 的設計稿
這裡我會先完整留一張，不急著繼續 Prompt
因為跟 Day 10 一樣，第一版有問題反而比較有文章可以寫

📸 圖片 3｜Stitch 產生的 390px Mobile 第一版

第一輪出來後，我先不看漂不漂亮

拿到第一版後，我先照前面的 User Flow 走一次第一眼其實已經很接近我要的方向，但真的放在 390px 寬度看，幾個問題也馬上跑出來

打開探索頁
↓
定位／搜尋地點
↓
看附近咖啡廳
↓
套 Filter
↓
選一間店
↓
看工作資訊
↓
展開完整規則
↓
導航

這次我要檢查的不是陰影漂亮不漂亮，而是幾個很實際的問題

1. Search 沒問題，但 Filter 已經被切掉了

第一版的搜尋列本身沒什麼問題，真正先露餡的是下面那排 Filter Chip
插座多、不限時、安靜、營業中 都還看得到，但最右邊的 高速 Wi-Fi 已經被畫面切掉一部分
這其實是很典型的手機問題：Design System 可以固定 Chip 高度與 Selected 狀態，但它不會自動告訴我五六顆 Chip 要怎麼塞進 390px
我不想直接把所有條件折成兩三排，因為那樣又會吃掉地圖空間這一輪比較合理的方向，是保留常用條件在第一層，同時讓使用者知道右邊還有其他 Filter 可以操作

2. Marker、Cafe Card、Bottom Sheet 有沒有講三次一樣的東西

Day 12 已經定過 Map Marker 不要再用 95% 插座 這類假精準資料
但手機還有另一個問題：資訊重複
如果 Marker 已經寫：

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

下面 Cafe Card 又全部再寫一次，Bottom Sheet 打開又念第三次，就會變得很浪費空間
所以今天我想把三層分清楚：

Marker
→ 值不值得點

Cafe Card
→ 值不值得去

Bottom Sheet
→ 完整規則與導航

而第一版很明顯還沒有完全做到
選到 Ruins Coffee 後，地圖上的黑色 Marker 已經放了店名、營業時間，以及插座、Wi-Fi、安靜等工作資訊；下方 Bottom Sheet 又再次出現插座取得、Wi-Fi 連線、環境聲音與時間限制
單看每一塊都合理，但放在 390px 裡，就會發現同一組資訊正在搶兩次空間
所以第二輪我會把 Selected Marker 再收斂，只留下店名、營業狀態與一個最重要的工作屬性，完整工作資訊交給下方店家區域

3. Bottom Sheet 到手機上是不是真的比較合理

Day 09 就決定不要為了店家詳情一直跳頁
Day 12 又把 Bottom Sheet 的行為固定成：

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

Expanded
→ 再看完整規則與導航

關閉
→ 回到原本地圖位置

Day 13 才是第一次真的把這條規則放進完整的手機畫面裡看
結果第一版出來後，下方資訊區直接顯示店名、評分、營業狀態、距離、四個工作資訊卡、評論摘要、照片區，以及電話與 Google Maps 導航
資訊本身排得不差，最底下的「電話／開啟 Google Maps 導航」甚至很清楚，我反而不想為了改而改
真正的問題是：這比較像 Expanded 狀態，而不是剛點到一間店時的 Collapsed 狀態
它一出現就吃掉大半畫面，地圖從主要探索區瞬間變成上方的一小塊
所以第二輪要補的不是更多內容，而是把 Bottom Sheet 的兩個狀態真的做出差異：Collapsed 只留下店名、營業狀態、距離與 2～3 個核心工作資訊；使用者真的想看細節，再往上展開完整規則與導航

第一版真的出問題了，第二輪 Prompt 才有東西可以寫

原本我刻意沒有先替 Stitch 寫好錯誤清單現在第一版真的出來，反而很好處理：不用再跟 AI 說「幫我優化手機版」，直接把畫面上看到的問題一條一條交回去

請調整目前這版 390px Mobile UI

實際檢查第一版後，我發現以下問題：

1. 頂部 Filter Chip 超出螢幕寬度，最右邊的「高速 Wi-Fi」已經被截斷
請保留常用條件，但讓使用者知道還有其他 Filter，不要把所有 Chip 強制折成多排

2. Selected Marker 顯示太多工作資訊，和下方店家資訊重複
Marker 只保留店名、營業狀態與一個最重要的工作屬性即可

3. 點選店家後，下方資訊區直接佔用太多地圖空間
請把 Bottom Sheet 明確分成 Collapsed / Expanded 兩種狀態

Collapsed：
- 店名
- 營業狀態
- 距離
- 2～3 個核心工作資訊
- 可以向上展開

Expanded：
- 插座
- Wi-Fi
- 環境噪音
- 時間限制
- 簡短評論
- 電話
- Google Maps 導航

4. 地圖仍然是探索頁的主要操作區域
Bottom Sheet 在 Collapsed 狀態時，不要遮住過多地圖

請沿用目前的 Typography、Button、Filter Chip、Cafe Card、Map Marker 與 Bottom Sheet Design System

不要新增收藏、會員、回報、排行榜或其他功能
不要重新設計整體視覺風格
不要改變主要 User Flow

這次 Prompt 跟第一輪最大的差別，是它沒有再談「做一個好的 Mobile UI」，而是直接處理三個已經看得到的問題：Filter 被截斷、Marker 資訊重複、Bottom Sheet 太早進入完整狀態
這樣比較像真的在改產品：實際發生什麼，我就改什麼

第二輪出來了：有改到，但沒有全部改完

第二輪 Stitch 跑完後，前面三個問題裡，有兩個改善得很明顯
第一個是 Bottom Sheet 終於比較像真正的 Collapsed 狀態
第一版一點店家，下面直接把四個工作資訊卡、評論、照片、電話跟導航全部攤開；第二版只留下店名、評分、營業狀態、距離、三個工作條件、導航，以及「向上滑動查看完整規格」
地圖因此拿回不少空間，至少現在看起來還像一個「找附近咖啡廳」的地圖，而不是上面剩一小條地圖、下面全是店家資料
第二個是 Selected Marker 也收斂了
原本 Marker 裡同時塞插座、Wi-Fi、安靜等工作資訊，下面又再講一次；第二版已經縮成店名、營業資訊，再留一個「插座全」作為工作條件提示
這兩個修改我會留下
但 Stitch 沒有全部照單全收

最右邊的「高速 Wi-Fi」還是被切掉了

所以這一輪大概可以算三題改對兩題
這也滿符合這幾天用 AI 改 UI 的感覺：Prompt 寫了幾條，不代表下一版就會一次全部完成

📸 圖片 4｜第二輪 Stitch Mobile UI

不重做整頁，第三輪只修 Filter

既然 Marker 跟 Bottom Sheet 已經往我要的方向走，我不想為了一顆 Filter 又叫 Stitch 重畫整頁
第三輪只處理一件事：讓 Filter 在 390px 手機寬度下可以操作，而且使用者知道右邊還有東西

目前 Mobile UI 其他部分先不要修改。

只處理頂部 Filter Chip 的手機顯示問題。

目前問題：
最右邊的「高速 Wi-Fi」仍然被畫面截斷，
使用者無法清楚判斷右側還有其他篩選條件。

請調整 Filter 區域：

1. 保留單排 Filter Chip
2. 不要折成兩排或多排
3. 使用橫向滑動
4. 右側要有視覺提示，讓使用者知道還可以往右滑
5. 不要縮小文字到難閱讀
6. 不要改動 Search、Map、Marker、Cafe Card 或 Bottom Sheet

請只修改 Filter 區域。

這一輪我反而刻意把範圍縮到很小
前兩輪是在叫 AI 幫我整理整個 Mobile First 畫面，第三輪比較像平常真的在改 UI：哪裡有問題，就只動哪裡，不要每修一顆按鈕順便把客廳重新裝潢

第三輪只修 Filter，這次可以收工了

第三輪結果出來後，我第一件事就是看最上面那排 Filter
這次 Stitch 沒有把所有 Chip 硬塞進 390px，也沒有為了塞進去把文字縮得很小，更沒有折成第二排
它保留單排 Filter，最右邊故意露出下一顆 Wi-Fi Chip 的一小部分，再加上一點淡出的效果
看起來只是很小的改動，但操作邏輯其實不太一樣
第一版比較像：

高速 Wi-Fi 被畫面切掉
→ 看起來像版面壞掉

第三版變成：

下一顆 Chip 故意露出一部分
→ 暗示右邊還可以繼續滑

同樣都是「沒有完整顯示」，前者比較像 Bug，後者則是在利用畫面告訴使用者這一排可以橫向操作
而且這次 Stitch 也真的沒有去亂動其他已經修好的東西
Marker 還是第二輪收斂後的版本，Bottom Sheet 也維持 Collapsed 狀態，地圖沒有因為修 Filter 又被重新改版
這點對我來說反而比 Filter 本身更重要
因為第三輪 Prompt 已經不是叫 AI「幫我把畫面做得更好」，而是很明確地限制：只修這一塊，其他不要碰

📸 圖片 5｜第三輪只修 Filter 後的結果

到這裡，我決定不要再開第四輪

其實繼續看一定還找得到可以調的地方
字距可以再修、Marker 可以再瘦一點、Bottom Sheet 高度也可以繼續磨
AI 做 UI 最容易讓人上癮的地方，大概就是「再改一下應該會更好」
但做到第三輪，我反而覺得該停了
因為現在不是在參加 Dribbble 比賽

Day 13 真正要驗證的是：Day 12 整理出來的 Design System，放進 Mobile First 的操作情境後，能不能撐住原本的 User Flow

目前至少幾件事情已經成立：搜尋跟 Filter 還能操作、地圖仍然是主要探索區、選到店家後不會立刻被完整資訊淹沒、需要細節時可以再展開 Bottom Sheet，最後也有很明確的 Google Maps 導航
對 MVP 來說，我覺得夠了
不然照這個速度，30 天做到 Day 30，我可能還在調 Filter Chip

📸 圖片 6｜Mobile Before / After

Day 13 最後留下來的東西

回頭看今天，其實不是「用 Stitch 做一張手機 Mockup」這麼簡單
真正的過程是：

Design System → Mobile 第一版 → 找到三個問題 → 第二輪修掉兩個 → 剩下 Filter → 第三輪只修單一問題 → 停止繼續加戲

這比直接放一張最後看起來很漂亮的 Mockup 更有價值
因為真正開始用 AI 做產品後，我越來越覺得，Prompt 不是寫一次就結束，而是每一輪都要根據上一輪真的產生了什麼，再決定下一步
而且還有另一件事也很重要：知道什麼時候不要再 Prompt
這樣 Day 12 跟 Day 13 的關係就比較清楚了
Day 12 是：

把前面生成的 UI 收成規則

Day 13 是：

拿這些規則回去生成真正的 Mobile First 畫面，看看規則放進真實操作情境後會不會打架

而 Antigravity 還不用出場
等 Day 14 把 PRD、User Flow、Sitemap、資料欄位、Design System 跟 Mobile UI 全部對過一次，確認沒有互相矛盾，再進開發比較合理
明天就先做這件事：

開發前最後一次 MVP 設計驗收