axewhyzed/agentic-skills

現代 Web UI/UX 與高密度工作空間設計

一份全面的營運指南，用於設計高密度、零浪費的 Web 應用程式、實用儀表板與高效能的 Web 工作空間。

---

1. 零浪費 Web 哲學

高效的 Web 應用程式（工具、管理後台、通訊中繼站、開發者儀表板）不是登陸頁面。使用者登入是為了完成任務，而不是欣賞行銷圖片。

1.1 反英雄法則

• ❌ 反模式： 在應用程式畫面頂部放置一個 300px 的大型裝飾性英雄橫幅（例如：「歡迎來到您的收件匣！」、浮動的抽象插圖、巨大的漸層背景），這會將實際的數據和互動控制項推到摺疊線以下。
• ✔️ 零浪費模式： 完全剔除登入狀態下的行銷英雄橫幅。使用一個緊湊的 56px 頂部導航列，整合以下元素：
  1. 微妙的品牌識別 / 圖示。
  2. 即時系統遙測或配額計量器（例如：儲存空間藥丸：14 MB / 2 GB）。
  3. 操作模態觸發器（例如：「配對裝置」）。
  4. 快速主題切換（深色 / 淺色）。
  5. 緊湊的用戶下拉選單，內含明確的本地登出與安全選項。

1.2 視窗最大化

• 100vh 佈局： 鎖定根視窗高度（height: 100vh; overflow: hidden;），並為內容列表和詳細資訊檢視區建立獨立的滾動容器。
• 零意外滾動條： 透過謹慎管理內部列表容器的 overflow-y: auto，消除雙重滾動條。

---

2. 類 Linear 風格的高密度美學

靈感來自 Linear、Vercel 和 Raycast 所推廣的設計範式：

2.1 視覺層級與設計 Token

• 微妙的 1px 邊框： 避免使用厚重的陰影。使用精細的 1px 邊框（border-border/40 或 #1E293B）來建立結構。
• 深色板岩 / 黑曜石背景： 使用高對比度、非飽和的背景色（#0B0F17 或 #090D16），而不是純黑色（#000000）或混濁的灰色。
• 等寬表格數字： 始終對日期、時間戳記、檔案大小和計數器應用 font-mono tabular-nums，使數字能夠垂直對齊而不產生佈局抖動。
• 緊湊間距網格： 標準化使用 4px/8px 的節奏。將行內距設為垂直 8px–10px 與水平 12px，以達到最大資訊密度而不產生視覺幽閉感。

2.2 命令選單面板（cmdk 模式）

除了標準的搜尋列之外，還應整合一個由 ⌘K 或 Ctrl+K 觸發的全域命令面板：

• 分組動作：導航、建立、系統設定、帳戶操作。
• 跨項目、檔案和快捷鍵的即時模糊搜尋。
• 完全可存取的鍵盤導航（ArrowDown、ArrowUp、Enter、Escape）。

---

3. 統一撰寫中樞模式

當應用程式允許使用者建立、上傳或發送不同類型的數據（例如：文字筆記、網址、文件）時，應避免將入口點分散到不同頁面或將其埋在頁面底部。

+-------------------------------------------------------------+
| 撰寫中樞                                                     |
| [ 📝 文字 ]  [ 🔗 網址 ]  [ 📁 上傳檔案 ]                     |
+-------------------------------------------------------------+
|                                                             |
|  啟用中的表單 / 拖放區域                                    |
|  - 用於筆記的多行文字框                                      |
|  - 具有自動驗證功能的乾淨網址輸入框                          |
|  - 可即時預覽檔案的拖放區域                                  |
|                                                             |
+-------------------------------------------------------------+
| 保留期限: [ 1 天 ] [ 3 天 ] [ 7 天 ]    [ 丟入保險庫 ↵ ]     |
+-------------------------------------------------------------+

有效撰寫中樞的關鍵元素：

1. 分段切換器： 乾淨的藥丸分頁，切換即時且不重置表單。
2. 拖放區域： 原生 HTML5 拖放處理，具有視覺邊框高亮（border-dashed border-accent）和位元組大小驗證。
3. 即時字元與位元組計數： 即時計算真實的 UTF-8 位元組（例如：124 bytes 或 18.4 MB / 100 MB）。
4. 生命週期 / 保留控制： 允許使用者預先設定過期時間，讓系統自動清理暫存項目。
5. 鍵盤提交： 在任何啟用的文字輸入框中，使用 Ctrl + Enter（或 Cmd + Enter）提交。
6. 高對比度啟用狀態（WCAG 1.4.11）：
   • 啟用分頁對比度： 在深色模式下，啟用分頁絕不能與其容器融為一體（#111827 啟用於 #0F172A 容器上，對比度僅 1.02:1）。始終使用 --card-elevated: #1E293B 來提升啟用分頁、加上明確的 1px 語義邊框（1px solid var(--accent)）、一個啟用發光輪廓（box-shadow: 0 0 0 1px var(--accent-glow)）以及一個帶色調的啟用圖示。
   • 表單控制項邊界： 深色模式下的保留期限輸入框、下拉選單箭頭和次要按鈕必須使用白色不透明度 $ ge 18%$ 的邊框（rgba(255, 255, 255, 0.18) 或 #334155），以滿足與深色背景之間 3:1 的非文字對比度要求。

