繪製的 UI
一張「繪製的畫面」以設計師為案例研究繪製草圖的方式呈現產品：真實的介面經過簡化，只留下結構，並以產品本身的色彩著色。它看起來像設計作品，而截圖看起來像貼上的；而且因為所有文字都變成了條塊，所以絕不會顯示私人資料。
外觀之所以平靜，是因為規則少且嚴格。每個專案看起來仍然像它自己，因為色調、畫面和一個浮起的部分都來自於專案本身。這些繪圖要放在哪裡（英雄區、網格、功能列表、投影片）由使用者決定。
按此順序工作
- 讀取真實產品。 從程式碼、應用程式或設計檔案取得其當前畫面。每張繪圖都源自一個真實畫面或元件。切勿發明隱喻（例如浮動的天秤、門、卡片之間的箭頭）：如果產品沒有，繪圖就不會顯示它。
- 選擇時刻。 每張繪圖的用途：一個畫面、一個元件、一個狀態。一組繪圖顯示不同的元件，而不是同一個元件每次增加更多細節。
- 提取強調色。 產品本身的色調或品牌色。
scripts/tint.py "#hex"會顯示它產生的色調。只有在產品中有意義時（例如狀態顏色、品牌對色）才使用更多強調色。 - 撰寫規格。
drawings.json，格式請參考references/spec.md（繪製前請閱讀其中關於尺寸、浮起和色調的章節），並參考其中的範例examples/ledger/drawings.json。根據每張繪圖將要填滿的空間來設定尺寸。 - 繪製並檢查。 執行
python3 scripts/draw.py drawings.json --shots（截圖需要安裝了 Chromium 的 Playwright）。修正它印出的每個問題，然後打開out/shots/sheet.png檢視。數字標記，眼睛判斷：卡片內空的角落、偏向一側的繪圖、看起來像藥丸的堆疊。重複直到通過檢查且看起來平靜為止。
規則
- 繪圖中不能有文字。所有文字變成條塊：高度為 12、8、6 或 4，寬度以 4 為步進，完全圓角。
- 白色卡片，每個角色一個圓角半徑（卡片 12、內部盒子 8、行 4、手機 32），一個卡片陰影，一個浮起陰影。
- 每張繪圖中只有一個部分可以從其卡片中浮起：它只能從一側離開，距離為 16 到 72（24 到 40 效果最好），不能超過卡片的頂部或底部，周圍至少留有 8 的空間。寬度 600 或以上的繪圖可以有兩個浮起部分。浮起部分會取代它原本的位置，而不是半覆蓋它。
- 每張繪圖使用一個強調色，用於該畫面中最重要的東西上。
- 每張繪圖最多一個線條圖形，以 1.5 粗細繪製，末端為圓形。
- 預設無背景：繪圖只為其陰影預留空間，並放在頁面上的任何位置。如果設定
"ground": true，它會得到一個著色的底板，其寬度和高度佔繪圖的 65% 到 75%，並居中。 - 所有元素在 4 的網格上以 1:1 比例繪製。同一組中並排的繪圖共享一個比例：以實際顯示的尺寸繪製，當它們排成一行時，高度必須一致。
- 手機的長寬比為 1 到 2.05。
使用輸出
out/<id>.svg 檔案是自包含的，帶有自己的寬度和高度，並會適應頁面：淺色背景上為亮色，深色背景上為暗色。它們遵循檢視者的系統設定，並且任何父元素上的 dark 或 light class（或 data-theme 屬性）可以強制指定一種模式。它們設有 aria-hidden，並且每個繪圖的 id 都加了命名空間，因此多個繪圖可以內嵌在同一頁面上。形狀帶有角色 class（p-ground、p-card、p-bar、p-dot、p-glyph、浮起部分為 p-hi）以實現懸停動畫；out/index.html 展示了一個平靜的範例，並包含「減少動畫」的回應。如果繪圖對手機來說太寬，則會生成一個較窄的第二張繪圖；切勿壓縮它。
在 Figma 中設計：同樣適用這些規則，且規格值可以直接對應到畫框（卡片使用自動佈局，只有浮起部分使用絕對定位）。將每個底板匯出為 SVG。
當規則與產品衝突時
如果產品沒有單一的強調色，可以使用其最深的 neutral 色。如果一個畫面只有顯示兩個重點才有意義，可以分成兩張繪圖。一次只打破一條規則，並說明是哪一條。