前九天一直在砍東西。
從需求、Persona、MVP、PRD、User Flow 一路砍到 Sitemap，最後網站甚至只剩下一個探索主畫面，加上一個 Bottom Sheet。
今天終於可以開始碰畫面了。
我這次用的是 Google Stitch。
但我不想一打開就丟一句「幫我做一個咖啡廳網站」。
這種 Prompt 當然也能生出東西，只是很容易得到一個看起來很完整、實際上跟前九天沒什麼關係的網站。
所以今天我想看的很簡單：

前面整理好的需求丟進 Stitch，它到底會畫成什麼樣子？

先把前九天真的有用的東西濃縮一下

我沒有把整份 PRD 全貼進去。
資訊塞得越多，不代表 Stitch 就會理解得越好。
我只留下會直接影響畫面的幾件事：

• Mobile First
• 打開網站就直接進探索，不做獨立 Landing Page
• 可以用目前位置，也可以搜尋地點
• 地圖／列表是同一個探索畫面的兩種看法
• Filter 直接放在探索流程裡
• Cafe Card 要先看到插座、Wi-Fi、限時／久坐
• 詳細規則用 Bottom Sheet 補充
• 不要先塞登入、收藏、排行榜或社群功能

這些就是前九天一路刪到最後留下來的東西。
前面都還停在文字跟流程圖，今天第一次真的要看它塞進手機畫面會長什麼樣子。

📸 圖片 1｜丟進 Stitch 前的需求整理

第一次開 Stitch，我只叫它做探索畫面

建立新專案後，我沒有要求它一次做完整網站。
Sitemap 都已經砍到只剩這麼一點，如果這時候又叫 Stitch 自由發揮首頁、會員中心、推薦頁，那前面真的白忙了。
所以第一個 Prompt 我只要求它處理探索畫面：

設計一個 Mobile First 的「遠端工作咖啡廳探索」介面。

使用者情境：
人在陌生地區，想快速找到一間適合帶筆電工作的咖啡廳。

主要畫面需要：
- 目前位置／地點搜尋
- 地圖與咖啡廳列表切換
- 工作條件 Filter
- Cafe Card 直接顯示距離、營業狀態、插座、Wi-Fi、限時／久坐資訊
- 點擊 Cafe Card 後，以 Bottom Sheet 顯示更完整的店家資訊與 Google Maps 導航

不要加入：
- 獨立 Landing Page
- 登入牆
- 會員 Dashboard
- 排行榜
- 社群 Feed
- AI 聊天框

風格以手機單手操作、資訊容易掃讀為優先。
不要做成旅遊雜誌，也不要過度使用漸層。

我沒有寫「3 分鐘內找到咖啡廳」這種數字。
前面已經踩過幾次這種坑。沒有真的測過，就先幫使用者訂一個很精準的時間，看起來很像 KPI，其實只是自己猜的。
這裡先把使用情境跟畫面需求講清楚就好。

📸 圖片 2｜Stitch 新專案＋第一個 Prompt

第一版先別急著改

Prompt 送出去後，我先把第一版完整留下來。
AI 畫 UI 很快，看到哪裡怪，很容易順手補一句 Prompt 叫它改。改個幾輪之後，只剩最後的成品，第一版到底哪裡有問題反而忘光了。
所以這次先不動。
我想先看看 Stitch 到底怎麼理解剛剛那段需求。

📸 圖片 3｜Stitch 第一次生成的完整 UI

第一眼先不看漂不漂亮

第一版出來後，我先不管配色、字體或圓角漂不漂亮。
先檢查幾個更基本的東西：

• 打開是不是直接看到探索，而不是突然多一個品牌首頁
• 地圖跟列表有沒有被拆成不同頁面
• Filter 有沒有在主要操作範圍裡
• Cafe Card 能不能一眼看到工作資訊
• 詳細資訊是不是用 Bottom Sheet，而不是又跳走
• 有沒有自己加登入、會員、AI 助理之類我沒要求的東西

如果連這些結構都不對，現在調按鈕顏色也沒什麼意義。

畫得漂亮是一回事，有沒有畫到我要的產品是另一回事。

📸 圖片 4｜第一版 UI 的結構檢查

真正放進手機後，問題才開始跑出來

把第一版完整看過一次後，我先記了五個比較明顯的問題。

1. 工作資訊塞太多了

前面一直在整理遠端工作需要哪些資料，但真的全部塞進畫面後，馬上變得很像規格表。
使用者現在只是想判斷「這間店適不適合工作」，第一眼其實不用知道所有細節。

2. 地圖上的資訊反而太少

現在還是要先點某間店，才比較看得到完整資訊。
但我希望還沒選店之前，就能先知道幾個會影響決定的狀態，例如 Wi-Fi、現在有沒有營業、環境偏安靜還是偏吵。
不然地圖只是告訴我「這裡有咖啡廳」，最後還是得一間一間點。

3. 單一店家的資訊拉得太長

手機畫面就這麼大，現在點進店家後，要往下滑一段才看得完，地圖也跟著被擠小。
資訊完整沒有錯，但第一層應該先放會影響「我要不要去」的東西，其他再往後排。

4. 插座用百分比，看起來很精準但沒什麼用

像「85% 座位有插座」第一眼很科學，但這個數字到底要怎麼量、多久更新一次，本身就是問題。
而且我找店時也不會真的在意 85% 還是 78%。
我比較需要知道的是：

• 幾乎每個座位都有
• 只有部分座位有
• 插座很少
• 不提供插座

少一點假精準，反而比較好判斷。

5. 噪音也不用精確到分貝

畫面寫「42 dB」看起來很專業，但我還得先知道 42 dB 到底算安靜還是吵。
咖啡廳的音量又會隨時間跟人數一直變，要維護精準分貝反而很麻煩。
對我來說，「安靜」、「一般」、「偏吵」，甚至直接標「適不適合開會」，都比一個分貝數更有用。
這也讓我重新確認前面資料欄位的方向：

資訊不是越精準越好，重點是能不能幫人做決定。

📸 圖片 5｜第一版最想改的 3 個地方

如果下一版只能先改三件事

問題列了一堆，但下一版我不想一次全改。
先抓三件最影響使用的：

1. 讓地圖資訊更明顯：不用先選單一店家，也能先看到大部分會影響工作決定的資訊。
2. 把重要資訊改成人真的看得懂的方式：插座不要用百分比，噪音也不用分貝數，改成比較直覺的狀態。
3. 把遠端工作規格清單再縮短：先留下會影響「要不要去這間店」的資訊，其他細節往後放。

做到這裡，我反而覺得第一版留著很有用。
前面幾天一直在文字、表格跟流程圖裡講探索頁、Cafe Card、Bottom Sheet。真的塞進一支手機後，才會發現有些東西在規格裡看起來很合理，放到畫面上卻很卡。
所以現在還不是調陰影、圓角或品牌色的時候。

先把資訊放對地方，再談漂亮。

今天先停在這個版本。
不是因為它已經可以用了，而是這個版本剛好把問題暴露得很清楚。
接下來我想拿同一個畫面，換幾種不同的 Prompt 寫法來改。
看看 Stitch 到底比較吃模糊的要求、很具體的指令，還是直接告訴它使用者要完成什麼事情。