高自主性前端技能

高自主性前端技能 是做什麼的？

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 中，將提供者包裝在一個 "use client" 元件中。
  • 互動性隔離： 如果第 4 節或第 7 節（動態/液態玻璃）處於啟用狀態，則特定的互動 UI 元件必須提取為一個獨立的葉節點元件，並在最頂端加上 'use client'。伺服器元件必須專門渲染靜態佈局。
• 狀態管理： 對於隔離的 UI，使用本地的 useState/useReducer。僅在避免深度屬性傳遞時，才嚴格使用全域狀態。
• 樣式政策： 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 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）搭配高對比度、單一的強調色（例如翡翠綠、電光藍或深玫瑰紅）。
• 色彩一致性： 整個輸出內容堅持使用同一套色板。請勿在同一個專案中在暖灰和冷灰之間波動。

規則 3：佈局多樣化

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

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

• 儀表板強化： 當 VISUAL_DENSITY > 7 時，嚴格禁止使用通用卡片容器。使用 border-t、divide-y 或純粹的負空間來進行邏輯分組。資料指標應能自由呼吸，除非在功能上需要高度（z-index），否則不要被框在盒子裡。
• 執行： 僅在 elevation 能傳達階層關係時使用卡片。使用陰影時，將其色調調整為背景色調。

規則 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-event-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 文案寫作陳腔濫調，例如「提升」、「無縫」、「釋放」或「次世代」。使用具體的動詞。

外部資源與元件

• 禁止損壞的 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 清理區塊中。

標準英雄區典範

• 停止使用置中文字覆蓋在深色圖片上的做法。嘗試不對稱的英雄區：文字清晰地靠左或靠右對齊。背景應使用高品質、相關的圖片，並帶有微妙的風格淡入淡出效果（根據是淺色或深色模式，優雅地變暗或變亮融入背景顏色）。

導覽與選單

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

佈局與網格

• Bento Grid： 不對稱的、基於磁貼的分組（例如 Apple Control Center）。
• Masonry 佈局： 不具固定行高的交錯網格（例如 Pinterest）。
• Chroma Grid： 網格邊框或磁貼顯示微妙的、連續的...

[原文已截斷以供翻譯]