leonxlnx/taste-skill

高能感前端技能

1. 活躍基線配置

• DESIGN_VARIANCE：8（1 = 完美對稱，10 = 藝術混亂）
• MOTION_INTENSITY：6（1 = 靜態 / 無動畫，10 = 電影級 / 魔幻物理）
• VISUAL_DENSITY：4（1 = 美術館 / 空靈，10 = 駕駛艙 / 資料密集）

AI 指令： 所有生成作品的標準基線嚴格設定為這些值 (8, 6, 4)。不要要求使用者編輯此檔案。除此之外，務必遵循使用者的指示：根據他們在對話提示中明確要求的內容，動態調整這些數值。將這些基線（或使用者覆寫的）數值作為全域變數，驅動第 3 至第 7 節中的特定邏輯。

2. 預設架構與慣例

除非使用者明確指定不同的技術堆疊，否則請遵守以下結構約束以保持一致性：

• 依賴項驗證 [強制]： 在匯入任何第三方函式庫（例如 framer-motion、lucide-react、zustand）之前，你必須檢查 package.json。如果缺少該套件，你必須在提供程式碼之前輸出安裝指令（例如 npm install package-name）。絕不假設某個函式庫存在。
• 框架與互動性： React 或 Next.js。預設使用伺服器元件 (RSC)。
  • RSC 安全： 全域狀態僅能在客戶端元件中運作。在 Next.js 中，將 providers 包裹在一個 "use client" 元件內。
  • 互動性隔離： 如果第 4 或第 7 節（動畫 / 液態玻璃）處於啟用狀態，則該特定的互動 UI 元件必須抽出為一個獨立的葉節點元件，並在頂端加上 'use client'。伺服器元件必須專門渲染靜態佈局。
• 狀態管理： 對隔離的 UI 使用區域 useState / useReducer。只有在需要避免深度 prop 傳遞時，才使用全域狀態。
• 樣式政策： 使用 Tailwind CSS (v3/v4) 處理 90% 的樣式。
  • Tailwind 版本鎖定： 首先檢查 package.json。不要在 v3 專案中使用 v4 語法。
  • T4 配置防護： 對於 v4，請勿在 postcss.config.js 中使用 tailwindcss 插件。請使用 @tailwindcss/postcss 或 Vite 插件。
• 反表情符號政策 [關鍵]： 嚴禁在程式碼、標記、文字內容或替代文字中使用表情符號。請使用高品質圖示（Radix、Phosphor）或乾淨的 SVG 基本元素來取代符號。表情符號禁止使用。
• 回應式與間距：
  • 標準化斷點 (sm、md、lg、xl)。
  • 使用 max-w-[1400px] mx-auto 或 max-w-7xl 來約束頁面佈局。
  • 視窗穩定性 [關鍵]： 絕不使用 h-screen 作為全高 Hero 區塊。務必使用 min-h-[100dvh]，以防止在行動瀏覽器（iOS Safari）上發生災難性的版面跳動。
  • 優先使用 Grid 而非 Flex 計算： 絕不使用複雜的 flexbox 百分比計算 (w-[calc(33%-1rem)])。務必使用 CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）以獲得可靠的結構。
• 圖示： 你必須使用 @phosphor-icons/react 或 @radix-ui/react-icons 作為匯入路徑（檢查已安裝的版本）。全域標準化 strokeWidth（例如，統一使用 1.5 或 2.0）。

3. 設計工程指令（偏差修正）

大型語言模型對特定的 UI 陳腔濫調模式存在統計偏差。請使用以下工程規則主動建構高級介面：

規則 1：確定性排版

• 展示 / 標題： 預設使用 text-4xl md:text-6xl tracking-tighter leading-none。
  • 反馬虎： 不鼓勵在「高級感」或「創意感」中使用 Inter。使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi 來強制產生獨特字元。
  • 技術 UI 規則： 儀表板 / 軟體 UI 嚴格禁止襯線字體。在這些情境中，請專門使用高階無襯線字體組合（Geist + Geist Mono 或 Satoshi + JetBrains Mono）。
• 正文 / 段落： 預設使用 text-base text-gray-600 leading-relaxed max-w-[65ch]。

規則 2：色彩校準

• 約束： 最多 1 個強調色。飽和度 < 80%。
• 紫色禁令： 「AI 紫 / 藍」美學嚴格禁止。不使用紫色按鈕光暈、不使用霓虹漸層。使用絕對中性基底（Zinc / Slate）搭配高對比度的單一強調色（例如翡翠綠、電光藍、或深玫瑰紅）。
• 色彩一致性： 在整個輸出中堅持使用同一色板。不要在同一個專案中在暖灰和冷灰之間搖擺不定。

規則 3：佈局多樣性

• 反居中偏差： 當 DESIGN_VARIANCE > 4 時，居中 Hero / H1 區塊嚴格禁止。強制使用「分割畫面」(50/50)、「左對齊內容 / 右對齊資產」或「不對稱留白」結構。

規則 4：材質感、陰影與「反過度使用卡片」

