組合檔案包｜或許吧 Web Design Kit

風格

目標框架

首頁區塊

滿版插畫主視覺滿版藝術背景 + 一條高對比標語橫幅，記憶點最強的開場。置中文字主視覺眉標 + 大標 + 副標 + 雙 CTA + 信任列，最泛用、最快上線。功能卡片牆白卡片內嵌深色示意面板，用畫面而不是文字解釋功能。常見問題摺疊原生 details/summary，鍵盤可用、不需要 JS。行動呼籲橫幅結尾轉換區，一句話 + 一顆按鈕 + 一行消除疑慮的小字。信任標誌列客戶或整合對象的標誌，配合數據佐證。

導覽列

漂浮膠囊導覽固定在頂部的玻璃膠囊，捲動時浮在內容之上。適合形象頁。三段式導覽列 Logo 左、選單中、CTA 右的標準結構，含行動版收合。應用程式頂欄工作區切換、全域搜尋、通知與帳號選單。

頁尾

品牌大字頁尾整塊主色 + 超大字標，把品牌名當作收尾的視覺句點。多欄連結頁尾四欄連結 + 訂閱電子報 + 法務列，資訊量最大的標準做法。單行頁尾一行解決：版權、法務連結、語言切換。

定價頁

三方案定價年繳/月繳切換、中間方案強調、逐項功能比較。用量加購列把「還能用多少」畫成進度條，加購按鈕就在旁邊。

登入註冊

置中登入卡第三方登入優先、密碼次之，含錯誤訊息與載入狀態。左表單右視覺左邊表單、右邊品牌視覺，適合需要說服力的註冊頁。驗證碼輸入六格驗證碼、自動跳格、重寄倒數。

彈窗浮層

設定彈窗左側分頁 + 右側內容的設定面板，含儲存列。危險操作確認要求打字確認的破壞性操作，說清楚會失去什麼。命令面板 Cmd+K 全域搜尋，分組結果與鍵盤提示。

工作區

後台外框側欄 + 頂欄 + 內容區，含 KPI 磚與最近項目。參數控制台左邊一堆參數、右邊即時預覽，編輯器類產品的核心版型。

資料呈現

篩選列 + 表格搜尋、篩選、批次操作、分頁，後台最常出現的組合。空狀態三種空：還沒建立、搜尋無結果、權限不足，講法完全不同。

狀態回饋

錯誤頁給人看的錯誤頁：說發生什麼、能做什麼、附追蹤碼，不吐堆疊。 Toast 通知堆疊成功、警告、失敗三種語氣，含可重試的動作。

AI 介面

串流對話 LLM 逐字輸出、游標、Markdown 漸進渲染與工具呼叫卡。 Agent 執行流程把 agent 的每一步攤開：思考、工具、結果、權限詢問。

表單

設定表單標籤、說明、錯誤、停用、必填的完整示範。

互動細節

Tooltip 說明泡泡純 CSS、四個方向、hover 與 focus 都會出現，含停用按鈕與名詞解釋的處理。捲軸樣式四種捲軸處理：主題化、hover 才出現、隱藏加邊緣淡出、橫向捲動。游標語意十二種游標各自的用途，加上處理中、拖曳、拖曳分隔線三個實際狀態。間距節奏刻度、親疏關係、容器負責間距的三個原則，含緊／標準／鬆的即時對照。

勾一勾，拿走一整包

顯示設定

風格

密度

圓角

動態

語言