設計
製作並驗證響應式介面原型
以內容為先的介面原型，在代表性的視窗尺寸、輸入方式與內容條件下仍可用。
流程
照這個順序做。
- 找出主要使用者任務、內容層級、支援裝置類別、瀏覽器限制與無障礙要求。
- 先從窄直式版面與語意結構開始，再定義彈性格線、流體媒體與內在尺寸，然後才加中斷點。
- 在內容與控制失效處加中斷點，而不是複製裝置型號寬度。
- 為關鍵狀態做原型，涵蓋短長內容、在地化擴張、錯誤、空白資料、縮放，以及指標與鍵盤輸入。
- 在代表性視窗與可用真實裝置上測試回流、可讀文字、觸控目標、焦點順序、效能與方向變更。
- 記錄回應式規則與例外、蒐集利害關係人與使用者回饋、修訂，並提供可實作狀態與驗收檢查。
先準備
貓會向你要的輸入。
- 使用者旅程與內容
- 支援的瀏覽器與裝置範圍
- 品牌或設計系統限制
- 原型工具或前端環境
路由器 + 一份 playbook
先路由。只選一份。
Cat Paw 每次任務只載入一份 playbook，不合併多份。先走這個路由器；其餘路徑是此 workflow 可檢查的候選。
- 路由器：
design-pack skills/design/emilkowalski/prototype/SKILL.mdskills/design/emilkowalski/mobile-native/SKILL.mdskills/design/ui-skills/baseline-ui/SKILL.md
界線
界線跟著提示一起走。
- 不要只為具名裝置截圖設計；要測試中間寬度與內容壓力。
- 視覺順序改變時，仍維持語意順序與鍵盤行為。
- 不要只為塞進小螢幕就隱藏必要內容或操作。
完成代表
一個可核對的終點。
關鍵任務在代表性與中間寬度可用，縮放或回流不丟失必要內容，鍵盤與觸控可用，回應式規則與已測狀態已記錄。
來源
這個流程從哪來。
- web.dev/articles/responsive-web-design-basics
- web.dev/learn/design/
- developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
來源確立 workflow 的模式。若有 Reddit 或社群貼文，視為實務軼事，不是普遍事實。
