請僅在使用者明確選擇此風格，或已確認的專案配置指定此風格時才使用本技能。對於未說明的新 UI 請求，請改用樣式選擇器（例如），而不是在此替使用者決定品味。既有的品牌、可及性與使用者覆寫規則，其優先級高於以下所有範例。以下樣式指南並非表示在樣式選擇前就可以開始 UI 編碼。
Style pack: Bento Grid
ID: bento
標誌性特徵: 不對稱模組化卡片組合，具有嚴格的視覺權重層級、多樣化的內部區塊結構，以及統一的空間節奏。
這是一個風格套件，並非強制性的預設值。僅在明確選擇或已確認的適用專案樣式時才載入它。專案指令可以覆寫個別選擇。請保留無障礙性、實用性與品牌限制。字型是建議，而非必要的依賴。一個統一的 3x2 相同功能卡片的網格不能算是 Bento Grid。
適合情境 / 取捨
- 適用於： 產品概覽、作品集登陸頁面、開發者功能探索、儀表板摘要，以及硬體/軟體生態系統展示。
- 應謹慎使用的情況： 大量線性表格資料或逐步交易流程，因為不對稱網格可能會干擾逐步的順序進行。
- 參考方向：
- 現代霧面深色 Bento: 黑曜石/石板色背景 (
#0B0D10) 搭配微微浮起的石墨色卡片 (#15191E)、1px 半透明邊框 (rgba(255, 255, 255, 0.08)) 以及一個鮮明的強調色。 - 簡潔建築風格淺色 Bento: 清爽的米白畫布 (
#F8F9FA) 搭配純白瓷磚、細髮絲分隔線 (rgba(0, 0, 0, 0.06)) 以及深炭灰色排版。
- 現代霧面深色 Bento: 黑曜石/石板色背景 (
Bento Grid 保真度閘門 — 強制執行
在將 Bento Grid 頁面視為完成之前，開啟的可視區域必須明顯呈現為一個經過精心策劃、不對稱的模組化組合。 如果使用者選擇了此風格，一個由相同卡片（圖示 + 標題 + 段落）組成的統一網格就是直接的 FAIL，因為它代表了通用的模板劣作。
一個成功的 Bento Grid 實作必須展示所有以下幾點：
- 清晰的不對稱視覺權重： 網格具有明確的焦點層級：恰好 1 個主導性的大區塊（跨 2x2 或 2x1 欄）傳達主要訊息，1–2 個中等次要區塊，以及 2–3 個緊湊的第三級區塊。
- 多樣化的內部區塊結構： 每個區塊都擁有獨特的內部佈局，以適應其特定內容。區塊 1 可能包含一個互動式程式碼區塊；區塊 2 是一個可切換的開關元件；區塊 3 是一個視覺預覽或圖表；區塊 4 是一個即時指標讀數。重複的相同佈局在區塊之間是失敗的。
- 統一的空間節奏與間距對齊： 區塊邊框必須嚴格沿著一致的 CSS Grid（例如 3 或 4 欄）對齊，具有統一的間距 (16px–24px) 和匹配的圓角 (20px–28px)。
- 深思熟慮的行動裝置重組： 在行動裝置的可視區域上，多欄的 Bento 必須重新調整為一個符合邏輯、優先考慮內容的單一欄位，且不剪裁內容或導致尷尬的水平溢出。
- 可讀的內部層級： 每個區塊都有一個清晰、簡潔的標題 (18px–24px) 和高對比度的內容，避免在狹小的區塊中塞入大量小字。
首屏測試： 在桌面版螢幕截圖中，不需要閱讀頁面標題就能識別出主導性的主區塊、多樣的內部區塊呈現方式以及統一的網格對齊。如果所有區塊看起來都一樣，請重新設計網格層級。
明確的 Bento 佈局例外 — 鼓勵不對稱區塊
Bento 特有的覆寫： 通用的反劣作警告（關於過多的卡片或儀表板雜亂）絕對不能被解釋為在此禁止多區塊佈局。一個真正的 Bento Grid 本質上是模組化且分割的，就像一個日本便當盒，每個隔間都裝著不同的菜餚。
- 允許的佈局處理方式： 不對稱的網格欄/行跨距 (
grid-column: span 2; grid-row: span 2;)、微妙的卡片懸浮效果、嵌入的互動式迷你控制項（開關、程式碼分頁），以及活躍區塊上的環境邊緣發光效果。 - 反劣作邊界： 禁止在 Bento 區塊內進行卡片內嵌卡片。一個區塊本身就是一個資訊容器；請使用排版層級、分隔線和間距來建立內部結構，而不是在裡面再嵌套另一個卡片。
- 反劣作解讀： 評估 Bento 佈局應根據內容多樣性、資訊密度和閱讀層級，而不是計算卡片數量。統一的功能網格是劣作；精心策劃的不對稱 Bento 組合才是真正的設計。
排版與字體
當代、精緻的無襯線字體：DM Sans、Manrope、Inter 或系統無襯線字體。主要主標題：28–44 px (字重 700)；區塊標題：18–22 px (字重 600)；內文：14–15 px；說明文字/標籤：12–13 px。保持內文簡短且易於掃讀。
色彩方向
- 深色模式 (預設現代霧面):
- 畫布底色: 黑曜石深石板色 (
#0B0D10)。 - 區塊背景: 浮起石板色 (
#15191E)。 - 主要排版: 清晰瓷白色 (
#F4F4F6)。 - 次要 / 柔和文字: 平衡冷灰色 (
#9CA3AF— 通過 4.5:1 WCAG AA)。 - 髮絲邊框: 半透明白色描邊 (
rgba(255, 255, 255, 0.08))。
- 畫布底色: 黑曜石深石板色 (
- 淺色模式 (簡潔建築風格):
- 畫布底色: 清爽米白色 (
#F8F9FA)。 - 區塊背景: 純白瓷白色 (
#FFFFFF)。 - 主要排版: 深炭灰色墨色 (
#111827)。 - 次要 / 柔和文字: 石板灰色 (
#6B7280— 通過 4.5:1 WCAG AA)。 - 髮絲邊框: 半透明深色描邊 (
rgba(0, 0, 0, 0.08))。
- 畫布底色: 清爽米白色 (
- 品牌強調色: 高對比度的標誌性顏色（例如電子紫
#8B5CF6、青色#06B6D4或翡翠綠#10B981）需滿足在深色與淺色區塊填充上至少有 3:1 的對比度。 - 主題耦合與反衝突規則： 畫布、區塊表面、排版和邊框必須以同步配對的方式進行調整。切換到深色模式時，文字必須變亮；切換到淺色模式時，文字必須變暗。永遠不允許深色文字 (
#111827) 出現在深色區塊上，或白色文字 (#FFFFFF) 出現在淺色區塊上。
佈局與幾何
CSS Grid: grid-template-columns: repeat(3, 1fr) 或 repeat(4, 1fr)；間距：16px–24px。卡片圓角：20px–28px。所有區塊邊框必須沿著水平和垂直網格軌道齊平對齊。
表面、深度、紋理
- Bento 區塊: 實心背景搭配微妙的髮絲描邊 (
1px solid var(--taste-bento-border)) 和柔和環境陰影 (0 8px 24px rgba(0, 0, 0, 0.12))。 - 懸停互動: 微妙的浮起效果 (
transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18))。
元件結構與互動
- 主區塊 (2x2 或 2x1): 主要價值主張、豐富視覺或即時程式碼預覽、顯眼的行動呼籲按鈕。
- 互動式行動區塊: 整合式開關、快速篩選或可複製的命令區塊。
- 指標 / 狀態區塊: 乾淨的數字表格，帶有具體標籤和真實數據。
- 展示區塊: 高傳真螢幕截圖、素材預覽或架構圖。
動態效果
140–220 ms 平滑的 ease-out 曲線。懸停時區塊有節制地浮起。避免在多個區塊上同時出現分散注意力的競爭性動畫。
可選的 Anime.js v4 配方
- 動態決策： 交錯的微妙區塊入場效果或平滑的懸浮效果。
- 起始持續時間： 180ms (0 = 立即)；根據任務和使用者偏好進行調整。
- 避免： 區塊翻轉、不穩定的縮放、漂浮循環的干擾。
- 依賴： 預設使用 CSS/原生動畫。僅當請求的互動證實其必要性時，才使用 Anime.js v4。當存在時，請遵循 Taste Engine 的
references/motion-engine.md；獨立技能則遵循上述的減少動態和無裝飾循環原則。
UI 文案與微文案
直接、有力且資訊豐富。範例：「立即部署」、「零配置」、「48ms 延遲」。避免模糊的流行詞，如「下一代綜效」。
入門 Token（建議，非完整主題）
| Token | 深色模式預設值 | 淺色模式預設值 |
|---|---|---|
--taste-bento-bg | #0b0d10 | #f8f9fa |
--taste-bento-surface | #15191e | #ffffff |
--taste-bento-text | #f4f4f6 | #111827 |
--taste-bento-text-muted | #9ca3af | #6b7280 |
--taste-bento-border | 1px solid rgba(255, 255, 255, 0.08) | 1px solid rgba(0, 0, 0, 0.08) |
--taste-bento-radius | 24px | 24px |
--taste-bento-gap | 20px | 20px |
--taste-bento-shadow | 0 8px 24px rgba(0, 0, 0, 0.25) | 0 8px 24px rgba(0, 0, 0, 0.06) |
--taste-bento-accent | #8b5cf6 | #7c3aed |
--taste-bento-font-body | DM Sans, Manrope, system-ui, sans-serif | DM Sans, Manrope, system-ui, sans-serif |
--taste-bento-motion-duration | 180ms | 180ms |
Token 代表一個方向，並非保證適用於每個色板/平台的複製貼上。請在專案層級定義 --taste-bento-*，確保色彩對比度，並透過主題 Token 進行調整，而非散佈字面值。
主視覺區塊組合（完整首屏）
當面對公開的作品集/登陸頁面/首頁有主視覺區塊時： 使用一個佔滿單一可見螢幕的頁首+主視覺區塊組合。基礎高度使用 min-height: 100svh 並以 100vh 作為備援，且僅在頁首處於正常文件流中時才減去實際的頁首高度；讓主視覺區塊能夠為了無障礙性和短小的行動裝置螢幕而擴展。請勿將此應用於私密儀表板或其他任務畫面；使用者的直接覆寫規則優先。特定樣式方向： 將頂部區域安排為一個英雄 Bento Grid，其中主要產品故事佔據主要的 2x2 區塊，而支援性的證明點則環繞在周圍。不要為了填滿高度而強行將 8 個小卡片塞進首屏。當存在時，請參閱路由器中的 references/hero-layout.md。獨立使用時也遵循相同的響應式和反劣作原則。
樣式特定品質閘門
- 應執行： 驗證主區塊具有清晰的視覺主導性；確保每個區塊都有獨特的內部佈局；檢查網格在行動裝置上的折疊情況；維持一致的間距；驗證深色/淺色模式切換的對比度：確保畫布、區塊表面、排版和邊框以配對方式切換，並通過 WCAG AA（至少 4.5:1）。
- 不應執行： 不要產出重複的 3 卡片或 4 卡片模板；避免在區塊內嵌套卡片；避免不可讀的迷你圖表或虛假指標標籤；不允許主題衝突，例如深色背景上的深色文字、白色背景上的白色文字或看不見的邊框。
- 確認桌面與行動裝置的一致性；可視的鍵盤焦點樣式 (
:focus-visible)；載入中、空白、禁用、錯誤和成功狀態；減少動態行為 (prefers-reduced-motion)。 - 不要將樣式特定的假設注入到不相關的專案中。當結合樣式時，明確命名主要樣式和借用的功能。
通用反劣作閘門（自包含）
每個元素都必須有其存在的理由。內容先於裝飾。不要裝飾不確定性。 不要發明餘額、指標、見證、使用者、標誌、認可、已驗證/線上/離線狀態、虛假活動或成功確認訊息；請使用誠實的空白/載入中/錯誤狀態來代替。僅在請求並明確標示的情況下，才可接受展示用資料。
不要添加裝飾性的卡片內嵌卡片層：一個嵌套的表面必須代表一個不同的互動或資訊邊界。避免自動生成的 3 功能網格、4 統計儀表板、虛假的主視覺區塊聲明、無目的的圖表、徽章/晶片/圖示濫用、不相關的裝飾藝術以及僅僅為了填滿可視區域而進行的隨機迴圈。偏好使用排版、間距、對齊和分隔線來進行分組。同級的內容需要刻意的視覺平衡。
反劣作文案撰寫： 不使用通用的「釋放你的潛力」、「體驗未來」、「加速你的工作流程」、「無縫」等說法或翻譯後的等效詞彙。標題必須傳達實際內容，行動呼籲按鈕必須命名該動作，空白/錯誤/成功文字必須描述真實狀態和後續步驟。避免虛假的緊迫感、捏造的數字、模糊的 AI 炒作、不必要的表情符號以及不可讀的全大寫文字牆。根據此風格和使用者語言調整措辭，但不要改變事實。
主題與模式對比度完整性： 當使用者要求深色模式或淺色模式（或建立主題切換器）時，背景和前景顏色必須在所有表面、文字、邊框、輸入框和語義徽章上以同步配對的方式翻轉。永遠不要留下黑色背景上的黑色文字、白色背景上的白色文字，或不可讀的低對比度狀態膠囊。所有狀態都必須滿足 WCAG AA 對比度（一般/正常文字至少 4.5:1，大標題和互動邊界至少 3:1）。
響應式與動態： 有意識地設計行動裝置版本，檢查長標籤、焦點狀態和無障礙對比度；不要為了符合時髦的佈局而裁剪文字。預設為靜態；使用動畫來實現有意義的互動，尊重減少動態的偏好設定，避免在沒有真實狀態的情況下使用彈跳/漂浮/脈衝裝飾。
嚴重/高優先級發現會阻塞完成： 偽造的狀態/數據、壞掉的動作、無法存取/被裁剪的控制項、誤導性的文案、主題對比度衝突或重大的行動裝置失敗都必須修復。報告實際驗證了什麼；不要聲稱未執行的測試。
這不是美學否決權： 當表達性色彩、陰影、漸層、卡片佈局或裝飾性處理是所選美學的有意部分並通過可用性檢查時，它們是合法的。不要默默強制極簡主義。
反劣作：特定樣式
精心策劃的組合，非自動生成的卡片網格。
- 拒絕： 相同卡片的統一網格、卡片中的卡片嵌套、沒有單位的虛假指標、沒有明確含義的佔位圖示、僅為平衡 CSS Grid 而添加的空區塊，以及文字在區塊表面上仍然無法閱讀的深色/淺色模式顏色衝突。
- 取而代之： 根據實際的不同功能或使用者操作來設計每個區塊，並具有不對稱的權重和易於掃讀的標題。
- 文案檢查： 每個區塊標題必須傳達實際的功能用途或使用者行動。