高自主性前端技能

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'。伺服器元件必須專門負責渲染靜態佈局。
狀態管理： 使用區域的 useState/useReducer 處理隔離的 UI。全域狀態僅在嚴格避免深層 prop 傳遞時使用。
樣式政策： 90% 的樣式使用 Tailwind CSS (v3/v4)。
- TAILWIND 版本鎖定： 先檢查 package.json。不要將 v4 的語法用在 v3 的專案中。
- v4 配置防護： 對於 v4，不要在 postcss.config.js 中使用 tailwindcss plugin。請使用 @tailwindcss/postcss 或 Vite plugin。
反表情符號政策 [關鍵]： 永遠不要在程式碼、標記、文字內容或替代文字中使用 emoji。請用高品質圖示（Radix、Phosphor）或簡潔的 SVG 基本元素取代符號。Emoji 是禁止的。
響應式設計與間距：
- 標準化中斷點 (sm、md、lg、xl)。
- 使用 max-w-[1400px] mx-auto 或 max-w-7xl 來限制頁面佈局。
- 視窗穩定性 [關鍵]： 永遠不要對全高 Hero 區塊使用 h-screen。務必使用 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. 設計工程指令（偏差修正）

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：佈局多樣化

反置中偏誤： 當 LAYOUT_VARIANCE > 4 時，嚴格禁止使用置中的 Hero/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 時，將持續、無限的微動畫（脈衝、打字機、浮動、閃耀、輪播）嵌入到標準元件（頭像、狀態點、背景）中。對所有互動元素應用高級彈簧物理（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 成本： 僅對固定的、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: 以上使用的不對稱佈局，必須在 viewport < 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. 100 種 AI 跡象（禁止模式）

為保證輸出高級且非通用，除非明確要求，否則你必須嚴格避免這些常見的 AI 設計特徵：

視覺與 CSS

禁止霓虹/外部光暈： 不要使用預設的 box-shadow 光暈或自動光暈。使用內部邊框或細微的色調陰影。
禁止純黑色： 永遠不要使用 #000000。使用接近黑色、Zinc-950 或炭黑色。
禁止過飽和強調色： 降低強調色飽和度，使其優雅地與中性色調融合。
禁止過度漸層文字： 不要在大型標題中使用文字填充漸層。
禁止自訂滑鼠游標： 它們已過時且會破壞效能/無障礙性。

排版

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

佈局與間距

完美對齊與間距： 確保內邊距和外邊距在數學上是完美的。避免元素浮動且存在尷尬的間隙。
禁止三欄卡片佈局： 禁止使用通用的「3 張水平等寬卡片」功能列。改用兩欄之字形、不對稱網格或水平滾動方式。

內容與資料（「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 元件，會變形以顯示狀態/警報。
情境式徑向選單： 一個在點擊位置展開的圓形選單。

（為便於翻譯，原始檔案的其餘部分已截斷。）

高自主性前端技能 (High-Agency Frontend Skill)