僅在使用者明確選擇或已確認的專案設定指定時，才使用此技能。對於未說明的全新 UI 請求，請改用風格選擇器（例如 style-selector），而非在此決定使用者偏好。現有的品牌、無障礙規範和使用者覆寫，其優先級高於以下所有範例。以下風格指南並非在風格選擇之前就允許開始 UI 編碼。
風格套件：企業級 / 資料優先
ID： enterprise
特徵： 資訊密集的營運操作台、表格資料對齊、語意狀態標記、鍵盤生產力、以及可靠的工作流程架構。
這是一個風格套件，並非強制預設值。僅在明確選擇或確認適用專案風格後才載入。專案指示可以覆寫個別選擇。請保留無障礙性、實用性和品牌限制。字型為建議，非必要依賴項。一個帶有 3 個虛假 KPI 數字和裝飾性圓餅圖的消費者卡片範本不符合企業級資料優先風格。
適用場景 / 取捨
- 適用於： B2B SaaS 平台、營運管理後台、雲端基礎設施監控器、金融科技與交易入口網站、物流與供應鏈後端、以及資料密集型生產力工具。
- 需謹慎使用： 消費者行銷登陸頁面，這類頁面以敘事節奏和情感視覺品牌為主，而非密集的表格掃描。
- 參考方向：
- 現代雲端控制台（Linear / Stripe / Vercel 風格）： 清晰的板岩中性底色（淺色
#0F1117或深色#F9FAFB）、緊湊的 36px 表格行高、等寬數字（font-variant-numeric: tabular-nums）、柔和細線分隔線（#E5E7EB或#262933）以及語意狀態標記。 - 高密度營運操作台： 乾淨的白色桌面、緊湊的 32px 行高、附帶鍵盤快捷鍵（
⌘K）的搜尋篩選欄、固定表格表頭以及響應式主從式窗格。
- 現代雲端控制台（Linear / Stripe / Vercel 風格）： 清晰的板岩中性底色（淺色
企業級資料真實性閘道 — 強制
在認定企業級頁面完成之前，開啟的可視區域必須明顯看起來像一個功能完善、密集且專業的資料操作台。 如果使用者選擇了此風格，一個帶有裝飾性指標卡片且無可掃描表格結構的過大消費者範本，將直接被評為不合格。
一個成功的企業級資料優先實作必須展現所有以下幾點：
- 資訊密集的表格架構： 核心記錄與實體需以結構化、可掃描的資料表格或緊湊的主從式列表呈現，並具有一致的行高（32px–40px）和明確的欄位標題。
- 等寬數字與齊頭對齊： 所有數字、金融金額、指標和時間戳記都必須強制使用
font-variant-numeric: tabular-nums。數字欄位嚴格向右對齊；文字欄位向左對齊。 - 具可讀對比度的語意狀態標記： 狀態指示器（健康、降級、失敗、待處理）應使用經過校準的語意狀態膠囊，搭配深色可存取文字與柔和色調背景（例如成功：背景
#ECFDF5搭配文字#065F46，符合 WCAG AA 4.5:1 標準）。 - 生產力輔助與快捷鍵： 搜尋欄應顯示鍵盤觸發提示（
⌘K或/），表格表頭應有排序指示器（▲/▼），並在選取記錄時出現批次操作欄。 - 真實的狀態完整性： 表格應包含真實的分頁欄（顯示「顯示 1–25 項，共 1,420 項」）、響應式水平捲動處理，以及專用的空白/載入/錯誤狀態。
首屏測試： 在桌面螢幕截圖中，無需閱讀頁面標題即可識別出密集的資料表格、可排序的表頭、篩選欄和等寬數字。如果它看起來像一個帶有大片空白卡片的消費者行銷頁面，請將其重建為一個功能性營運視圖。
企業級密度明確例外 — 資料表格為必要
企業級專用覆寫： 針對儀表板雜亂或多個指標方塊的通用防潦草警告，不得被解釋為在此隱藏資料表格、篩選工具欄或狀態指示器的授權。在真正的企業級軟體（Stripe、Datadog、AWS、Bloomberg）中，密集可掃描的資料是主要的介面需求。
- 允許的企業級處理方式： 緊湊的資料表格（32px–40px 行高）、多欄位中繼資料網格、篩選工具欄、附帶鍵盤快捷鍵徽章的搜尋欄、批次操作欄以及語意狀態膠囊。
- 防潦草界限： 切勿發明虛假的營收指標、無軸刻度的裝飾性迷你走勢圖，或不傳達任何營運資料的動畫圓餅圖。真實的資料欄位、空白狀態和真實的狀態指示器是強制性的。
- 防潦草解讀： 應根據可掃描性、資訊密度和任務效率來評估企業級佈局，而不是試圖剝離必要的營運控制項。能加速工作的表格密度是真正的設計。
字體排印與書寫
中性、高度易讀的 UI 無襯線字體：Inter、Source Sans 3、SF Pro 或系統無襯線字體。等寬字體用於識別碼和雜湊值：JetBrains Mono 或系統等寬字體。正文與表格儲存格：13–14 px（行高 1.45）；欄位標題：12 px 大寫（字重 600，字距 0.05em）；指標數字：20–28 px 並使用等寬數字。
色彩方向
- 淺色模式（現代雲端控制台）：
- 畫布底色： 柔和中性板岩（
#F9FAFB）。 - 表面 / 表格： 純白（
#FFFFFF）。 - 主要文字 / 字體： 深板岩（
#111827）。 - 次要 / 淡化文字： 均衡板岩（
#6B7280）。 - 細線邊框：
#E5E7EB。 - 滑鼠懸停行高亮：
#F8FAFC。
- 畫布底色： 柔和中性板岩（
- 深色模式（雲端操作台）：
- 畫布底色： 深板岩（
#0F1117）。 - 表面 / 表格： 提升炭黑色（
#161922）。 - 主要文字 / 字體： 清晰板岩（
#F9FAFB）。 - 次要 / 淡化文字： 均衡灰色（
#9CA3AF）。 - 細線邊框：
#232733。 - 滑鼠懸停行高亮：
#1F2430。
- 畫布底色： 深板岩（
- 主要品牌色： 深企業藍（淺色
#2563EB/ 深色#3B82F6）。 - 語意狀態標記（WCAG AA 兩種模式校準）：
- 成功（健康）： 淺色：
#065F46搭配#ECFDF5（邊框#A7F3D0）；深色：#34D399搭配rgba(16, 185, 129, 0.15)（邊框rgba(16, 185, 129, 0.35)）。 - 警告（降級）： 淺色：
#92400E搭配#FEF3C7（邊框#FDE68A）；深色：#FBBF24搭配rgba(245, 158, 11, 0.15)（邊框rgba(245, 158, 11, 0.35)）。 - 錯誤（失敗）： 淺色：
#991B1B搭配#FEE2E2（邊框#FECACA）；深色：#F87171搭配rgba(239, 68, 68, 0.15)（邊框rgba(239, 68, 68, 0.35)）。 - 中性（待處理 / 非活躍）： 淺色：
#374151搭配#F3F4F6（邊框#E5E7EB）；深色：#9CA3AF搭配rgba(156, 163, 175, 0.12)（邊框rgba(156, 163, 175, 0.25)）。
- 成功（健康）： 淺色：
- 主題耦合規則： 畫布、表格、文字墨色和語意徽章必須同步調整。切勿在淺色表格上顯示深色模式文字，或在深色操作台背景上顯示淺色模式的深綠色文字。
佈局與幾何
4px 基本節奏，搭配 8/12/16px 密度增量；柔和 4px–6px 圓角；一致的表格行高（預設 36px，緊湊 32px）。主從式佈局在桌面上靈活分割，並在行動裝置上整齊堆疊。
表面、深度與紋理
表面乾淨、平坦且由邊框主導。陰影嚴格保留給浮動選單、工具提示和模態對話框（0 4px 12px rgba(0, 0, 0, 0.08)）。資料網格上不得有裝飾性的玻璃或黏土效果。
元件結構與互動
- 資料表格： 固定表頭行、斑馬紋或滑鼠懸停行高亮（
#F8FAFC）、數字欄位向右對齊、文字欄位向左對齊。 - 篩選與搜尋欄： 整合的搜尋輸入框，附帶
⌘K徽章、多選篩選下拉選單和日期範圍選取器。 - 語意狀態徽章： 緊湊的圓角膠囊，帶有彩色指示點和可存取的文字。
- 分頁頁尾： 當前頁面範圍、每頁項目數選擇器以及上一頁/下一頁按鈕。
動態
最小化的 100–140 ms 線性回饋轉場。優先考慮如磐石般的穩定性，並在資料重新整理或表格篩選時完全避免動態效果。
可選的 Anime.js v4 食譜
- 動態決策： 資料更新時微妙的行高亮閃爍，或抽屜滑動轉場。
- 起始持續時間： 120ms（0 = 立即）；根據任務和使用者偏好調整。
- 避免： 裝飾性頁面轉場、有彈性的圖表、快速查詢上的旋轉載入器。
- 依賴項： 預設使用 CSS/原生。當存在 Taste Engine
references/motion-engine.md時，遵循其規範；獨立技能遵循上述減少動態和無裝飾性循環的原則。
UI 文案與微抄寫
客觀、精確且易於稽核。範例：「找到 1,420 筆記錄」、「按狀態篩選」、「匯出 CSV」、「上次更新於 2 分鐘前」。避免模糊的對話式 AI 標語。
起始 Token（建議，非完整主題）
| Token | 淺色模式預設值 | 深色模式預設值 |
|---|---|---|
--taste-ent-bg | #f9fafb | #0f1117 |
--taste-ent-surface | #ffffff | #161922 |
--taste-ent-ink | #111827 | #f9fafb |
--taste-ent-muted | #6b7280 | #9ca3af |
--taste-ent-border | 1px solid #e5e7eb | 1px solid #232733 |
--taste-ent-radius | 6px | 6px |
--taste-ent-row-height | 36px | 36px |
--taste-ent-accent | #2563eb | #3b82f6 |
--taste-ent-font-body | Inter, -apple-system, system-ui, sans-serif | Inter, -apple-system, system-ui, sans-serif |
--taste-ent-motion-duration | 100ms | 100ms |
Token 代表一個方向，並非保證適用於每個調色板/平台的複製貼上值。請在專案層級定義 --taste-ent-*，確保色彩對比度，並透過主題 Token 進行調整，而非散佈字面值。
首屏組合（完整的第一個可視區域）
當面向公眾的作品集/登陸頁面/首頁具有首屏時： 使用一屏可見的頁首+首屏組合。基礎高度設為 min-height: 100svh，並以 100vh 作為備用，僅在頁首處於正常文檔流時減去實際的頁首高度；讓首屏因應無障礙性和短的行動裝置螢幕而擴展。請勿將此應用於私人儀表板或其他任務螢幕；直接的使用者覆寫優先。風格特定方向： 使用一個可運作的操作台摘要來錨定開啟的視圖：關鍵篩選欄、即時資料概覽，以及一個立即的營運操作。避免消費者卡片膨脹和空白間隙。如有路由器 references/hero-layout.md，請參考。獨立使用遵循相同的響應式和防潦草原則。
風格特定品質閘道
- 務必： 驗證等寬數字（
tabular-nums）和數字資料的右對齊；確保語意徽章在淺色和深色模式下均符合 WCAG AA 對比度；提供完整的分頁和搜尋篩選欄；測試固定表格表頭；驗證深色/淺色模式切換，使所有行、邊框和文字都能同步切換。 - 切勿： 不要用消費者卡片網格取代資料表格；避免未縮放的裝飾性走勢圖；不要發明沒有後端對應的虛假指標數字；避免主題對比衝突，例如深色背景上的深綠色文字或深色表格行上的深色文字。
- 確認桌面和行動裝置的一致性；可見的鍵盤焦點（
:focus-visible）；載入、空白、禁用、錯誤和成功狀態；減少動態行為（prefers-reduced-motion）。 - 請勿將風格特定假設注入不相關的專案。合併風格時，需明確指定主要風格和借用的功能。
通用防潑草閘道（自包含）
每個元素都必須有其存在的價值。內容優先於裝飾。不裝飾不確定性。 請勿發明餘額、指標、推薦、使用者、標誌、核准、已驗證/線上/離線狀態、虛假活動或成功確認；改用誠實的空白/載入/錯誤狀態。僅在要求並明確標示時，才可使用展示資料。
請勿添加裝飾性的卡片內卡片層級：巢狀表面必須代表一個不同的互動或資訊邊界。避免自動生成的 3 功能網格、4 統計儀表板、虛假的首屏宣稱、無目的的圖表、徽章/籌碼/圖示濫用、不相關的裝飾藝術，以及僅為填滿可視區域的隨機迴圈。偏好使用字體排印、間距、對齊和分隔線進行分組。同級元素需要有意圖的視覺平衡。
防潑草文案： 不得使用通用的「釋放你的潛力」、「體驗未來」、「提升你的工作流程」、「無縫」等宣稱或翻譯後的等效詞彙。標題必須傳達實際內容，行動呼籲（CTA）必須命名該操作，而空白/錯誤/成功文字必須描述真實狀態和後續步驟。避免虛假的緊迫感、捏造的計數、模糊的 AI 炒作、不必要的表情符號，以及無法存取的純大寫文字牆。根據此風格和使用者的語言調整措辭，但不得改變事實。
主題與模式對比完整性： 當使用者要求深色模式或淺色模式（或建立主題切換器）時，所有表面、文字、邊框、輸入框和語意徽章的背景和前景顏色必須以同步成對的方式切換。切勿將黑色文字留在深色背景、白色文字留在白色背景，或留下不可讀的低對比狀態膠囊。所有狀態必須符合 WCAG AA 對比度（正文/一般文字至少 4.5:1，大型標題和互動邊界至少 3:1）。
響應式與動態： 有意識地組合行動裝置佈局，檢查長標籤、焦點狀態和可存取的對比度；避免為迎合時髦佈局而裁剪文字。預設為靜態；僅對有意義的互動使用動態，尊重減少動態偏好，避免在沒有真實狀態的情況下使用彈跳/漂浮/脈衝裝飾。
關鍵/高優先級問題阻擋完成： 偽造的狀態/資料、損壞的操作、無法存取/裁剪的控制項、誤導性文案、主題對比衝突或顯著的行動裝置失敗必須修復。報告實際驗證的內容；請勿聲稱未執行的測試。
非美學否決權： 富有表現力的色彩、陰影、漸層、卡片佈局或裝飾性處理，當它們是所選美學的意圖部分並通過可用性檢查時，是合理的。請勿為了純粹的功能性而壓制合理的美學選擇。
出貨檢查清單
- 資料表格已實作（行高 32–40px，固定表頭，斑馬紋或懸停高亮）
- 所有數字欄位使用
tabular-nums並向右對齊 - 已實作語意狀態徽章（成功、警告、錯誤、中性），並驗證 WCAG AA 對比度
- 搜尋/篩選欄已實作，並顯示鍵盤快捷鍵提示（
⌘K） - 分頁已實作，顯示真實範圍（「顯示 1–25 項，共 1,420 項」）
- 空白/載入/錯誤狀態已實作
- 深色模式切換功能正常，所有顏色同步切換且滿足對比度要求
- 頁面首屏立即顯示爲功能性資料操作台，而非消費者行銷卡片
- 無虛假指標、裝飾性圖表或未經請求的展示資料
- 響應式行為：表格在行動裝置上可水平捲動，佈局堆疊正常
- 鍵盤導航和
:focus-visible已實作 - 已檢查
prefers-reduced-motion，動態效果已適當限制