第 2 階段：設計
目標：業主已核准在手機和筆電上看到的樣貌。這個樣貌以符記 (tokens) 形式撰寫，因此可以透過複製變成 WordPress 外觀主題，並且日後更換時不影響功能。
步驟
- 方向。 填寫專案的
docs/DESIGN_DIRECTION.md：北極星、目標受眾、我們絕對不能看起來像的對象（競爭對手、範本）、以及不可妥協的事項。最多提供兩個或三個方向，以小型的靈感板或首頁模型呈現，而非完整網站。 - 在
static/中建立原型。 純 HTML 和 CSS。css/tokens.css使用與主題的skins/default/tokens.css相同的名稱。元件僅使用符記。真實的結構（頁首、主視覺、卡片、表單、頁尾）、佔位文字、無價格與政策文字。 - 從一開始就納入無障礙設計：
- 文字對比度 ≥ 4.5:1；
- 可見的焦點指示；
- 一個 H1；
- 跳至內容連結；
- 鍵盤操作路徑；
- 尊重
prefers-reduced-motion。 在展示原型之前，先使用 axe（瀏覽器擴充功能）檢查。
- 業主審查。 每個頁面在手機寬度 (375 px) 和筆電寬度 (1440 px) 的截圖。在
DESIGN_DIRECTION.md中記錄核准日期，並將截圖儲存在docs/design/中。 - 字型： 自託管
.woff2檔案，根據所需語言進行子集化、檢查授權，並預載第一畫面所需的一到兩種字型（將其命名為*-preload.woff2）。任何地方都不能有 Google Fonts 的請求。 - 移植到 WordPress (
references/design-system.md)：- 將符記複製到外觀主題中；
- 將元件 CSS 移至
skin.css； - 使用核心函式庫的渲染函式來佈局範本；
- 僅在標記必須不同的地方新增外觀主題部分覆蓋。 視覺外觀改變了；核心的資料與標記契約不變。
- 日後的重新設計都是新的外觀主題：將
skins/default複製為skins/<名稱>、更改符記、使用?skin=<名稱>預覽（管理員），並在核准後以選項<前綴>_skin進行切換。
閘門（在 SITE_STATUS.md 中打勾）
-
DESIGN_DIRECTION.md已撰寫；業主核准記錄附有截圖 - 符記已定義；元件僅使用符記
- 字型已自託管；0 個對 Google Fonts 的請求
經驗教訓
- 當合作夥伴寄來他自己的重新設計時，鎖定的設計因此改變了。因為這個外觀是外觀主題，切換時保留了所有功能。將每個設計都建構成外觀主題，即使是第一個也不例外。
- 不要複製競爭對手的色板、字型搭配或版面配置。業主會注意到，而訪客不會記得你。
- 僅供測試用的外觀主題 (
dev-*) 永遠不會在正式環境顯示。 - 如果已安裝
frontend-design或design-motion-principles技能，請將其用於方向與動畫設計。