檢視、編輯與匯出

檢視設計系統

開啟 Design System 面板，即可查看任一螢幕目前使用中的設計系統。面板會顯示解析後的 token：色彩、字型、圓角程度、間距與元件模式。

若專案有多個設計系統，面板會顯示套用到目前所選螢幕的那一個。

設定預設設計系統

若想讓某個設計系統套用到專案中之後產生的所有螢幕，請將它選為專案預設。在此之後產生的新螢幕會自動繼承它的 token。

既有螢幕不會被回溯更新。若要讓它們保持一致，請逐一為它們套用該設計系統。

透過 Design System 面板編輯

Design System 面板支援直接編輯使用中的設計系統。在這裡所做的變更會同時更新結構化 token 與 DESIGN.md 摘要。

可編輯的屬性包括：

• 色彩調色盤：primary、secondary、tertiary 與 neutral 基礎色
• 字體排印：headline、body 與 label 字型家族
• 圓角程度：圓角半徑級距

若需要更細緻的變更（元件準則、Do’s and Don’ts 或概述敘述），請直接編輯 DESIGN.md 的 markdown。

隨專案匯出

匯出專案時，DESIGN.md 檔案會與產生的螢幕一起包含在 zip 中。這讓下游的使用者（開發者、其他設計工具或其他代理程式）取得一份可攜帶的設計系統紀錄。

匯出的 DESIGN.md 是一份獨立文件，不需要依賴 Stitch 就能發揮作用。

在 Stitch 之外工作？

@google/design.md CLI 可依照正式規範驗證任何 DESIGN.md 檔案、檢查 WCAG 對比度，並將 token 匯出為 Tailwind 或 W3C Design Token 格式。無論 DESIGN.md 是由 Stitch 產生或親手撰寫，都能使用。