kennedys0/taste-style-claymorphism

僅在使用者明確選擇、或已確認的專案設定指定此風格時，才使用此技能。對於未說明的全新 UI 請求，請使用風格選擇器（例如 taste-style-selector）來決定，而不是在這裡替使用者決定喜好。現有的品牌規範、無障礙要求和使用者自訂，其優先級均高於以下所有範例。以下風格指南並非允許在進行風格選擇之前就開始 UI 編寫。

風格包：黏土風格 (Claymorphism)

識別碼： claymorphism
特色： 經過塑形、具有觸感的雕塑表面，結合雙重內陰影營造的立體深度、柔和的環境投影，以及友善的實體感。

這是一個風格包，而非強制性預設值。僅在明確選擇後，或已確認的專案風格適用時，才載入它。專案指示可以覆蓋個別選擇。請保留無障礙、實用性與品牌限制。字型為建議選項，非必要依賴。一個帶有圓角和 1px 邊框的平面卡片不符合黏土風格。

適用情況 / 權衡

• 適用於： 有趣的消費者體驗、創意工具、個人儀表板、互動式小工具、具觸感的網頁應用程式，以及現代化的教育或設計平台。
• 需要留意： 極度密集的表格資料、長篇法律文件閱讀，或在低功耗裝置上，若過多的陰影計算影響效能。
• 參考方向：
  • Primary Saturated Clay： 濃郁鮮明的紫羅蘭/紫色 (#813FFC) 塑形表面，左上角帶有亮白色內部高光，右下角帶有深色調的立體陰影，以及清晰的字體。
  • Light Porcelain Clay： 柔和的米白 (#ECEBF5) 塑形表面，左上角帶有純白色內部高光，右下角帶有柔和的灰薰衣草色立體陰影，以及深板岩紫的字體。
  • Sunken Inset Wells： 凹陷的表單輸入欄位，帶有清晰的白色浮雕邊框 (3px solid rgba(255, 255, 255, 0.85))、反向的內陰影，以及可存取的佔位符標籤。

黏土材質真實性把關 — 必做

在將黏土風格頁面視為完成之前，開啟的視口必須能明顯看出是雕塑過的黏土構圖。 如果使用者選擇了此風格，一個帶有圓角和 1px 邊框的平面卡片，即使 CSS 變數命名為 clay，也是一個失敗。

一個成功的黏土風格實作必須證明所有以下幾點：

1. 立體雙重內陰影（高光 + 陰影）： 黏土表面必須具有相對的雙重內陰影：一個左上方的內部高光模擬入射光 (inset 3px 4px 6px rgba(255,255,255,...))，和一個右下方的內部立體陰影模擬體積厚度 (inset -4px -6px 8px rgba(dark-tint,...))。單一平面高光線或一般斜面皆為失敗。
2. 柔和色調的環境投影： 表面會投射柔和、有方向性、帶色調的投影 (8px 16px 24px rgba(..., 0.20–0.35))，營造出可塑材質漂浮或置於有色畫布上的感覺，而非生硬的黑色投影。
3. 豐滿的超級橢圓與藥丸幾何： 充足的曲率（卡片 24px–32px，按鈕 20px–26px，藥丸或圓形 9999px，複選框 14px 超級橢圓）。尖銳的 90 度角為失敗。
4. 凹陷與凸起極性： 可操作的元件（按鈕、徽章、切換拇指、卡片）向外凸起；容器井（輸入欄位、非活動開關軌道）向內凹陷，具有反向的內陰影和可選的白色浮雕邊框。
5. 互動時的觸覺壓縮： 在懸停、聚焦和點擊時，控制項會有物理反應，伴隨細微的縮小 (scale(0.97–0.98) 或 translateY(1–2px)) 和更緊實的陰影，感覺就像真實、可塑的黏土被手指按壓。

第一個視口測試： 在桌面截圖中，在不閱讀頁面標題的情況下，找出凸起的雕塑按鈕、雙重內部高光/陰影，以及凹陷的輸入井。如果它們看起來是平面的或只是圓角，請在添加更多內容之前修改陰影權杖。

不是卡片數量規則： 一個重點元件的展示（例如主要的「提交」藥丸按鈕、次要的「返回」藥丸按鈕、圓形動作按鈕、觸感切換開關、複選框和凹陷的輸入欄位）足以建立真實的材質真實性，而無需用嵌套的氣球卡片覆蓋整個畫面。

明確的黏土深度例外 — 允許黏土具有立體深度

黏土風格專用覆寫： 針對過度陰影、光澤效果或新擬態模糊的通用「反浮誇」警告，不得被解讀為禁止在此使用雙重內陰影、柔和的環境投影或白色浮雕外框。這些是賦予材質真實性的屬性，對於觸覺上的實體感至關重要。

• 允許的材質處理方式： 雙重內陰影（相對的亮/暗）、柔和的多層次有色環境陰影、白色浮雕邊框 (3px solid rgba(255,255,255,0.85))，以及觸覺按壓變形 (scale(0.97))。這些營造了必要的觸感深度和實體感。靜態 CSS 即可完成完整的材質真實性，無需任何動畫庫開銷。
• 色彩對比紀律： 飽和的主要黏土按鈕需要純白色文字 (#FFFFFF)，且對比度至少為 4.5:1。淺色瓷器黏土表面需要深色文字 (#28233D 或 #1D1735)。凹陷的井需要清晰、可存取的佔位符文字 (#7C739E 或更深)。
• 反浮誇解讀： 應根據材質目的、物理連貫性和可讀性來評估黏土深度，而不是計算 CSS 陰影聲明的數量。為滿足通用的極簡啟發法而移除雙重內陰影是一種設計退步。

請參閱 examples/claymorphism/sculpted-surfaces.css 取得入門實作，以及 tests/claymorphism-visual.md 取得視覺驗收標準。

字體與打字

友善的人文主義或幾何無襯線字體：Manrope、Nunito Sans 或系統無襯線字體。標籤使用粗細 500/600/700，標題使用 700/800。縮放比例 14/16/20/26/34 px；行高 1.45–1.6。偏好句子大小寫和簡潔、人性化的標籤。避免在立體表面上使用看起來脆弱的細薄顯示字體。

色彩方向

選擇一個和諧的粉彩與飽和色調色板：

• 淺色模式（淺色瓷器黏土）：
  • 畫布底色： 柔和的粉彩淡紫/薰衣草色 (#D7D1F1 或 --taste-clay-bg: #d7d1f1)。
  • 主要飽和黏土： 鮮豔的紫羅蘭/紫色 (#813FFC) 搭配白色文字 (#FFFFFF)，左上角亮白色高光，右下角深紫色立體陰影。
  • 次要淺色黏土： 柔和的米白瓷器 (#ECEBF5 / #F0EFF7) 搭配深色墨水 (#28233D)，左上角亮白色高光，右下角柔和的薰衣草色立體陰影。
  • 凹陷輸入井： 帶有畫布色調的井 (#D7D1F1)，由清晰的白色浮雕邊框 (3px solid rgba(255, 255, 255, 0.85)) 框住，凹陷的內陰影，以及易讀的佔位符 (#8F87B0)。
• 深色模式（深夜晚間雕塑黏土）：
  • 畫布底色： 神祕的黑曜石靛藍 (#161326)。
  • 主要飽和黏土： 鮮豔的紫羅蘭/紫色 (#813FFC) 搭配純白色文字 (#FFFFFF)，左上角高光，以及深紫色立體陰影。
  • 次要黏土表面： 濃郁的雕塑梅子/石板色 (#26203D) 搭配清晰的淡色瓷器文字 (#F3F0FA)，柔和的半透明左上角高光 (rgba(255, 255, 255, 0.15))，以及深黑右下角立體陰影 (rgba(10, 5, 25, 0.60))。
  • 凹陷輸入井： 深凹的井 (#1E1A33)，由微妙的浮雕邊框 (3px solid rgba(255, 255, 255, 0.20)) 框住，凹陷的內陰影，以及易讀的佔位符 (#A49BBF)。
• 主題對比耦合： 切換到深色模式時，次要黏土表面上的文字必須從深色墨水 (#28233D) 翻轉為淡色瓷器 (#F3F0FA)。在深色黏土上留下深色墨水文字會立即造成對比失敗。飽和的主要按鈕在兩種模式下都保留純白色文字 (#FFFFFF)，對比度維持在 4.5:1 以上。

版面與幾何

卡片圓角 24–32 px，按鈕 20–26 px，完整藥丸或圓形 9999px，超級橢圓徽章和複選框 14–16 px。保持一致 8 px 節奏和舒適的間距。避免沒有語義互動的隨機圓形。

表面、深度、紋理

表面必須感覺像是從物理消光黏土中塑形而成：

• 主要黏土（凸起）： box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40), 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20);
• 淺色瓷器黏土（凸起）： box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35), 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12);
• 凹陷井（凹陷）： box-shadow: inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70); 並加上 border: 3px solid rgba(255, 255, 255, 0.85);

元件結構與互動

• 主要按鈕 ("Submit >")： 飽和紫色藥丸，白色粗體文字，方向箭頭，點擊時觸覺壓縮。
• 次要按鈕 ("Go Back ↶")： 淺色瓷器藥丸，深色墨水文字，返回箭頭圖示，點擊時觸覺壓縮。
• 圓形動作按鈕： 50% 邊框半徑的圓形按鈕（例如暫停 ❚❚），飽和黏土，居中圖示。
• 切換開關： 藥丸形狀的軌道，帶有光滑的黏土拇指球體；在淺色軌道/紫色拇指和紫色軌道/白色拇指之間切換。
• 複選框： 超級橢圓容器，帶有雙重內陰影和鮮豔的紫色勾號 (✓)。
• 輸入欄位： 凹陷的井，帶有左側圖示、易讀的佔位符和白色浮雕邊框。

動畫

140–200 毫秒平滑淡出。按壓時觸覺壓縮 (scale(0.97) 或 translateY(2px)) 並收緊陰影。永遠不要彈跳、超調或執行連續浮動循環。

可選的 Anime.js v4 配方

• 動作決策： 被按下的按鈕有 1–2% 的壓縮和短暫回彈；保留現有的雕塑陰影。
• 起始持續時間： 180ms (0 = 立即)；根據任務和使用者偏好調整。
• 避免： 彈跳、超調、浮動循環。
• 依賴性： 預設使用 CSS/原生。僅在請求的互動證明其合理性時才使用 Anime.js v4。請遵循 Taste Engine 的 references/motion-engine.md（如果可用）；獨立技能遵循上述減少動畫和無裝飾循環的原則。

UI 寫作與微文案

溫暖且具體。範例：「Submit」、「Go Back」、「Enter your Username」、「Saved to drafts」。避免甜膩的 AI 標語或虛假的行銷炒作。

入門權杖（建議，非完整主題）

權杖	淺色模式預設值	深色模式預設值
--taste-clay-bg	#d7d1f1	#161326
--taste-clay-primary	#813ffc	#813ffc
--taste-clay-light	#ecebf5	#26203d
--taste-clay-text	#28233d	#f3f0fa
--taste-clay-muted	#7c739e	#a49bbf
--taste-clay-shadow-primary	8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20)	8px 16px 24px rgba(10, 5, 25, 0.50), 2px 4px 8px rgba(10, 5, 25, 0.30)
--taste-clay-inner-primary	inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40)	inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.50)
--taste-clay-shadow-light	8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12)	8px 16px 24px rgba(0, 0, 0, 0.45), 2px 4px 8px rgba(0, 0, 0, 0.25)
--taste-clay-inner-light	inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35)	inset 3px 4px 6px rgba(255, 255, 255, 0.15), inset -4px -6px 8px rgba(10, 5, 25, 0.60)
--taste-clay-inner-well	inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70)	inset 3px 4px 8px rgba(0, 0, 0, 0.50), inset -2px -2px 6px rgba(255, 255, 255, 0.15)
--taste-clay-well-rim	3px solid rgba(255, 255, 255, 0.85)	3px solid rgba(255, 255, 255, 0.20)
--taste-clay-radius-pill	9999px	9999px
--taste-clay-radius-btn	24px	24px
--taste-clay-radius-card	28px	28px
--taste-clay-radius-squircle	14px	14px
--taste-font-body	Manrope, system-ui, sans-serif	Manrope, system-ui, sans-serif
--taste-motion-duration	180ms	180ms

權杖代表一個方向，並非保證適用於每個調色板/平台的複製貼上。在專案層級定義 --taste-clay-*，確保色彩對比，並透過主題權杖進行調整，而不是分散使用字面值。

英雄構圖（完整的第一個視口）

當面向公眾的作品集/登陸頁面/首頁具有英雄區時： 使用一個可見螢幕的頁首+英雄構圖。基本高度基於 min-height: 100svh，並輔以 100vh 作為回退，僅在頁首處於正常文檔流中時才減去實際頁首高度；讓英雄區擴展以適應無障礙和短螢幕的行動裝置。不要將此應用於私人儀表板或其他任務畫面；使用者的直接覆寫優先。 風格特定方向： 使用一個雕塑過的英雄表面或精心平衡的軟材質環境；將真正的作品集介紹和 Call to Action 放置在首屏構圖中。不要嵌套蓬鬆的卡片來填滿 100svh。黏土深度應保持微妙且有方向性，並有足夠的平面空間。請參閱路由器的 references/hero-layout.md（如果存在）。獨立使用遵循相同的響應式和反浮誇原則。

風格專用品質把關

• 務必做到： 確保可見的觸覺雙重內陰影；保持一致的光源方向（左上到右下）；提供觸覺的啟用/按下狀態；驗證主要和淺色黏土的 WCAG AA 對比度；驗證深色/淺色模式切換，使文字和表面顏色以耦合對的形式適配（例如淡色瓷器文字在深色黏土上，深色墨水文字在淺色黏土上）。
• 不要做： 不要將簡單的圓角視為黏土；避免氣球陰影、過度的光澤光暈、難以閱讀的淺色疊加淺色標籤、裝飾性徽章，以及深色/淺色模式衝突，例如深色文字保留在深色黏土上。
• 確認桌面和行動裝置的一致性；透過視覺回歸測試驗證陰影和間距。維護 docs/visual-regression/claymorphism 中的螢幕截圖，以捕捉在不同環境下的陰影渲染回歸。

與 Taste 路由器的整合

當與 kennedys0/taste-router 一起執行時，此技能會作為 claymorphism 風格註冊：

{
  "style": {
    "signature": "Molded, tactile, sculpted surfaces with dual inner-shadow volumetric depth, soft ambient drop shadows, and friendly physical presence.",
    "direction": "style packs",
    "active": true,
    "qualityGate": { "firstViewport": true, "innerShadowIsDual": true, "shadowIsTinted": true }
  }
}

路由器插入後，需要可見的材質真實性測試才能將任務標記為完成。