高代理能力前端技能

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 鑽遞。
樣式策略： 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 來包含頁面佈局。
- 視區穩定性 [重要]： 英雄區塊（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%。
LILA 禁令： 嚴格禁止「AI 紫/藍」美學。不允許紫色按鈕光暈，不允許霓虹漸層。使用絕對中性基底（Zinc/Slate），搭配高對比度的單一強調色（例如 Emerald、Electric Blue 或 Deep Rose）。
色彩一致性： 整個輸出保持同一色板。請勿在相同專案內在暖灰與冷灰之間搖擺不定。

規則 3：佈局多樣化

反置中偏誤： 當 DESIGN_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 時，在標準元件（頭像、狀態點、背景）中嵌入持續、無限的微動畫（脈衝、打字機、漂浮、微光、輪播）。對所有互動元素應用高級 Spring 物理效果 (type: "spring", stiffness: 100, damping: 20)——不使用線性緩動。
佈局轉場： 始終利用 Framer Motion 的 layout 和 layoutId 屬性，以實現跨狀態變化的流暢重新排序、調整大小和共享元素轉場。
交錯編排： 不要立即掛載列表或網格。使用 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: 以上的非對稱佈局，都必須在視埠 < 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 張等寬水平卡片」功能列。改用 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/視差） 進行複雜的滾動敘事，或使用 ThreeJS/WebGL 進行 3D/Canvas 動畫，而非基本的 CSS 動畫。重要： 切勿在同一個元件樹中混用 GSAP/ThreeJS 與 Framer Motion。預設使用 Framer Motion 進行 UI/Bento 互動。GSAP/ThreeJS 專門用於隔離的全頁滾動敘事或 Canvas 背景，並包裹在嚴格的 useEffect 清理區塊中。

標準英雄區塊範例

不要再做深色圖片上的置中文字。嘗試非對稱的英雄區塊：文字整齊地左對齊或右對齊。背景應為一張高品質、相關的圖片，並帶有微妙的風格化漸淡（根據淺色或深色模式，優雅地變暗或變亮以融入背景色）。

導航與選單

Mac OS Dock 放大效果： 導航欄位於邊緣；圖示在懸停時流暢縮放。
磁性按鈕： 按鈕在物理上被拉向游標。
黏性選單： 子項目像黏性液體一樣從主按鈕上脫離。
動態島： 一個藥丸形狀的 UI 元件，會變形以顯示狀態/警報。
上下文圓形選單： 一個完全在點擊座標處展開的圓形選單。
浮動快速撥號： 一個 FAB 按鈕彈出成為一條由次要操作組成的曲線。
大型選單揭示： 全螢幕下拉選單，以交錯淡入的方式顯示複雜內容。

佈局與網格

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

…

（為翻譯而截斷）

moulkefta/Claude-Skills

Claude-Skills 是什麼？

在你喜歡的 AI 中提問

說明文件