以程式碼庫為基礎的原型設計

儲存庫連上 Stitch 工作區，並搭配一個 UI 原型製作優先事項後，Stitch 會檢視應用程式真正使用的路由與元件，直接在 Stitch 畫布上提出高工藝水準的 UI 原型。

工作區功能需要先在你的電腦上執行一次 stitch enable loop。請參閱連接儲存庫開始使用。

用 /stitch 技能推動程式碼庫原型製作

在已連接的儲存庫中呼叫 /stitch 時，程式碼代理程式會替你處理多路由探索與原型循環：

代理程式會檢視路由定義以找出主要檢視畫面，從本機開發伺服器擷取即時快照到你的 Stitch 畫布專案，並在工作區綜合分析完成後立即呈現候選解決方案。當你挑選喜歡的方案，代理程式就會在畫布上產生原型螢幕。

把應用程式路由放上畫布

在產生新功能原型之前，你的 Stitch 畫布專案需要既有檢視畫面的真實快照，以及你的 DESIGN.md 權杖。這樣一來，新原型看起來才會像你真正的產品，而不是通用範本。

從本機開發伺服器擷取核心路由，並將它們上傳為參考螢幕：

stitch capture browser --url "http://localhost:5173/dashboard" -o .stitch/dashboard.html
stitch upload screen .stitch/dashboard.html --route "/dashboard" --title "Dashboard"

stitch capture port --port 5173 --route "/schedule" -o .stitch/schedule.html
stitch upload screen .stitch/schedule.html --route "/schedule" --title "Schedule"

接著確認畫布專案已連結到工作區，且 DESIGN.md 已完成同步：

stitch loop link --project <project-id>
stitch upload design DESIGN.md

檢視 UX 洞察與建議解決方案

程式碼庫上傳完成（stitch upload code .），且 UI 原型製作優先事項已啟用（stitch create priority --template ui-prototyping）後，Stitch 會在背景分析你的路由，找出被動的資訊呈現、工作流程瓶頸與版面改善機會。

程式碼庫的初次綜合分析通常需要約 15 分鐘。你可以隨時查看工作區的洞察：

stitch find insights
stitch get insight <insight-id>

每項洞察會產生一個或多個候選解決方案——這些完整規格包含領域隱喻、DESIGN.md 規則，以及一段經過校準、以你上傳的參考螢幕為錨點的 Stitch 畫布提示詞：

stitch find solutions
stitch get solution <solution-id>

在 Stitch 畫布上產生原型

挑一個能解決你在意問題的解決方案，取得它的設計提示詞，然後在已連結的 Stitch 畫布專案上產生螢幕：

stitch generate screen \
  --title "Interactive Schedule Workbench" \
  --device DESKTOP \
  --prompt "<prompt from stitch get solution>"

用 stitch serve 在 localhost 上將新原型與既有螢幕並排預覽，或直接在 Stitch 畫布上開啟它：

stitch serve
stitch open screen <screen-id>