用程式碼代理程式迭代設計

當你把程式碼代理程式與 Stitch CLI 搭配使用，終端機就成了設計工作室。最好的成果，不是向代理程式索取通用的應用程式範本，而是給 Stitch 一個真實的視覺錨點，在第一輪就把構圖乾淨地框定好，然後在即時 HTML 上反覆疊代。

從藝術作品著手，帶動設計

如果從空白提示詞開始，你可能只會得到千篇一律的色調。先給 Stitch 一些真實素材，讓它有東西可以回應。

在向 Stitch 提出 UI 提示詞之前，先產生要放進介面裡的藝術作品。你可以到 Google AI Studio，使用 Gemini 3 Pro Image（gemini-3-pro-image）以 1:1 長寬比產生，並要求模型填滿整個畫面、不留邊界，這樣就能得到純粹的專輯封面，而不是帶有邊框、貼在牆上的模擬展示。

以下是兩張專輯封面所用的提示詞——Late Sun on the Hudson（溫暖的焦赭色與赭黃色）與 Cobalt Shadows（暮色的鈷藍與靛藍）：

PROMPT

Full-bleed edge-to-edge square impasto oil painting filling the entire 1:1 frame to all four edges (not a photo of a canvas on a wall; the image itself is the painting surface edge-to-edge). Expressive palette-knife and brush strokes depicting late afternoon sun over the Hudson River: warm burnt sienna, golden ochre, and cadmium orange sunlight reflecting across deep ultramarine and Prussian blue water, with atmospheric skyline silhouettes in the distance.

PROMPT

Full-bleed edge-to-edge square impasto oil painting filling the entire 1:1 frame to all four edges (not a photo of a canvas on a wall; the image itself is the painting surface edge-to-edge). Expressive palette-knife and brush strokes depicting twilight over a quiet harbor: deep cobalt blue, Prussian indigo, and cool slate-violet water with pale moonlight silver and warm amber harbor reflections.

Late Sun on the Hudson——1:1 厚塗油畫

曲目 01 — Late Sun on the Hudson

Cobalt Shadows——1:1 厚塗油畫

曲目 02 — Cobalt Shadows

把產生的圖片存到本機，再用 stitch upload screen 上傳到你的 Stitch 專案：

stitch upload screen ./hudson-album-art.png \
  --title "Late Sun on the Hudson"

stitch upload screen ./cobalt-shadows-art.png \
  --title "Cobalt Shadows"

藝術作品放上畫布後，你可以用 stitch get screen <screen-id> --format json 取得它的託管 URL，或直接編輯已上傳的螢幕。在提示詞中傳入該託管 URL，就能讓 Stitch 逐像素嵌入你原本的藝術作品，而不是自行虛構一個佔位圖。

在第一道提示詞就框定設計

當你一次要求整個應用程式時，模型總愛在每個角落塞滿狀態圓點、膠囊標籤和假的導覽列。清楚告訴 Stitch 畫布上該有什麼，其餘一概不要。

想獲得聚焦且帶有工作室取景感的成果，可以依循由四個節拍組成的配方：

PROMPT

