joniii4k/main1

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

1. 活躍的基準配置 (ACTIVE BASELINE CONFIGURATION)

• DESIGN_VARIANCE: 8 (1=完美對稱, 10=藝術混亂)
• MOTION_INTENSITY: 6 (1=靜態/無動畫, 10=電影級/魔法物理)
• VISUAL_DENSITY: 4 (1=美術館/通透, 10=駕駛艙/資料密集)

AI 指令： 所有生成的標準基準嚴格設定為這些值 (8, 6, 4)。無需詢問使用者來編輯此檔案。除此之外，始終聽從使用者：根據他們在聊天提示中明確要求的內容，動態調整這些值。將這些基準（或使用者覆寫的）值作為你的全域變數，用以驅動第 3 節到第 7 節中的特定邏輯。

2. 預設架構與慣例 (DEFAULT ARCHITECTURE & CONVENTIONS)

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

• 依賴驗證 [強制]： 在導入任何第三方套件（例如 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 傳遞時使用全域狀態。
• 樣式政策： 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： 禁止使用複雜的 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. 設計工程指令（偏差校正） (DESIGN ENGINEERING DIRECTIVES (Bias Correction))

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

規則 1：確定性字體排印 (Deterministic Typography)

• 展示/標題： 預設為 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：色彩校準 (Color Calibration)

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

規則 3：佈局多樣化 (Layout Diversification)

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

規則 4：材質感、陰影與「反卡片濫用」 (Materiality, Shadows, and "Anti-Card Overuse")

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

規則 5：互動 UI 狀態 (Interactive UI States)

• 必要生成： 大型語言模型通常只會生成「靜態」的成功狀態。你必須實現完整的互動循環：
  • 載入中： 符合佈局大小骨架載入器（避免通用的圓形 spinner）。
  • 空狀態： 精心設計的空狀態，指示如何填入資料。
  • 錯誤狀態： 清晰、內聯的錯誤報告（例如，表單）。
  • 觸覺回饋： 在 :active 時，使用 -translate-y-[1px] 或 scale-[0.98] 來模擬實體按壓效果，表示成功/動作。

規則 6：資料與表單模式 (Data & Form Patterns)

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

4. 創造性主動性（反敷衍實現） (CREATIVE PROACTIVITY (Anti-Slop Implementation))

為主動對抗通用 AI 設計，系統性地將這些高階編碼概念作為你的基準：

• 「液態玻璃」折射 ("Liquid Glass" Refraction)： 當需要玻璃擬態效果時，超越 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 渲染循環之外），以防止行動裝置上的效能崩潰。
• 永久微互動 (Perpetual Micro-Interactions)： 當 MOTION_INTENSITY > 5 時，在標準元件（頭像、狀態點、背景）中嵌入連續、無限的微型動畫（脈衝、打字機、浮動、閃爍、輪播）。對所有互動元素應用高級彈簧物理參數（type: "spring", stiffness: 100, damping: 20）— 不要使用線性緩動。
• 佈局過渡 (Layout Transitions)： 始終利用 Framer Motion 的 layout 和 layoutId 屬性，在狀態變化時實現平滑的重新排序、調整大小和共享元素過渡。
• 交錯編排 (Staggered Orchestration)： 不要立即掛載列表或網格。使用 staggerChildren (Framer) 或 CSS 串聯（animation-delay: calc(var(--index) * 100ms)）來建立連續的瀑布式顯現效果。至關重要： 對於 staggerChildren，父元件（variants）和子元件必須位於同一個客戶端元件樹中。如果資料是異步取得的，則將資料作為 props 傳遞給一個集中的父級 Motion 包裝器。

5. 效能防護 (PERFORMANCE GUARDRAILS)

• 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. 技術參考（旋鈕定義） (TECHNICAL REFERENCE (Dial Definitions))

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 TELLS (Forbidden Patterns))

為確保輸出高級且非通用，除非明確要求，否則你必須嚴格避免以下常見的 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. 創意武器庫（高階靈感） (THE CREATIVE ARSENAL (High-End Inspiration))

不要預設使用通用 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 元件，可變形以顯示狀態/通知。
• 上下文徑向選單： 一個圓形選單，正好在點擊座標處展開。
• 浮動快速撥號： 一個 FAB 按鈕，可彈出成曲線排列的次要操作。
• 大型選單揭示： 全螢幕下拉選單，以交錯淡入方式顯示複雜內容。

佈局與網格

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

…

[因翻譯而截斷]