在 Google Stitch 中，DESIGN.md 具備獨特的「雙面性（The dual representation）」。它不僅僅是一份文件，更是連接人類設計思維與 AI 執行準度的橋樑。
您所閱讀與編輯的 Markdown 內容，是設計系統的「人類友善摘要」；而在底層，Stitch 會維護一組「結構化標記（Structured tokens）」，這是它在生成 UI 時用來強制保持一致性的精確數值。無論您是在 Markdown 中寫下模糊的「溫暖色調、圓潤風格」，還是精確的 #2665fd、8px 圓角，Stitch 都能理解並同步這兩種表述方式。
簡單來說：Markdown 是為了協作而生，Tokens 是為了強制規範而存在。
標準文件結構 (Sections)
每一份 DESIGN.md 都遵循著固定的結構。如果某些區塊不適用於您的專案，您可以將其省略，但必須保持原有的順序。以下是依序排列的六大核心區塊：
1. 總覽 (Overview)
這是對設計整體外觀與氛圍的全面描述。您可以在這裡定義產品的「性格」：是活潑還是專業？是資訊密集還是寬敞透氣？當沒有具體的 Token 可套用時，這個區塊將引導 AI 代理做出高階的設計決策。
範例：
Overview
A professional, data-dense interface for a corporate ESG supplier management system. Accessibility-first design with high contrast and intuitive matrix cross-filtering.
2. 色彩 (Colors)
定義主要 (Primary)、次要 (Secondary)、第三 (Tertiary) 與中性 (Neutral) 色彩計畫。每一種顏色都必須包含 Hex 色碼 以及 它的角色（告訴 AI 該用在哪裡）。 Stitch 還會根據這些基礎值自動生成衍生的命名色彩（如 surface、error 等），這些都遵循 Material Design 的色彩角色慣例。
範例：
Colors
Primary (#2665fd): CTAs, active states, key interactive elements
Secondary (#6074b9): Supporting actions, chips, toggle states
Tertiary (#bd3800): Accent highlights, badges, decorative elements
Neutral (#757681): Backgrounds, surfaces, non-chromatic UI
3. 排版字體 (Typography)
定義跨越字體階層（display, headline, title, body, label）的字型家族（Font families）與其角色。主標題與內文使用相同字體可傳達一致性，混搭字體（如襯線標題搭配無襯線內文）則能創造視覺對比。
範例：
Typography
Headline Font: Inter
Body Font: Inter
Label Font: Inter
Headlines use semi-bold weight. Body text uses regular weight at 14–16px. Labels use medium weight at 12px with uppercase for section headers.
4. 高度與深度 (Elevation)
定義設計如何傳達深度與階層。有些設計依賴陰影，有些則保持扁平化。如果使用了陰影，需具體說明陰影屬性（擴散、模糊、顏色）以及哪些元件應該被抬升。
範例：
Elevation
This design uses no shadows. Depth is conveyed through border contrast and surface color variation (surface, surface-container, surface-bright).
5. UI 元件 (Components)
針對原子級元件的樣式指南。請將重點放在與您應用程式最相關的元件上（例如：儀表板的資料表、或多階段審核流程的表單）。
| 元件類型 (Component) | 需要具體說明的內容 (What to specify) |
|---|---|
| Buttons (按鈕) | 變體 (主/次/第三)、尺寸、內距 (padding)、圓角半徑、狀態 |
| Chips (標籤元件) | 選擇、過濾與操作變體 |
| Lists (列表) | 項目樣式、分隔線、前置/後置元素 |
| Inputs (輸入框) | 文字欄位、文字區域、標籤、輔助文字、錯誤狀態 |
| Checkboxes (核取方塊) | 勾選、未勾選、不確定 (indeterminate) 狀態 |
| Radio buttons (單選鈕) | 已選取與未選取狀態 |
| Tooltips (工具提示) | 定位、顏色、時間延遲 |
範例：
Components
-
Buttons: Rounded (8px), primary uses brand blue fill, secondary uses outline
-
Inputs: 1px border, surface-variant background, 12px padding
-
Cards: No elevation, 1px outline border, 12px corner radius
6. 應做與不應做 (Do's and Don'ts)
實用的指導原則與常見的設計陷阱。這些規則在 AI 生成設計時會發揮「護欄（Guardrails）」的作用。
範例：
Do's and Don'ts
Do use the primary color only for the single most important action per screen
Don't mix rounded and sharp corners in the same view
Do maintain WCAG AA contrast ratios (4.5:1 for normal text)
Don't use more than two font weights on a single screen
在 Google Stitch 的生態系中，DESIGN.md 徹底重新定義了設計規範的意義。它不再是一份厚重、靜態且只有開發團隊會去翻閱的說明書，而是一個輕量、動態且具備「雙面性」的共享合約。
透過這份純文字的 Markdown 文件，我們能用人類最直覺的語言來溝通產品個性與設計護欄；同時，它也能讓 AI 在底層精確轉譯色彩、排版與元件的數值代碼（Tokens）。掌握這六大核心結構，等於為您的專案建立了一個強大的 Single Source of Truth（單一真實來源）。
無論您是要快速生成原型，還是要求 AI 產出精準的前端程式碼，DESIGN.md 都能大幅減少介面生成時的「幻覺」與來回修改的成本，確保每一刻產出的 UI 都完美對齊您的品牌核心與設計意圖。
