審查應用程式 UI

隨著功能不斷上線，實作很容易偏離你的設計系統。這裡改了個字重，那裡冒出沒有依據的卡片邊框，或某個十六進位色碼被近似值取代。

透過 Stitch CLI 與 /stitch 技能，你可以執行本機設計審查，將實際執行中的應用程式與你的 DESIGN.md 比對。審查的每個步驟都在你的電腦上本機執行，不會發出雲端呼叫。

使用 /stitch 技能執行審查

儲存庫中有了 DESIGN.md，且已安裝 Stitch 技能（stitch agent-skills add）後，啟動開發伺服器，請程式碼代理程式審查某個路由：

代理程式會偵測你執行中的本機開發伺服器，擷取即時且完成水合的 DOM（.stitch/captured-dom.html）以及 1280x800 驗證截圖（.stitch/verify-capture.png），並將兩者與 DESIGN.md 比對。

你得到的不是含糊的建議，而是一份依優先順序排列的問題清單，每一項都以實際的 CSS 選擇器、截圖區域和 DESIGN.md 規則為依據——代理程式會停下來，讓你選擇要先套用哪些修正。

從終端機擷取頁面

你也可以先自行擷取快照，再交給代理程式：

stitch capture browser \
  --url "http://localhost:5173/dashboard" \
  -o .stitch/captured-dom.html

執行 stitch capture browser 會在本機寫出兩個檔案：

• .stitch/captured-dom.html——完成水合的 DOM，包含計算樣式與結構標記。
• .stitch/verify-capture.png——實際在視口中渲染結果的 1280x800 截圖。

如果截圖顯示登入畫面或彈出視窗阻擋了頁面，請直接在開啟的瀏覽器分頁中登入，並在不重新載入的情況下重新擷取該使用中的分頁：

stitch capture browser --page 1 -o .stitch/captured-dom.html

審查時該注意什麼

無論你讓 /stitch 執行稽核，或自行檢查快照，都請專注於四項檢查：

• 顏色與表面權杖——背景、邊框與主要強調色是否使用 DESIGN.md 中的確切十六進位色值，或者有隨意加入的灰色混了進來？
• 字體排印與數字——標題、內文與資料讀數是否符合你的字級階層與表格式數字規則？
• 空間節奏——內距與間隙值是否遵循你的 4px/8px 網格，或者元素被擠在容器邊緣？
• 視覺克制——是否在單純排版會更清爽的地方，出現了多餘的狀態圓點、膠囊標籤或巢狀邊框？

在 Stitch 畫布上測試視覺修正

如果稽核發現版面問題，而你想在改動應用程式的程式碼之前先探索幾個視覺選項，可以直接把擷取到的快照上傳到 Stitch 畫布專案：

stitch upload screen .stitch/captured-dom.html \
  --route "/dashboard" \
  --title "Dashboard Current"

接著使用 stitch edit screen 或 stitch generate variants，在畫布上試做版面變更，再把勝出的設計帶回你的程式碼庫。