設計網頁或流程
請先閱讀 web-craft。既有的 DESIGN.md 或設計系統是最高權威：請遵循它們，不要為現有產品發明新的方向。
1. 程式碼之前的方向（新產品與大型新頁面）
簡短地決定並記錄下來：
| 決策項目 | 答案 |
|---|---|
| 使用者與任務 | 這個頁面要讓誰的工作更輕鬆？ |
| 優先級 | 什麼東西必須最先被看到和操作？ |
| 組合 | 編輯流程、分割佈局、密集工作區、產品展示，或其他 |
| 排版 | 字體特徵、字級、行長、每種預計語言的腳本覆蓋 |
| 視覺素材 | 真實產品圖片、攝影、插圖、圖表或字體主導 |
| 頁面與密度 | 邊框、色調、空白、資料密度、頁面節奏 |
| 動畫 | 功能性回饋，加上產品需要的敘事性動畫 |
| 標誌細節 | 一兩個支援品牌的一致細節 |
參考資料：優先使用既有品牌，其次是使用者提供的內容。對於新的方向，挑選幾個合適的來源，並說明每個貢獻了什麼（密度、攝影、節奏、互動、字體）。像「現代」或「簡潔」這類形容詞並非決策。不要複製商標、文字或整個構圖。新產品的選項必須在構圖和優先級上有所不同，而不僅僅是顏色。詳細資訊：references/direction-and-references.md、references/composition.md、references/typography.md。
2. 設計代碼
顏色（語意色、淺色與深色）、字體大小、間距、圓角、高度與動畫作為代碼存放在同一處，並對應到主題套件的主題。高度被限制：首先使用邊框和頁面色調，少數單層低透明度的陰影代碼用於浮動圖層，在深色模式下用較亮的頁面代替陰影，且不使用動畫 box-shadow。詳細資訊：references/tokens-color-elevation.md。
3. 文案與層級
每個文字只做一件事。預設情況下，標題上方沒有眉毛文字（僅用於進度、日期、父物件或法律上下文；像「Premium」這類層級標籤應變成功能上的徽章）。副標題僅保留用於範圍、結果、風險或具體事實。標題層級應遵循結構，而非字體大小。佔位符不能取代標籤。按鈕應說明發生的動作。詳細資訊：references/copy-hierarchy.md。
4. 狀態
為每個資料區域和表單建立狀態矩陣：初始載入（佈局匹配的骨架，延遲顯示以避免閃爍，在減少動畫模式下靜態顯示）、空狀態（首次使用 vs 無結果）、含重試功能的錯誤狀態（並保留已輸入的資料）、重新整理、分頁錯誤、提交中、成功、禁止、找不到、離線。詳細資訊：references/states.md。
5. 表單
在失焦時驗證，一旦顯示錯誤便在有變更時重新驗證，非同步檢查需防抖。提交時若發生錯誤：聚焦第一個無效欄位，將其滾動到任何固定標題下方，展開包含該欄位的摺疊區段或步驟，並在長表單上顯示錯誤摘要。錯誤訊息應說明問題所在及如何修正，並放置在欄位旁邊，且透過 aria-describedby 連結。提交按鈕僅在傳送期間停用。伺服器端欄位錯誤應以相同的滾動和聚焦方式顯示在其欄位上。詳細資訊：references/forms.md。
6. 動畫
在選擇函式庫之前，先填入動畫矩陣（references/motion-matrix.md）：
- 按鈕與連結：懸停（若有懸停效果）、按下、焦點可見、載入中、已停用。
- 對話框、側邊欄、選單、彈出視窗、提示訊息：務必包含進入與離開動畫（透明度加上小幅縮放或位移，離開動畫需在移除元件前完成）、焦點鎖定與返回、關閉。詳細資訊：
references/overlays.md。 - 清單：新增、移除和重新排序的動畫應易於理解。
- 圖表：首次檢視時有簡短的繪製動畫，資料變更時有過渡動畫，超過一定資料量時無動畫，減少動畫模式下無動畫；工具提示需可透過鍵盤操作，並提供表格替代方案。詳細資訊：
references/charts.md。 - 行銷敘事：有限、產品專屬、永不將內容隱藏在動畫之後。
持續時間、緩動函數與距離來自設計代碼。並非每個頁面都使用相同的淡入錯開效果。不要在表單或資料畫面上加入人為延遲。減少動畫模式應集中處理，並涵蓋 CSS、函式庫和影片。
7. 響應式
中斷點應跟隨內容。定義導覽、篩選器、表格、固定動作按鈕、對話框和彈出視窗在窄螢幕上的行為。測試 320px、長篇翻譯文字、200% 縮放、觸控與鍵盤操作。網頁對話框預設不應變成 React Native 底部選單。詳細資訊：references/responsive.md。
8. 檢查結果
在瀏覽器中以手機和桌面寬度、兩種主題、兩種語言、僅使用鍵盤操作以及開啟減少動畫模式的情況下來檢視它。靜態截圖無法檢視動畫；請與頁面互動。
當一個套件在不同產品之間重複使用時，請執行 references/pilot-divergence.md 中的差異化測試。