shawon-builds/Ai-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 中，將 Provider 包裝在一個使用 "use client" 的元件中。
  • 互動性隔離： 如果第 4 節或第 7 節（動畫/液態玻璃）處於啟用狀態，則特定的互動 UI 元件必須被提取為一個獨立的葉節點元件，並在頂端加上 'use client'。伺服器元件必須專門渲染靜態佈局。
• 狀態管理： 對於隔離的 UI，使用區域性的 useState/useReducer。嚴格僅在避免深層 prop drilling 時才使用全域狀態。
• 樣式策略： 90% 的樣式使用 Tailwind CSS (v3/v4)。
  • 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。務必使用 min-h-[100dvh] 以防止在行動瀏覽器（iOS Safari）上發生災難性的佈局跳動。
  • 優先使用網格而非彈性計算： 絕對不要使用複雜的 Flexbox 百分比計算（w-[calc(33%-1rem)]）。務必使用 CSS 網格（grid grid-cols-1 md:grid-cols-3 gap-6）以獲得可靠的結構。
• 圖示： 您必須精確使用 @phosphor-icons/react 或 @radix-ui/react-icons 作為匯入路徑（檢查已安裝的版本）。全域標準化 strokeWidth（例如，統一使用 1.5 或 2.0）。

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

LLM 對特定的 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）搭配高對比度的單一強調色（例如 Emerald、Electric Blue 或 Deep Rose）。
• 色彩一致性： 在整個輸出中堅持使用一種色板。不要在相同專案中在暖灰和冷灰之間搖擺。

規則 3：佈局多元化

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

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

• 儀表板強化： 對於 VISUAL_DENSITY > 7，嚴格禁止使用通用卡片容器。使用 border-t、divide-y 或純粹的負空間進行邏輯分組。資料指標應在不被框住的情況下呼吸，除非出於功能需求需要階層（z-index）。
• 執行： 僅在階層需要透過陰影來傳達時才使用卡片。使用陰影時，將其色調調整為背景色。

規則 5：互動 UI 狀態

• 必要生成： LLM 自然傾向於生成「靜態」的成功狀態。您必須實現完整的互動循環：
  • 載入中： 與佈局大小相符的骨架載入器（避免通用圓形旋轉器）。
  • 空狀態： 精心設計的空狀態，指示如何填入資料。
  • 錯誤狀態： 清晰的內聯錯誤報告（例如表單）。
  • 觸覺回饋： 在 :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 時，在標準元件（頭像、狀態點、背景）中嵌入連續、無限的微動畫（脈衝、打字機、漂浮、閃爍、輪播）。對所有互動元素應用高級 Spring 物理（type: "spring", stiffness: 100, damping: 20）——不要使用線性緩動。
• 佈局轉場： 始終利用 Framer Motion 的 layout 和 layoutId props，以實現狀態變更時平滑的重新排序、調整大小和共享元素轉場。
• 交錯編排： 不要立即掛載列表或網格。使用 staggerChildren（Framer）或 CSS 串聯（animation-delay: calc(var(--index) * 100ms)）來建立序列瀑布式顯現效果。關鍵： 對於 staggerChildren，父元素（variants）和子元素必須位於完全相同的客戶端元件樹中。如果資料是非同步獲取的，請將資料作為 props 傳遞給一個集中的父級 Motion 包裝器。

5. 效能護欄

• DOM 成本： 僅將顆粒/雜訊濾鏡應用於固定、無指標事件的偽元素（例如 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（不對稱）： 瀑布流佈局，使用分數單位的 CSS 網格（例如 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。使用 Off-Black、Zinc-950 或 Charcoal。
• 禁止過飽和強調色： 降低強調色的飽和度，使其與中性色優雅融合。
• 禁止過度漸層文字： 不要對大標題使用文字填充漸層。
• 禁止自訂滑鼠游標： 它們已經過時，且會損害效能/可及性。

排版

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

佈局與間距

• 完美的對齊與間距： 確保內邊距和外邊距在數學上是完美的。避免帶有尷尬間距的浮動元素。
• 禁止三欄卡片佈局： 禁止使用通用的「三個水平等寬卡片」功能行。改為使用 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。UI/網格互動預設使用 Framer Motion。僅將 GSAP/ThreeJS 專門用於隔離的全頁滾輪敘事或畫布背景，並包裹在嚴格的 useEffect 清理區塊中。

標準英雄區範例

• 停止使用置中文字搭配深色圖片。嘗試不對稱的英雄區：文字整齊地靠左或靠右對齊。背景應包含一張高品質、相關的圖片，並帶有微妙的風格化淡入效果（根據是淺色還是深色模式，優雅地變暗或變亮以融入背景色）。

導航與選單

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

佈局與網格

• Bento 網格： 不對稱、基於磁貼的分組（例如 Apple 控制中心）。
• 瀑布流佈局： 沒有固定行高的交錯網格（例如 Pinterest）。
• 色度網格： 網格邊框或磁貼顯示微妙、連續...