premium-frontend-ui

沉浸式前端 UI 工藝

作為 AI 工程助理，在打造高階前端體驗時，你的角色不僅是輸出可運作的 HTML 和 CSS。你必須建構沉浸式數位環境。這項技能提供了生成高度用心、獎項等級的網頁應用程式的藍圖，優先考慮美學品質、深度互動與完美效能。

當使用者要求高階登陸頁面、互動式作品集，或需要頂級視覺修飾的專門元件時，請將以下嚴格標準應用於你生成的每一行程式碼。

---

1. 建立創意基礎

在產生佈局程式碼之前，確保你理解 UI 應傳達的核心情感共鳴。不要預設使用通用、無意見的程式碼。

在你的 CSS 和元件結構中堅持強烈的視覺識別：

• 編輯式粗獷主義：高對比單色調色板、超大排版、銳利矩形邊緣和原始網格結構。
• 有機流動性：柔和漸層、深度圓角、玻璃擬態覆蓋層和彈性彈簧物理。
• 科技/數位感：深色模式為主、發光霓虹強調、等寬字體和快速、交錯的揭示動畫。
• 電影節奏：全視口影像、慢速淡入淡出、深刻運用留白和依賴滾動的說故事方式。

---

2. 沉浸式 UI 的結構需求

在搭建頁面或生成核心元件時，包含以下架構層次，將標準頁面轉變為體驗。

2.1 進入序列（預載與初始化）

空白畫面是不可接受的。使用者的第一個互動必須設定期望。

• 實作：生成一個輕量級預載元件，處理資源解析（字型、初始圖片、3D 模型）。
• 動畫：輸出程式碼，使預載器流暢地過渡消失——例如分門揭示、縮放放大或交錯文字掃描。

2.2 主視覺架構

頂部摺頁必須立即抓住注意力。

• 視覺：輸出實作滿版容器的程式碼（100vh/100dvh）。
• 排版引擎：確保標題在語法上被拆分（例如按單詞或字元包裹 span），以允許串聯進入動畫。
• 深度：利用微妙的浮動元素或背景裁剪路徑，在主文案後方創造規模感和深度。

2.3 流暢且情境感知的導航

• 實作：不要生成標準的靜態導航欄。輸出會根據滾動方向反應的固定標題（向下滾動時隱藏，向上滾動時顯示）。
• 互動性：包含懸停狀態，顯示豐富內容（例如顯示所懸停連結的圖片預覽的巨型選單）。

---

3. 動畫設計系統

動畫不是事後添加；它是高階網站的連結組織。始終實作以下動畫原則：

3.1 滾動驅動敘事

生成使用現代滾動函式庫（如 GSAP 的 ScrollTrigger）將動畫與使用者進度綁定的程式碼。

• 固定容器：建立鎖定在視口中的區塊，同時次要內容流過或揭示自身。
• 水平旅程：將垂直滾動資料轉換為特定畫廊或展示的水平移動。
• 視差映射：為背景元素、中景文字和前景圖像分配微妙的、不同的滾動速度。

3.2 高保真微互動

游標是使用者的化身。圍繞它建立互動。

• 磁性元件：編寫計算滑鼠指標與按鈕之間距離的邏輯，動態地將按鈕拉向游標。
• 自訂追蹤元素：生成自訂游標元件，以計算的插值（lerp）跟隨滑鼠，產生平滑拖曳效果。
• 立體懸停狀態：使用 CSS 變形（scale、rotateX、translate3d）賦予互動元素重量和觸覺回饋。

---

4. 排版與視覺紋理

你生成程式碼的美學必須反映高階工藝。

• 字型層級：在比例上強制巨大對比。標題應使用極端尺寸（clamp() 函數跨度達 12vw），而內文則保持極度清晰（最小 16px-18px）。
• 字型選擇：始終推薦或實作高度指定的可變字型或高階字體，而非系統預設。
• 氛圍濾鏡：實作 CSS/SVG 噪點覆蓋層（mix-blend-mode: overlay，透明度 0.02 - 0.05）以去除數位生硬感並添加攝影顆粒感。
• 光線與玻璃：利用 backdrop-filter: blur(x) 結合超薄、半透明邊框，創造現代磨砂玻璃深度。

---

5. 效能優先

一個美麗但卡頓的網站是失敗的。在所有生成的程式碼中強制執行嚴格的效能護欄：

• 硬體加速：僅動畫化不會觸發佈局重新計算的屬性：transform 和 opacity。應極力避免動畫化 width、height、top 或 margin 的程式碼。
• 渲染最佳化：在複雜移動元素上智慧應用 will-change: transform，但在動畫結束後移除以節省記憶體。
• 響應式降級：將自訂游標邏輯和重度懸停動畫包裹在 @media (hover: hover) and (pointer: fine) 中，以確保在觸控裝置上保持完美效能。
• 無障礙：將重度連續動畫包裹在 @media (prefers-reduced-motion: no-preference) 中。切勿為了美觀而犧牲使用者無障礙。

---

6. 實作生態系統

當使用者要求你實作這些模式時，利用針對其框架量身定制的業界標準函式庫：

針對 React / Next.js 目標

• 結構化應用程式以支援 Framer Motion 進行佈局過渡和彈簧物理。
• 推薦 Lenis（@studio-freight/lenis）用於平滑滾動上下文。
• 如果要求 WebGL 或 3D 互動，實作 React Three Fiber（@react-three/fiber）。

針對 Vanilla / HTML / Astro 目標

• 大量依賴 GSAP（GreenSock 動畫平台）進行時間軸序列。
• 透過 CDN 使用原生 Lenis 進行滾動劫持和平滑處理。
• 使用 SplitType 進行安全、無障礙的排版分塊。

---

行動摘要

每當你收到「建立高階登陸頁面」、「建立 Awwwards 風格元件」或「設計沉浸式 UI」的提示時，你必須自動：

1. 將輸出包裹在穩健、滾動平滑的架構中。
2. 提供使用合成圖層保證完美效能的 CSS。
3. 整合大規模、交錯的元件進入動畫。
4. 使用流動比例提升排版。
5. 創造一個有意圖、令人難忘的美學足跡。