僅在使用者明確選擇或已確認的專案設定指定此風格時，才可使用此技能。對於未經說明的新 UI 需求，請使用風格選擇器（如 style-selector），而非由 AI 自行決定使用者喜好。現有的品牌、無障礙規範和使用者覆寫規則，其優先級高於以下所有範例。以下風格指南並非允許在風格選定前就開始撰寫 UI 程式碼。
風格套件：Glassmorphism (毛玻璃效果)
ID: glassmorphism
特徵標記: 視覺上結霜、半透明的表面，浮在具層次感的光/色層之上，內容清晰且具有功能性的深度感。
這是一種選擇性採用 (opt-in) 的風格，非引擎預設。僅在由使用者選定或專案設計系統已確立時才啟動。請尊重產品結構、品牌方向、無障礙規範及現有互動。一個帶有藍色按鈕的通用深色頁面不算是 Glassmorphism。
適合場景 / 取捨考量
- 適合用於： 表達性強的作品集、產品登陸頁面、導覽覆蓋層、媒體介面、創意儀表板及受範圍限制的 UI 展示。
- 謹慎使用於： 資料密集的表格、長篇閱讀內容、無障礙要求高的表單，或文字背後是不可預測的照片素材。請將高密度內容放置在適當的實色或強烈色調的表面上。
- 參考方向： 一種 輕盈、如牛奶般結霜的玻璃窗格，搭配柔和的藍色環境光與圓潤的幾何造型；或是 深色、煙燻玻璃系統，採用半透明石板色面板、柔和的紫/青色照明與清晰易讀的控制項。兩者皆有效，且不強迫使用固定的品牌色板。
玻璃材質保真門檻 —— 強制性
在稱一個毛玻璃頁面完成前，開啟的視口 (viewport) 必須在視覺上明顯表現出玻璃的構成。 如果使用者選擇了此風格，而頁面僅有大型背景、字體和一個傳統按鈕，即使 CSS 變數名為 glass，這仍是不合格 (FAIL)。
一個成功的顯著玻璃元件必須展示所有以下條件：
- 背景深度： 在表面背後有意義且可辨別的襯托背景（柔和的淺色區域、受控制的漸層、形狀、專案提供的照片，或現有應用程式內容）。玻璃需要有東西可以視覺性地濾過。Taste Engine 的 anti-slop 機制明確允許 Glassmorphism 使用有目的的漸層和環境色塊，因為它們能建立光線穿過玻璃窗格的視覺效果。它們本質上不是 slop。
- 半透明感： 面板讓一些背景的色度/亮度影響其外觀。避免使用行銷為玻璃但實際上是完全不透明的深色卡片。
- 結霜感：
backdrop-filter: blur(...)（以及必要的-webkit-backdrop-filter）能在窗格範圍內明顯柔化背景細節，而窗格附近的未遮罩背景則保持清晰。僅有模糊的背景圖像不算結霜玻璃。 - 可讀的邊緣與深度： 柔和的亮邊/高光、些微的內部光澤、適當的圓角輪廓，以及克制的陰影或分離感。玻璃應有可感知的邊界，而非一塊平坦的灰色石板。
- 內容清晰度： 文字、焦點指示器、控制狀態和動作在實際合成的背景上，以及在停用輔助效果的情況下，仍能保持清晰易讀。
首視口測試： 在桌面螢幕截圖中，不需閱讀頁面標題，就能辨識出主體窗格、其背後獨特的背景、窗格邊界內部模糊/色調調整的外觀，以及其邊緣高光。如果無法做到，請在添加更多內容前修改材質。
非卡片數量規則： 一個顯著的主題窗格或少量元件展示表面就已足夠。不要用相同的透明卡片覆蓋每個區塊。在元件展示頁上，使用真實、功能性的範例（例如開關、輸入框、對話框、快顯通知作為標記的展示、導覽）來展示材質及其狀態；不要虛構真實的產品狀態或社交證明。
明確的背景漸層例外——玻璃允許發光
Glassmorphism 特定覆寫： 通用 anti-slop 警告中針對通用裝飾性漸層的規則，在此不得被解釋為禁止漸層、網格狀色場、模糊的色塊、環境照明或連貫的背景圖像。這些是有效的實現材質所需的底層層，即使它們是裝飾性的，因為它們使半透明感、結霜感、邊緣和深度得以被感知。此豁免並非允許偽造內容或無法存取/效能低下的效果。
- 允許的背景處理方式： 1–3 個連貫的
radial-gradient()淺色區域、克制的多段線性或網格漸層、使用偽元素產生的模糊有色環境形狀、符合品牌的插圖/照片，或窗格背後的現有內容。靜態 CSS 通常就足夠，無需額外的圖片或動畫庫。 - 輕盈 / 乳白色範例： 白色/冰色底，搭配冷色藍/薰衣草紫的柔和淺色區域，置於半透明白色卡片之後；窗格需明顯柔化色彩邊界。
- 暗色 / 煙燻範例： 深色墨底，搭配受控的紫/青/湖水綠亮色區域，置於半透明石板色窗格之後；明亮的漸層區域不得遮擋白色正文文字。
- 構圖要求： 至少放置一個光/色過渡或可識別的背景元素，使其部分位於主要玻璃窗格之後並延伸至窗格外，以便能看見濾鏡前後的差異；一個均勻的全螢幕漸層而無局部變化仍可能不合格。
- 深度控制： 背景的強調程度應低於內容；使用少量光源，並具有自然的衰減和有意義的位置，而非在每個頁面都使用預設的紫色/藍色色塊。使用使用者的品牌色板和提供的參考。
- 效能與無障礙： 偏好靜態 CSS 漸層和克制的表面。避免全螢幕移動的漸層動畫、過度的全頁背景模糊、極小且對比度低的文字，以及隱藏的焦點環。尊重透明偏好設定，並測試可讀的不透明備援方案。
- Anti-slop 解讀： 應根據材質目的、克制程度和易讀性來評估漸層，而非僅因其存在就判定為 slop。為了滿足一個通用的漸層啟發式規則而移除有用的玻璃背景，是一種設計上的退步。
一個好的螢幕截圖應能讓結霜材質一目了然，即使所有標題和標籤都被隱藏。請參閱 examples/glassmorphism/frosted-surfaces.css 以取得入門實作，以及 tests/glassmorphism-visual.md 以了解視覺驗收標準。
字體排版與字型
使用適合品牌的乾淨無襯線字體（系統無襯線字體、DM Sans、Inter 等）。典型閱讀尺寸為 15–17 px；顯示用字型可以更大。保持強烈的字體層級，並避免在可變的玻璃背景上使用極細字重。淺色結霜面板通常需要深色前景文字來增強清晰度；深色煙燻面板則需要高對比的米白色。切勿用彩色光暈替代字體層級結構。
色彩方向
根據上下文選擇一個連貫的方向，或使用使用者的參考：
- 結霜淺色 / 乳白玻璃： 淺冰白色或淺灰色底色 (
#F0F4F8)，在半透明白色窗格 (rgba(255, 255, 255, 0.45)) 後方放置冷藍色或其他品牌色調的擴散光。字體顏色為深石板色 (#0F172A)，次要顏色為柔和石板色 (#475569)。沿上邊緣可見柔和的玻璃高光 (rgba(255, 255, 255, 0.75))。 - 煙燻深色 / 夜間玻璃： 深海軍藍/墨色 底色 (
#090D16)，在藍灰色半透明面板 (rgba(22, 28, 45, 0.55)) 後方放置紫/藍/青綠色環境光區域。前景文字為清晰的瓷白色 (#F8FAFC)，次要顏色為柔和石板色 (#94A3B8)；深色面板不是接近不透明的矩形。 - 主題耦合與衝突迴避規則： 在淺色和深色玻璃模式之間切換時，前景文字、邊框和環境光源必須同步切換。前景文字必須在結霜玻璃表面及其後方照亮的背景上，均維持至少 4.5:1 的對比度。切勿在煙燻深色玻璃上使用深色文字，或在結霜淺色玻璃上使用白色文字。
單靠顏色不是 Glassmorphism。切勿對每個品牌都使用霓虹紫/青色作為預設。保留品牌色並滿足高對比度需求。檢查實際合成後的前景對比度（WCAG AA 標準：一般文字 4.5:1，大型文字 3:1；相關非文字控制項至少 3:1）。
佈局與幾何
- 使用有目的性的前景/背景構圖：環境背景 → 玻璃表面 → 清晰的內容與互動控制項。區分 2–3 個深度平面，避免巢狀卡片混亂。
- 使用一致的圓角（大型窗格通常為 16–28 px）和間距。避免為了達到 100svh 而讓首視內容過大但幾乎空白。
- 在響應式螢幕上，窗格應能整齊堆疊，保持可讀的內距，並避免模糊效果被裁剪或溢出。標頭、主題內容和控制項必須能自然適應或擴展。
表面、深度、質感
- 玻璃配方： 半透明色調 (
rgba(...)或color-mix)、backdrop-filter: blur(16px) saturate(140%)、半透明的 1px 邊框、柔和的內部頂部高光，以及柔和的層疊陰影。從約 12–24 px 的模糊強度開始，然後根據實際背景進行調整。 - 淺色玻璃： 使用白色色調表面，alpha 值約 0.24–0.55（取決於背景）；透明度過低會消除結霜效果。仍須確保強烈的文字對比度。
- 深色玻璃： 使用石板/靛藍色調，alpha 值約 0.25–0.56，具有可見的較亮邊緣和背後形成對比的環境光。避免純黑石板和刺眼的霓虹光暈。
- 深度提示： 面板後的柔和模糊背景、克制的內部光澤、微妙的邊緣發光/反射。不需要通用的氣泡桌布。
- 使用
@supports提供備援方案，在 backdrop-filter 不可用時，改為使用實色可讀表面。提供減少透明度/高對比度的替代方案。模糊效果本身絕不能成為理解內容或進行互動的必要條件。
請參閱完整 Taste Engine router 中的 examples/glassmorphism/frosted-surfaces.css（上述 Token 配方在獨立安裝中也可用），以取得獨立的淺色和深色起始 Token。根據專案調整 Token；不要複製所有範例或強制使用固定色板。
元件結構與互動
- 主題區 (Hero)： 立即讓選定的美學風格變得明顯。將實際的 Taste Engine/專案標題和呼籲行動按鈕放在玻璃平面的內部或與之重疊，或呈現一個同樣令人信服的玻璃窗構圖。在窗格後方提供有意義的照明背景。
- 頁首/導覽： 微妙的結霜列可以重疊在背景上，但需保持對比度和可視焦點。在展示玻璃 UI 時，避免使用一個視覺上與頁面脫節的平面不透明頂部欄。
- 功能性範例： 具有真實開/關狀態的開關、可選的選項、分頁標籤、模態框、表單，以及僅在確實觸發時或清楚標記為靜態展示的快顯通知。在適用時顯示獲得焦點、懸停、啟用、停用和錯誤狀態。前景控制表面的不透明度可以高於上層玻璃，以確保可用性。
- 按鈕： 可以為了可操作性和提示性而使用實色強調色表面；並非每個控制項都必須是透明的。一個傳統按鈕不能補償其他地方的玻璃效果缺失。
- 內容： 對長段落、表格和表單，保留使用強烈色調或實色可讀容器；不要將段落放置在雜亂的半透明圖像上。
動態效果
使用互動反饋而非環境移動。在懸停、選擇、窗格揭示或模態框開啟時（僅限於使用者操作觸發時），使用 140–220 毫秒的淡入/位移效果。保持玻璃層的連續性。避免無盡的漂浮球體、移動光束或強制 3D 旋轉。
可選的 Anime.js v4 配方
- 動態決策： 大多數互動使用 CSS/原生轉場即可；Anime.js v4 是選用的，用於協調狀態轉換，而非必需的視覺依賴。
- 起始持續時間： 180 毫秒，不使用彈跳效果的緩動函數。對
opacity/transform進行動畫（對合成器友善），而不是持續動畫模糊或 box-shadow。 - 減少動態： 尊重
prefers-reduced-motion設定，並允許中斷/短路轉場。 - 依賴： 遵循 Taste Engine 的
references/motion-engine.md（如可用）；獨立安裝的技能也適用相同指引。
UI 文案與微文案
直接、與產品相關且簡潔。玻璃是一種材質，不是使用模糊文案（如「未來是透明的」）的藉口。避免虛構的徽章、驗證狀態、使用者、生產力分數或推薦。展示資料必須明確標記。
起始 Token（建議，非完整主題）
| Token | 淺色玻璃預設值 | 深色玻璃預設值 |
|---|---|---|
--taste-radius-sm | 14px | 14px |
--taste-radius-lg | 24px | 24px |
--taste-glass-blur | 18px | 18px |
--taste-glass-bg | #f0f4f8 | #090d16 |
--taste-glass-surface | rgba(255, 255, 255, 0.45) | rgba(22, 28, 45, 0.55) |
--taste-glass-text | #0f172a | #f8fafc |
--taste-glass-text-muted | #475569 | #94a3b8 |
--taste-glass-light | rgba(255, 255, 255, 0.38) | rgba(255, 255, 255, 0.38) |
--taste-glass-dark | rgba(36, 45, 72, 0.38) | rgba(36, 45, 72, 0.38) |
--taste-glass-edge-light | rgba(255, 255, 255, 0.65) | rgba(255, 255, 255, 0.18) |
--taste-motion-duration | 180ms | 180ms |
這些僅為起始值。最終結果必須根據實際內容和背景進行檢查。請勿偷偷載入字體、插圖或動態庫。
主題區構成（完整首視口）
對於具有主題區的公開作品集/登陸頁面/首頁，請使用頁首 + 主題區的首視口構成（min-height: 100svh，附 100vh 備援），而非使用剪裁的固定高度主題區。根據需要減去一個實際存在於文檔流中的頁首尺寸，而不是為覆蓋層減去兩次。在較短的行動裝置螢幕上和放大時應自然增長。材質要求： 首視口顯示一個無可否認的結霜窗格，濾過一個可見且精心構成的背景——而不是在普通文字上方有 80% 的空白深色空間。通過有意義的層次結構和符合品牌的環境光來建立視覺趣味；不要虛構照片、假……