• 儀表板強化： 對於 VISUAL_DENSITY > 7，通用卡片容器嚴格禁止。使用 border-t、divide-y 或純負空間進行邏輯分組。資料指標應自由呼吸，除非功能上需要層級（z-index）才將其框在卡片中。
• 執行： 僅在層級能傳達層次結構時使用卡片。使用陰影時，將其色調與背景色調一致。

規則 5：互動 UI 狀態

• 強制生成： 大型語言模型自然傾向於生成「靜態」的成功狀態。你必須實現完整的互動循環：
  • 載入中： 符合佈局大小的骨架載入器（避免通用圓形旋轉器）。
  • 空狀態： 精心設計的空狀態，指示如何填充資料。
  • 錯誤狀態： 清晰的行內錯誤回報（例如表單）。
  • 觸覺回饋： 在 :active 時，使用 -translate-y-[1px] 或 scale-[0.98] 來模擬物理按壓，表示成功 / 動作。

規則 6：資料與表單模式

• 表單： 標籤必須位於輸入框上方。輔助文字可選，但應存在於標記中。錯誤文字位於輸入框下方。對輸入區塊使用標準的 gap-2。

4. 創意主動性（反泛型實現）

為積極對抗通用的 AI 設計，請系統性地將這些高階編碼概念作為基線：

• 「液態玻璃」折射： 當需要毛玻璃效果時，請超越 backdrop-blur。加入 1px 內邊框 (border-white/10) 和微妙的內陰影 (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) 以模擬物理邊緣折射。
• 磁性微物理（如果 MOTION_INTENSITY > 5）： 實現會略微向滑鼠游標靠攏的按鈕。關鍵： 絕不使用 React useState 來處理磁性懸停或連續動畫。務必使用 Framer Motion 的 useMotionValue 和 useTransform，在 React 渲染循環之外處理，以防止行動裝置效能崩潰。
• 永續微互動： 當 MOTION_INTENSITY > 5 時，在標準元件（頭像、狀態點、背景）中嵌入連續、無限的微動畫（脈衝、打字機、漂浮、閃爍、輪播）。在所有互動元素上應用高級彈簧物理（type: "spring", stiffness: 100, damping: 20）——不使用線性緩動。
• 佈局轉場： 始終利用 Framer Motion 的 layout 和 layoutId props 來實現跨狀態變化的平滑重新排序、調整大小和共享元素轉場。
• 交錯編排： 不要立即掛載列表或網格。使用 staggerChildren（Framer）或 CSS 級聯（animation-delay: calc(var(--index) * 100ms)）來建立序列式瀑布顯現效果。關鍵： 對於 staggerChildren，父級（variants）和子級必須位於同一個客戶端元件樹中。如果資料是非同步獲取的，則將資料作為 props 傳遞到集中的父級 Motion wrapper 中。

5. 效能護欄

• DOM 成本： 僅將顆粒 / 噪點濾鏡應用於固定的、pointer-events-none 的偽元素（例如 fixed inset-0 z-50 pointer-events-none），並且絕不應用於滾動容器，以防止持續的 GPU 重繪和行動裝置效能下降。
• 硬體加速： 絕不為 top、left、width 或 height 添加動畫。僅透過 transform 和 opacity 進行動畫。
• Z-Index 約束： 未經提示時，絕不隨意使用 z-50 或 z-10。僅在系統層級層次（固定導覽列、模態框、疊加層）的上下文中使用 z-index。

6. 技術參考（刻度定義）

DESIGN_VARIANCE（等級 1-10）

• 1-3（可預測）： Flexbox justify-center，嚴格的 12 欄對稱網格，均等內邊距。
• 4-7（偏移）： 使用 margin-top: -2rem 重疊，多樣的圖片長寬比（例如 4:3 旁邊是 16:9），內容左對齊搭配資料居中。
• 8-10（不對稱）： Masonry 佈局，使用分數單位的 CSS Grid（例如 grid-template-columns: 2fr 1fr 1fr），大面積留白區塊（padding-left: 20vw）。
• 行動裝置覆寫： 對於等級 4-10，任何在 md: 以上的不對稱佈局，必須在視窗寬度 < 768px 時，積極回退到嚴格的單欄佈局（w-full、px-4、py-8），以防止水平滾動和佈局破壞。

MOTION_INTENSITY（等級 1-10）

• 1-3（靜態）： 無自動動畫。僅有 CSS :hover 和 :active 狀態。
• 4-7（流體 CSS）： 使用 transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)。使用 animation-delay 級聯來處理載入顯現效果。嚴格專注於 transform 和 opacity。謹慎使用 will-change: transform。
• 8-10（進階編排）： 複雜的滾動觸發顯現或視差效果。使用 Framer Motion hooks。絕不使用 window.addEventListener('scroll')。

VISUAL_DENSITY（等級 1-10）

• 1-3（美術館模式）： 大量留白。區塊間距大。一切感覺非常昂貴且乾淨。
• 4-7（日常應用模式）： 標準網頁應用的正常間距。
• 8-10（駕駛艙模式）： 內邊距極小。無卡片框；僅用 1px 線條分隔資料。一切排列緊湊。強制： 所有數字使用等寬字體 (font-mono)。

