僅在使用者明確選擇或確認的專案配置指定此風格時，才使用此技能。對於未說明的新的 UI 請求，請改用風格選擇器（例如 ???），而非在此決定使用者的品味。現有的品牌、無障礙規範和使用者覆寫規則的優先級高於以下所有範例。以下風格指南並非允許在風格選擇前就開始 UI 編碼。
風格包：擬物化 (Skeuomorphism)
ID： skeuomorphism
特色： 數位控制項借用實體物體、工業機械和類比硬體的可觸摸直覺。
這是風格包，非強制預設。僅在明確選擇或確認適用的專案風格後才載入它。專案說明可以覆寫個別選擇。保留無障礙、實用性和品牌限制。字體為建議選項，非必要依賴。帶有微妙漸層的平面卡片不符合擬物化。
合適的應用情境與取捨
- 適合： 音樂製作和合成器軟體、音訊設備工具、專業模擬器、觸覺式儀表板小工具、創意數位樂器，以及有趣的觸覺體驗。
- 需謹慎： 密集的交易資料表格或行動裝置企業表單，因為華麗的實體硬體紋理會造成視覺雜亂。
- 參考方向：
- 拉絲工業鋁 / 錄音室硬體： 採用機械加工銀色或槍金屬底盤，帶有徑向金屬反射、滾花旋鈕、凹陷指示器孔和清脆的機械切換開關。
- 精密霧面儀表： 深石墨 / 霧面複合材料底座，帶有雕刻白色讀數字體、LED 寶石狀態指示燈和實體翹板開關。
擬物化材質真實度關卡 — 強制
在宣告擬物化頁面完成前，首屏必須明顯讀取為一個物理、可觸摸的儀器或硬體界面。 如果使用者選擇此風格，一個帶有標準圓角和單一漸層的平面卡片即為失敗，即使 CSS 類別包含 skeuo。
成功的擬物化實作應展現以下所有特性：
- 光線方向與鏡面高光： 表面遵循一致的光源（通常由上而下）：上邊緣捕捉到清晰的 1px 鏡面高光（
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35)），而下邊緣則投射出實體陰影。 - 多層反射材質表面： 旋鈕、面板和翹板開關使用多層線性或徑向漸層，模擬拉絲鋁、霧面塑膠或陽極氧化金屬。平面單色填充視為失敗。
- 雕刻或凹陷對比： 文字顯示、滑桿和儀表井透過深層內陰影（
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6)）在視覺上沉入底盤，清楚區分會動的控制項和容納它們的容器。 - 互動時的機械行程： 按鈕在點擊時物理下沈入底盤（
transform: translateY(1.5px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);），模仿真實的彈簧開關機制。 - 可讀的類比直覺： 實體旋鈕和滑桿包含清晰的數位讀出或標記的數字刻度線，確保鍵盤無障礙和精確資料輸入。
首屏測試： 在桌面螢幕截圖中，應能在不閱讀頁面標題的情況下識別出實體底盤、鏡面斜角高光、凹陷井和觸覺硬體控制項。如果它看起來純粹是數位和平面，則需加強漸層反射和斜角高光。
明確的擬物化材質例外 — 允許硬體反射
擬物化特定覆寫： 針對 裝飾性漸層、紋理或陰影 的通用反草率警告不得被解釋為禁止多層材質漸層、金屬反射、斜角邊緣或此處的實體行程。這些是啟用材質的屬性，對於傳達機械直覺至關重要。
- 允許的材質處理： 多層金屬線性/徑向漸層、1px 高光斜角、凹陷井通道、滾花旋鈕邊框和寶石 LED 狀態燈。
- 反草率界限： 每個機械隱喻必須對應一個真實、可運作的行動。請勿用假螺絲、非轉動的裝飾旋鈕或顯示偽造測量值的靜態儀表來裝飾螢幕。
- 反草率解釋： 應根據觸覺直覺、功能實用性和可讀性來評估擬物化細節，而非計算漸層色標的數量。為滿足通用的平面啟發式規則而移除實體斜角是一項設計退化。
字體與排版
實用技術無襯線或顯示等寬字體：IBM Plex Sans、DIN Next、Roboto Mono 或系統無襯線字體。控制項標籤：11–13px 大寫字母並設定字距（letter-spacing: 0.08em）；顯示儀表：高對比 LCD/LED 等寬字體（16–24px）。在深色面板上需保持高對比（至少 4.5:1）。
顏色方向
- 深色模式（陽極氧化槍金屬深色底盤）：
- 底盤基底： 機械加工石板 / 陽極氧化槍金屬漸層（
linear-gradient(180deg, #323741 0%, #262A32 100%)）。 - 表面高光： 鏡面白色細線（
rgba(255, 255, 255, 0.40)）。 - 凹陷井： 深腔黑色（
#141619至#181A1E）。 - 控制項標籤： 清晰的雕刻白色/銀色字體（
#F3F4F6）。
- 底盤基底： 機械加工石板 / 陽極氧化槍金屬漸層（
- 淺色模式（拉絲鋁 / 銀色底盤）：
- 底盤基底： 機械加工鋁 / 銀色漸層（
linear-gradient(180deg, #F5F7FA 0%, #E4E7EB 100%)）。 - 表面高光： 鏡面白色細線（
rgba(255, 255, 255, 0.85)）。 - 凹陷井： 柔和的凹陷石板色腔體（
#D1D5DB加上內陰影）。 - 控制項標籤： 深雕刻炭黑色墨水（
#1F2937或#111827）。
- 底盤基底： 機械加工鋁 / 銀色漸層（
- 實體點綴： 信號琥珀色（
#FFAE00）、航空綠（#10B981）或錄音室鈷藍色（#2563EB）。 - LED 指示燈： 清晰的寶石顏色，具有鮮明的啟動發光與關閉暗淡狀態。
- 主題耦合與防碰撞規則： 在淺色擬物化底盤模式下，雕刻標籤和控制項文字必須翻轉為深炭黑色（
#1F2937）。在拉絲鋁/銀色底盤上留下白色標籤會產生不可見的文字，並嚴格禁止。
佈局與幾何
元件形狀嚴格對應其物理隱喻：旋轉撥盤、觸覺按鈕、翹板開關和分段儀表。面板圓角半徑 4–12px；旋鈕為圓形。避免將硬體外皮應用於通用文字段落。
表面、深度與紋理
- 底盤面板： 多層線性漸層（
linear-gradient(180deg, #323741 0%, #262A32 100%)），帶有 1px 頂部高光和底部下拉陰影。 - 實體按鈕： 帶有頂部高光的斜角邊緣、放射狀按鈕表面和清晰的按壓下沈狀態。
- 凹陷井 / 顯示器：
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.15);
元件結構與互動
- 觸覺按鈕： 機械加工鋁表面、白色雕刻標籤、鬆開後機械回彈。
- 翹板 / 切換開關： 雙狀態實體切換，活躍側帶有可見的鑄造陰影。
- 凹陷 LCD / 資料讀出： 沉入式螢幕，帶有等寬值、細微柵格網格和高對比度。
- 旋轉撥盤 / 滑桿： 觸覺位置指示器，帶有 ARIA 滑桿語義和鍵盤方向鍵支援。
- LED 狀態燈： 小型圓形寶石鏡片，啟動時帶有發光效果（
box-shadow: 0 0 8px currentColor）。
動態
140–200 毫秒的機械響應。點擊時直接產生 1–2px 的物理按壓感。無彈性卡通超調；移動必須感覺有重量和阻尼感。
可選 Anime.js v4 配方
- 動態決策： 按壓時採用阻尼彈簧或線性機械按壓；撥盤則為精確旋轉。
- 起始持續時間： 160ms（0 = 立即）；根據任務和使用者偏好調整。
- 避免： 持續震盪、未經觸發的指針抖動、浮動元素。
- 依賴： 預設使用 CSS / 原生。僅在請求的互動證明其正當性時使用 Anime.js v4。當有
references/motion-engine.md時遵循 Taste Engine；獨立使用技能則遵循上述減少動態和無裝飾循環的原則。
UI 文案與微文案
技術、精確、簡潔。範例：「主輸出」、「旁路」、「通道 01」、「增益：+3.5 dB」。避免在儀器面板上使用閒聊式行銷廢話。
入門 Tokens（建議，非完整主題）
| Token | 深色底盤預設 | 淺色底盤預設 |
|---|---|---|
--taste-skeuo-chassis-bg | linear-gradient(180deg, #323741 0%, #262a32 100%) | linear-gradient(180deg, #f5f7fa 0%, #e4e7eb 100%) |
--taste-skeuo-chassis-border | 1px solid rgba(0, 0, 0, 0.8) | 1px solid rgba(0, 0, 0, 0.15) |
--taste-skeuo-chassis-highlight | inset 0 1px 0 rgba(255, 255, 255, 0.25) | inset 0 1px 0 rgba(255, 255, 255, 0.90) |
--taste-skeuo-text | #f3f4f6 | #1f2937 |
--taste-skeuo-btn-bg | linear-gradient(180deg, #3c424f 0%, #2a2e37 100%) | linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) |
--taste-skeuo-btn-bevel | inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.50) | inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(0, 0, 0, 0.20) |
--taste-skeuo-btn-shadow | 0 4px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40) | 0 4px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) |
--taste-skeuo-well-inset | inset 0 3px 6px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.12) | inset 0 3px 6px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.80) |
--taste-skeuo-led-active | #10b981 | #059669 |
--taste-skeuo-led-glow | 0 0 10px rgba(16, 185, 129, 0.75) | 0 0 8px rgba(5, 150, 105, 0.45) |
--taste-skeuo-radius-panel | 12px | 12px |
--taste-skeuo-font-mono | IBM Plex Mono, ui-monospace, monospace | IBM Plex Mono, ui-monospace, monospace |
--taste-skeuo-motion-duration | 160ms | 160ms |
Tokens 代表一個方向，並非保證適用於每個色板/平台的複製貼上。在專案層級定義 --taste-skeuo-*，確保顏色對比，並透過主題 tokens 進行調整，而非散佈文字值。
英雄區塊組合（完整首屏）
當對外展示的入口/登陸/首頁具有英雄區塊時： 使用佔據一整個可見螢幕的頁首+英雄區塊組合。基礎高度設為 min-height: 100svh 並以 100vh 作為後備，僅在頁首處於正常文件流時才減去其實際高度；讓英雄區塊為無障礙和短行動螢幕而擴展。請勿將其應用於私有儀表板或其他任務螢幕；使用者的直接覆寫規則優先。 風格特定方向： 將首屏視為一個真實的主控制台或標誌性儀器面板；提供可工作的控制項和一個明確的主要行動呼籲。請勿用非功能性螺絲、裝飾性電線或斷開連接的類比儀表來塞滿畫布。當存在路由器 references/hero-layout.md 時請參閱。獨立使用時遵循相同的響應式和反草率原則。
風格特定品質關卡
- 務必： 驗證所有控制項上一致的由上而下鏡面高光；確保機械按壓狀態平順下沈；在撥盤/滑桿旁提供數值讀出；測試鍵盤焦點；驗證深色/淺色模式切換，使底盤、斜角高光、井和標籤字體以耦合對形式進行調整。
- 避免： 不要將純深色主題視為擬物化；不要添加非功能性的裝飾螺絲或未連接到真實資料的假類比指針；避免深色面板上不可讀的低對比文字或淺色銀色面板上的白色標籤。
- 確認桌面和行動裝置的一致性；可見的鍵盤焦點（
:focus-visible）；載入、空、禁用、錯誤和成功狀態；減少動態行為（prefers-reduced-motion）。 - 請勿將風格特定假設注入不相關的專案。當合併風格時，明確命名主要風格和借用的特性。
通用反草率關卡（自我包含）
每個元素都必須有其存在的理由。 內容優先於裝飾。請勿裝飾不確定性。 請勿發明餘額、指標、推薦、使用者、標誌、批准、已驗證/線上/離線狀態、虛假活動或成功確認；請改用誠實的空/載入/錯誤狀態。僅在請求並明確標記時，才可接受演示資料。
請勿添加裝飾性的卡片內卡片層級：巢狀表面必須代表一個不同的互動或資訊邊界。避免自動生成的 3 功能網格、4 統計儀表板、虛假的英雄區塊聲明、無目的圖表、徽章/晶片/圖示垃圾郵件、不相關的裝飾藝術，以及僅僅為了填滿視埠的隨機循環。偏好使用字體、間距、對齊和分隔線進行分組。對等的元素需要刻意追求的視覺平衡。
反草率文案： 禁止通用的「釋放你的潛力」、「體驗未來」、「加速你的工作流程」、「無縫」等聲明或其翻譯版本。標題必須傳達實際內容，行動呼籲必須命名該行動，空/錯誤/成功文字必須描述真實狀態和後續步驟。避免虛假緊迫感、虛構計數、模糊的 AI 炒作、無謂的表情符號，以及不可及的全大寫文字牆。根據此風格和使用者的語言調整措辭，而不改變事實。
主題與模式對比完整性： 當使用者要求深色模式或淺色模式（或建構主題切換器）時，背景和前景顏色必須在所有表面、文字、邊框、輸入和語義徽章上以同步對進行翻轉。永遠不要將黑色文字留在深色背景上、白色文字留在白色背景上，或留下不可讀的低對比狀態膠囊。所有狀態必須符合 WCAG AA 對比度（正文/正常文字至少 4.5:1，大型標題和互動邊界至少 3:1）。
響應式與動態： 刻意為行動裝置組合內容，檢查長標籤，聚焦…