CanvasCenter a single, sculptural music player card on a completely empty, solid warm stone background (#EAE6DF) with generous outer margins. The outer background canvas must remain completely blank with no text, headers, or footers outside the player card.

PrinciplesEvery element and piece of text inside the card must be essential and earn its place. Include only the album sleeve with its vinyl record, the exact titles, numerals, and controls listed below—render all text as plain, unbordered words without status dots, badge containers, or extra technical labels.

ArtworkInside the centered player card (warm alabaster surface #FAF8F4 with deep espresso ink #181615, set in Plus Jakarta Sans), display the uploaded square impasto oil painting on the left. Extending smoothly from behind the right edge of the square sleeve with about 28% of the disc visible, render a tactile matte-black vinyl LP record with subtle concentric micro-grooves, realistic vinyl sheen, and a warm terracotta center label.

PlaybackOn the right side of the card, set the track title “Late Sun on the Hudson” in 30px bold Plus Jakarta Sans with artist name “Clara Vance” directly beneath in 16px muted warm grey. Below that, place a clean horizontal scrub bar (“02:14” to “05:48”) with a warm terracotta playhead handle, three centered playback controls (previous, solid espresso-ink circular play/pause button, and next), and a three-row tracklist showing only plain track numbers, titles, and durations (“02 Cobalt Shadows 04:12”, “03 Nocturne for Pier 17 06:05”, “04 Alabaster Study 03:49”).

對已上傳的藝術作品螢幕執行 stitch edit screen，以這幅畫為中心打造播放器：

stitch edit screen <screen-id> \
  --device DESKTOP \
  --prompt "Center a single, sculptural music player card on a completely empty, solid warm stone background (#EAE6DF)..."

Stitch 會圍繞你上傳的畫作建立播放器，並直接從筆觸中汲取溫暖的陶土色，運用在黑膠唱片中央標籤與進度軸上：

Stitch

在空白石材畫布上，帶有上傳厚塗油畫與實感黑膠唱片的雕塑感音樂播放器卡片

在本機預覽並加入互動

靜態截圖只能說明一半的故事。執行 stitch serve 啟動本機預覽伺服器，讓你和程式碼代理程式能在 localhost 上檢查即時 DOM：

stitch serve

Stitch

Stitch Serve 終端機工作台正在 localhost:3300 提供 Sculptural Music Player Card

現在挑一個能讓設計鮮活起來的改變。由於 Stitch 輸出的是真正的 HTML、CSS 和 JavaScript，你不必停留在靜態版面。請 Stitch 把曲目清單和播放控制按鈕接上互動，讓點選曲目時能切換目前歌曲、封套畫作與黑膠標籤顏色：

PROMPT

InteractionMake this music player interactive so clicking any track in the tracklist or clicking the previous and next track buttons switches the active track, updates the title, duration, and scrub bar, and swaps the square album sleeve artwork and vinyl center label color.

PreservationKeep the exact same clean, unadorned layout and blank #EAE6DF outer background canvas with no extra labels, status dots, or badges.

TracksInclude all four tracks in the interactive tracklist (“01 Late Sun on the Hudson 05:48”, “02 Cobalt Shadows 04:12”, “03 Nocturne for Pier 17 06:05”, “04 Alabaster Study 03:49”) with Track 02 (“Cobalt Shadows” by Clara Vance, elapsed “01:18” of “04:12”) active by default. Swap between the uploaded Hudson sunset painting (terracotta #C85A32 vinyl label and playhead) for Track 01 and the uploaded twilight harbor painting (deep cobalt #2C5E9E vinyl label and playhead) for Track 02, highlighting the active row in bold #181615 ink while inactive tracks rest in muted #7D7571 grey.

stitch edit screen <screen-id> \
  --device DESKTOP \
  --prompt "Make this music player interactive so clicking any track in the tracklist or clicking the previous/next track buttons switches the active track..."

在執行中的 stitch serve 工作階段裡開啟更新後的螢幕，逐一點選佇列中的曲目。選擇 Cobalt Shadows 會把封套換成暮色港灣畫作，並將黑膠標籤與播放頭從溫暖的陶土色轉為深鈷藍：

Stitch

已切換到曲目 02（Cobalt Shadows）的互動式音樂播放器，搭配暮色港灣厚塗畫作與深鈷藍黑膠點綴

持續疊代

你已經掌握這套循環：用真實素材建立錨點、用明確限制框定螢幕，並在 localhost 上測試互動狀態。當設計感覺對了，就把 HTML 拉進程式碼庫，或繼續一步一步打磨。

產生與編輯螢幕——從 CLI 探索變體與定向編輯。
同步設計系統——讓本機的 DESIGN.md 與你的 Stitch 專案保持同步。
CLI 命令參考——stitch upload screen、stitch edit screen 和 stitch serve 的完整旗標參考。