---

4. 高密度主從式（雙面板）佈局

用於資料瀏覽時，主從式佈局能在進行深入檢查的同時，保持上下文可見。

flowchart LR
    subgraph MasterPane["主面板 (左側: 40% - 45%)"]
        SearchBar["即時搜尋列 (快捷鍵: /)"]
        FilterChips["篩選標籤: [全部] [檔案] [連結] [文字]"]
        ListItems["虛擬化 / 可滾動項目列
        - 類型圖示 + 標題
        - 發送裝置徽章
        - 相對時間戳
        - 快速滑動 / 操作"]
    end

    subgraph DetailPane["詳細面板 (右側: 55% - 60%)"]
        DetailHeader["項目標題與類型徽章"]
        PreviewArea["即時內容預覽:
        - 可點擊連結
        - 語法高亮文字
        - 圖片 / 文件預覽"]
        ActionRow["主要操作:
        [ 開啟連結 ] [ 複製文字 ] [ 下載檔案 ] [ 刪除 ]"]
    end

    MasterPane -->|"選中狀態"| DetailPane

最佳實踐：

• 固定的篩選與搜尋標頭： 搜尋輸入框和篩選標籤必須保持固定，而項目列表在其下方滾動。
• 空狀態與零結果狀態： 提供清晰的視覺狀態：
  • 尚無項目：「您的收件匣是空的。請使用上方的撰寫中樞放入您的第一個項目。」
  • 無搜尋結果：「沒有符合『稅務申報』的項目。[清除搜尋]」

---

5. 鍵盤導航與無障礙性（a11y）

高效率使用者期望流暢的鍵盤操作：

快捷鍵	操作	實作方式
/ 或 ⌘K	聚焦搜尋輸入框	document.addEventListener('keydown', ...) 搭配 input.focus()
Escape	清除搜尋 / 關閉啟用中的模態框	關閉最上層的模態框或使搜尋欄失去焦點
Ctrl + Enter	提交啟用中的表單 / 傳送項目	表單的 onKeyDown 處理器
Tab / Shift + Tab	邏輯 DOM 焦點順序	強制使用可存取的 :focus-visible 環（$2\text{px}$ 藍色輪廓）

5.1 WCAG 2.2 AA / AAA 色彩對比度稽核

切勿在未經驗證或低對比度的設計 Token 下發布 Web 應用程式：

• 一般文字對比度（$\ge 4.5:1$ AA, $\ge 7:1$ AAA）:
  • 淺色模式陷阱： Slate-400（#94A3B8）在 #FFFFFF 上僅有 2.57:1（未通過 AA）。將淺色模式的次要文字加深至至少 Slate-500（#64748B），可達 4.77:1。
  • 警告 / 琥珀色徽章陷阱： Amber-600（#D97706）在 #FFFFFF 上僅有 3.22:1（未通過 AA）。將文字徽章加深至 Amber-700（#B45309），可達 4.82:1。
  • 深色模式文字： 確保 text-primary（#F8FAFC，15.6:1 AAA）和 text-secondary（#CBD5E1，11:1 AAA）在深色板岩卡片上提供輕鬆的閱讀體驗。
• 元件與邊框對比度（$\ge 3:1$，WCAG 1.4.11）:
  • 深色模式下的表單輸入框、搜尋欄和分段控制項的邊框，必須滿足與相鄰容器之間 $\ge 3:1$ 的對比度。
  • 焦點指示器必須使用高對比度的主要色環（box-shadow: 0 0 0 2px var(--focus-ring)）。

---

6. 精細安全性與驗證 UX

請勿將一般的日常用戶操作與高風險的安全操作混淆。

6.1 本地登出 vs. 全域撤銷

• 登出（本地）： 僅清除當前瀏覽器的 session cookie。這是使用者在使用共用電腦時的常規操作。
• 在所有裝置上登出（全域）： 撤銷所有已註冊手機、筆記型電腦和瀏覽器上的所有有效重新整理令牌和裝置工作階段。
  • 安全規則： 絕不要將「在所有裝置上登出」作為標準選單中的直接一鍵按鈕。務必將其置於一個專用模態對話框之後，並附上明確的確認步驟（「您確定嗎？這將會中斷您的手機和其他裝置的連線。」）。

6.2 裝置配對 UX

• 在輕量級對話框中呈現配對 QR Code：
  • 高對比度的 SVG QR Code。
  • 即時倒數計時器（例如：「將在 09:42 後過期」）。
  • 備用的文字密鑰，並附上一鍵複製按鈕，供沒有攝影機的裝置使用。

---

7. 參考的開源儲存庫

請參閱這些業界領先的儲存庫，以獲取設計、Token 結構和實作靈感：

• shadcn/ui：無樣式、可存取的元件原語，結合 Radix UI 與 Tailwind CSS，並具有現代高密度預設值。
• pacocoursey/cmdk：Linear、Vercel 和 Raycast 使用的金標級可存取命令選單元件。
• henrikzabel/linearlike：採用 Linear 美學的生產級 Web 應用程式的精選索引。
• ln-dev7/circle：開源的 Linear 風格問題追蹤器，展示了高密度表格與側邊欄導航。
• calcom/cal.com：企業級 React 工作空間佈局，具有乾淨的多面板設定、精細對話框和即時導航。