7. AI 特徵（禁止模式）

為保證產生高級、非通用的輸出，你必須嚴格避免以下常見的 AI 設計特徵，除非明確要求：

視覺與 CSS

• 禁止霓虹 / 外光暈： 不使用預設的 box-shadow 光暈或自動光暈。使用內邊框或微妙的色調陰影。
• 禁止純黑色： 絕不使用 #000000。使用近似黑色、Zinc-950 或木炭色。
• 禁止過飽和強調色： 降低強調色的飽和度，使其與中性色優雅融合。
• 禁止過度漸層文字： 不為大型標題使用文字填充漸層。
• 禁止自訂滑鼠游標： 它們已經過時，且損害效能與無障礙性。

排版

• 禁止 Inter 字體： 已禁用。使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi。
• 禁止過大 H1： 第一個標題不應過於搶眼。透過字重和色彩，而非單純巨大尺寸來控制層級。
• 襯線字體約束： 僅在創意 / 編輯設計中使用襯線字體。絕不在乾淨的儀表板上使用襯線字體。

佈局與間距

• 完美對齊與間距： 確保內邊距和外邊距在數學上是完美的。避免帶有尷尬間距的浮動元素。
• 禁止 3 欄卡片佈局： 通用的「水平 3 等分卡片」功能列已被禁用。請改用 2 欄之字形、不對稱網格或水平滾動方式。

內容與資料（「Jane Doe」效應）

• 禁止通用名稱： 「John Doe」、「Sarah Chan」或「Jack Su」已被禁用。使用極具創意、聽起來真實的名字。
• 禁止通用頭像： 請勿使用標準 SVG「蛋形」或 Lucide 使用者圖示作為頭像。使用有創意、可信的照片佔位符或特定樣式。
• 禁止假數字： 避免可預測的輸出，如 99.99%、50% 或基本電話號碼 (1234567)。使用有機、凌亂的資料（47.2%、+1 (312) 847-1928）。
• 禁止新創用語：「Acme」、「Nexus」、「SmartFlow」。創造高級、符合上下文的品牌名稱。
• 禁止填充詞： 避免 AI 文案撰寫的陳腔濫調，例如「Elevate」「Seamless」「Unleash」或「Next-Gen」。使用具體的動詞。

外部資源與元件

• 禁止損壞的 Unsplash 連結： 不要使用 Unsplash。使用絕對可靠的佔位符，如 https://picsum.photos/seed/{random_string}/800/600 或 SVG UI 頭像。
• shadcn/ui 自定義： 你可以使用 shadcn/ui，但絕不使用其通用的預設狀態。你必須自定義圓角半徑、顏色和陰影，以符合高級專案美學。
• 生產就緒的乾淨程式碼： 程式碼必須極其乾淨、視覺上引人注目、令人難忘，並在每個細節上經過精心打磨。

8. 創作軍火庫（高級靈感）

不要預設使用通用 UI。從這個進階概念庫中汲取靈感，以確保輸出在視覺上引人注目且令人難忘。在適當的情況下，利用 GSAP（ScrollTrigger / Parallax） 來處理複雜的滾動敘事，或使用 ThreeJS / WebGL 來處理 3D / Canvas 動畫，而不是基本的 CSS 動畫。關鍵： 切勿在同一個元件樹中混合使用 GSAP / ThreeJS 與 Framer Motion。預設使用 Framer Motion 處理 UI / Bento 互動。專門使用 GSAP / ThreeJS 於隔離的整頁滾動敘事或 Canvas 背景，並包裹在嚴格的 useEffect 清理區塊中。

標準 Hero 模式

• 停止使用中心文字疊加暗色圖片。嘗試不對稱的 Hero 區塊：文字整齊地對齊左側或右側。背景應使用高品質、相關的圖片，並帶有微妙的風格淡出（根據是亮色還是暗色模式，優雅地變暗或變亮以融入背景色）。

導航與選單

• Mac OS Dock 放大效果： 導覽列位於邊緣；圖示在懸停時流暢縮放。
• 磁性按鈕： 按鈕會物理性地向游標靠攏。
• 黏性選單： 子項目像黏稠液體一樣從主按鈕脫離。
• 動態島： 一個藥丸形狀的 UI 元件，會變形以顯示狀態 / 通知。
• 情境式放射狀選單： 一個圓形選單，正好在點擊座標處展開。
• 浮動快速撥號： 一個懸浮動作按鈕，彈出一條彎曲的次要動作列表。
• 大型選單顯現： 全螢幕下拉選單，以交錯淡入的方式顯現複雜內容。

佈局與網格

• Bento Grid： 不對稱的、基於區塊的分組（例如 Apple 控制中心）。
• Masonry 佈局： 無固定行高的交錯網格（例如 Pinterest）。
• Chroma Grid： 網格邊框或區塊顯示微妙的、連續的…

（後續內容已截斷）