擷取執行中的應用程式

當你要重新設計既有頁面，或在既有應用程式中製作新功能的原型時，別從空白畫布開始。先把你實際執行中的 UI 帶到 Stitch 畫布上，讓後續編輯以真實的版面與樣式為基礎。

使用 /stitch 技能擷取路由

安裝 /stitch 技能（stitch agent-skills add）後，啟動本機開發伺服器，請程式碼代理程式把你的路由擷取到 Stitch 專案：

代理程式會自動偵測你執行中的 Vite、Next.js 或 Astro 開發伺服器連接埠，為每個路由擷取完成水合的 DOM 與 1280x800 驗證截圖，確認沒有登入彈出視窗阻擋頁面，然後把螢幕上傳到你的 Stitch 專案。

從終端機擷取與上傳

CLI 把擷取與上傳拆成兩個獨立命令，讓你隨時先檢查磁碟上擷取到的內容，再決定是否傳送給 Stitch。

在無頭 Chrome 中擷取用戶端渲染的應用程式

若你的 React、Next.js、Vite 或 Vue 應用程式需要 JavaScript 水合、WebFonts 與計算樣式，請使用 stitch capture browser：

stitch capture browser \
  --url "http://localhost:3000/checkout" \
  --wait-for "#checkout-root" \
  -o .stitch/checkout.html

傳入 -o 會同時寫出正規化後的 HTML 檔案（.stitch/checkout.html）與 1280x800 驗證截圖（.stitch/verify-capture.png），讓你一眼就能確認擷取結果。

透過 HTTP 或從靜態檔案擷取

如果你處理的是本機連接埠上的伺服器端渲染 HTML，或靜態建置檔案，請使用 stitch capture port 或 stitch capture file：

stitch capture port --port 5173 --route "/dashboard" -o .stitch/dashboard.html
stitch capture file ./dist/index.html -o .stitch/index.html

不必改動程式碼就能通過登入畫面

絕對不要只為了繞過登入畫面進行擷取，就改動應用程式的原始碼。stitch capture browser 提供三種乾淨的方式來擷取已驗證的畫面：

• 直接在開啟的分頁中登入：在即時瀏覽器視窗中登入或切換分頁，然後在不重新載入的情況下凍結該使用中的分頁：

  stitch capture browser --page 1 -o .stitch/dashboard.html
  

• 傳入已儲存的 cookie 與 localStorage：將 --storage 指向 JSON 儲存狀態檔案：

  stitch capture browser \
    --url "http://localhost:4321/schedule" \
    --storage .stitch/storage.json \
    -o .stitch/schedule.html
  

• 在快照前執行登入指令碼：傳入 --prepare，在擷取 DOM 之前執行小型設定指令碼：

  stitch capture browser \
    --url "http://localhost:4321/login" \
    --prepare .stitch/signin.js \
    --wait-for "#dashboard" \
    -o .stitch/dashboard.html
  

上傳到 Stitch 畫布

本機的 .html 快照或圖片確認無誤後，用 stitch upload screen 把它放到你的 Stitch 畫布專案：

stitch upload screen .stitch/checkout.html \
  --route "/checkout" \
  --title "Checkout"

上傳應用程式路由時請傳入 --route，讓 Stitch 把該螢幕記錄為 /checkout 的標準參考。上傳後，你可以用 stitch open project 開啟專案，或開始用 stitch edit screen 在該螢幕上疊代。