Day 15 到 Day 17 一路都在後端打轉，analyzeCodeFlow 現在能穩定吐出 { issues: [{ title, severity, explanation }] }。但這些資料只躺在 Developer UI 的 JSON 面板裡，看起來不像一個「工具」。今天換個口味，不碰後端，用 Google Stitch 把這份資料「畫」出來。

今天做三件事：

1. 認識 Stitch：它是什麼、跟自己手刻 HTML 差在哪
2. 用兩份 prompt 做對照：一句話描述 vs 對照 Day 17 schema 的結構化描述
3. 用對話迭代兩輪，記下「什麼指令有用、什麼沒用」

今天不寫程式碼，也不動 devpulse/，只需要瀏覽器和 Google 帳號。prompt 與截圖我存在 docs/stitch-day18/（資料夾名稱依你的倉庫調整）。

一、Stitch 是什麼：給畫面一份「描述契約」

Stitch 是 Google Labs 的 AI 介面設計工具，在瀏覽器裡執行，只需要 Google 帳號（網址 stitch.withgoogle.com）。2026 年 3 月的改版加入了無限畫布、語音互動與 DESIGN.md，今天只用最基本的文字輸入。

這跟 Day 17 是同一個道理：flow 要先把輸入輸出講清楚，Stitch 也是。prompt 寫得越像一份資料規格，畫面就越貼近你要的。

二、先決定要畫什麼：把 Day 17 的 schema 對應到畫面

最後一列是目前 flow 沒有的資料。今天先在 prompt 裡要求假資料，Day 29 才接上真正的審查結果。

三、實驗一：一句話 prompt

幫我做一個程式碼審查的儀表板

觀察：【版面、配色、欄位是不是你要的？】多數評測都提到 Stitch 的預設產出偏通用，這次實測有沒有印證，以你看到的為準。

四、實驗二：結構化 prompt

這次把 Day 17 的欄位、嚴重度顏色、版面順序全部寫清楚：

為「DevPulse」設計一個桌面版網頁儀表板，用來顯示程式碼審查結果。
介面文字使用繁體中文。

【使用者】自己寫 side project 的開發者，每天下班後跑一次審查。
【風格】深色模式、乾淨、有開發者工具的質感，主色青綠色，標題可用等寬字體。

【版面，由上到下】
1. 頂部標題列：DevPulse 標誌 + 「代碼健康看板」
2. 四張統計卡：問題總數、高風險、中風險、低風險
3. 左側：嚴重度分佈圖（甜甜圈圖）；右側：最近審查列表
4. 下方：問題詳情清單

【資料欄位】
問題詳情每筆包含：
- title：一句話標題
- severity：只有 high / medium / low，high 紅色、medium 橘色、low 藍灰色
- explanation：50 字內的白話說明
最近審查每筆包含：檔名、審查時間、問題數量

請用 3 筆與 JavaScript 常見 Bug 相關的假資料（例如 forEach 內誤用 await、
SQL 字串拼接、深層物件取值未防禦）。

五、用對話迭代

不重寫 prompt，直接追問：

1. 把四張統計卡縮小一點，並讓「高風險」那張用紅色邊框強調
2. 問題詳情改成可展開的卡片，預設只顯示 title 和 severity

這一步想觀察的是：Stitch 是只改指定的地方，還是整頁重畫？

六、實測紀錄

| 輪次 | 我說了什麼 | Stitch 的反應 |
| --- | --- | --- | --- |
| v1 | 一句話 prompt | 提供多種範例讓使用者選擇 |
| v2 | 結構化 prompt | 根據結構化精準達成要求內容 |
| 迭代 1 | 縮小統計卡、強調高風險 | 只修改對應的局部內容 |

額度提醒： Stitch 免費但有使用額度，各處公布的數字不一致。我的帳號設定頁顯示：【截圖或填入】。
限制： 每個 prompt 只跑一次，生成結果有隨機性，這只是觀察，不是評比。

明日預告

畫面有了，但還只是在 Stitch 裡。明天 Day 19：取出 Stitch 成果，將生成的 Tailwind CSS 移植到本地，讓 DevPulse 儀表板在自己的瀏覽器裡開起來。

參考資料

• Google Stitch
• Introducing "vibe design" with Stitch（Google 官方部落格，2026-03-18）