同步設計系統

如果每張螢幕都從空白開始產生，你的顏色、字型與間距就會在螢幕之間逐漸走樣。DESIGN.md 能為你的 Stitch 專案提供視覺記憶。

把 DESIGN.md 檔案綁定到 Stitch 畫布專案後，你產生（stitch generate screen）或編輯（stitch edit screen）的每張螢幕都會自動遵循那些權杖與版面規則。

使用 /stitch 技能產生並同步

建立並同步 DESIGN.md 最快的方式，是使用內附的 /stitch 技能（stitch agent-skills add）。你不必手寫權杖定義。

如果你在既有程式碼庫中工作，請程式碼代理程式擷取你目前的樣式，並綁定到你的 Stitch 專案：

如果你是從零開始一個新概念，描述你想要的氛圍，讓 /stitch 技能撰寫規格並替你上傳：

在背後，該技能會視需要將你的目錄連結到 Stitch 專案、撰寫 ./DESIGN.md（或 .stitch/DESIGN.md）、驗證結構，然後上傳到 Stitch 畫布。

成就一份強大 DESIGN.md 的要素

無論 DESIGN.md 是由代理程式撰寫，還是由你自己動手，請聚焦於四項最能有效引導視覺產生的要素：

• 材質感與表面隱喻——描述表面應該帶給人什麼感覺（例如溫暖紙張、拉絲鋁或高對比墨色），並明確指出該省略什麼（例如多餘的狀態圓點、漂浮的膠囊標籤或巢狀卡片邊框）。
• 附上確切十六進位色碼的調色盤——用真實的十六進位色值定義背景表面、結構邊框、主要強調色與文字墨色，讓 Stitch 不必猜測。
• 字體排印階層——選定主要 UI 字型、用於表格式數字的等寬字型，以及從展示標題一路到說明文字的清晰字級階層。
• 空間版面與網格——設定目標視口寬度、4px/8px 間距節奏與內距規則，讓螢幕保持通透且對齊。

如果你在 Stitch 畫布上已有一張完全命中理想樣貌的螢幕，也可以取出它的 HTML（stitch get screen <screen-id> --code），請代理程式把它的 CSS 變數與字型選擇轉化成專案的 DESIGN.md。

從終端機同步

每當你直接編輯 DESIGN.md，就用 stitch upload design 把變更推送到 Stitch 畫布：

stitch upload design DESIGN.md

如果你還沒為資料夾釘選預設專案（stitch config set project <project-id>），請傳入 -p <project-id>。上傳會在你的 Stitch 專案上建立或更新設計系統，讓你下一次產生就能套用新規則。

將設計系統套用到既有螢幕

新螢幕會自動套用專案目前啟用的設計系統。如果你想讓畫布上較舊的螢幕換上更新後的 DESIGN.md 樣式，可以列出專案的設計系統，並用 stitch edit screen 直接套用其中一個：

stitch find design-systems
stitch edit screen <screen-id> --design-system <design-system-id>