產生與編輯螢幕

設計最難的部分，就是跨過空白頁面那一關。有了 Stitch CLI 與 /stitch 技能，你不必離開終端機，就能建立專案、產生初始螢幕、分支探索變體，並一次打磨一個細節。

建立專案並釘選

每張螢幕都活在一個 Stitch 畫布專案裡。建立新專案（或列出既有專案），並釘選到你的資料夾，之後就不必再傳入 --project：

stitch create project --title "Analytics Workbench"
stitch config set project <project-id>

如果你在已安裝 /stitch 技能（stitch agent-skills add）的程式碼代理程式中工作，也可以直接請 /stitch 在同一輪建立專案並產生第一張螢幕。

產生第一張螢幕

第一道提示詞不必寫成長篇小說。描述這張螢幕是什麼、整體氛圍，以及該放上哪些具體內容：

搭配 --device DESKTOP 或 --device MOBILE 執行 stitch generate screen：

stitch generate screen \
  --title "Revenue Overview" \
  --device DESKTOP \
  --prompt "A revenue telemetry dashboard for a subscription business on a warm editorial paper surface (#FAF8F5) with deep charcoal ink (#181615), featuring a 12-month revenue comparison chart, a three-column KPI summary strip, and a recent transactions table."

想大幅嘗試時，探索變體

何必將就於第一個看到的版面？變體讓你一次分支產生 1 到 5 個不同選項。

執行 stitch generate variants 時，選擇你想讓 Stitch 變動的創意範圍（--creative-range）與著重層面（--aspects）：

• 當版面已經可行，只想測試更細微的字型、間距或色彩潤飾時，使用 REFINE。
• 當你想看到完全不同的版面（LAYOUT）、配色（COLOR_SCHEME）或字體排印（TEXT_FONT）時，使用 EXPLORE 或 REIMAGINE。

stitch generate variants \
  --screen <screen-id> \
  --count 3 \
  --creative-range EXPLORE \
  --aspects LAYOUT,COLOR_SCHEME \
  --prompt "Explore a compact high-density layout and a high-contrast dark theme"

一次只改一件事

當你有了喜歡的螢幕，就從大範圍探索切換到定向編輯。挑一個你想做的改變，並具體說明要改 什麼、以及 如何 改：

指定具體元件

具體的視覺指示

新的 UI 元素

把頂部的 KPI 卡片換成精簡的單行橫向資訊列，並在右上角頁首加入日期範圍選擇器。

把這段指示傳給 stitch edit screen：

stitch edit screen <screen-id> \
  --prompt "Replace the top KPI cards with a compact single-line horizontal ticker and add a date-range selector in the top-right header."

在本機預覽並取出 HTML

想看看螢幕在真實瀏覽器中的感受，或讓程式碼代理程式檢查即時 DOM，請啟動本機預覽伺服器：

stitch serve

準備好把螢幕的 HTML 取回專案，或在瀏覽器中於 Stitch 畫布上開啟它時：

stitch get screen <screen-id> --code --output ./screens/revenue-overview.html
stitch open screen <screen-id>

想了解如何結合自訂藝術作品、stitch serve 與程式碼代理程式的互動編輯，請參閱搭配程式碼代理程式疊代。