premium-frontend-ui

沉浸式前端 UI 工艺

作为 AI 工程助手，在构建高级前端体验时，你的角色不仅仅是输出功能性的 HTML 和 CSS。你必须架构沉浸式数字环境。本技能提供了生成高度意图明确、获奖级别的 Web 应用的蓝图，这些应用优先考虑美学质量、深度交互性和完美性能。

当用户请求高端落地页、交互式作品集或需要顶级视觉打磨的专用组件时，请对你生成的每一行代码应用以下严格标准。

---

1. 建立创意基础

在生成布局代码之前，确保你理解 UI 应传达的核心情感共鸣。不要默认使用通用、无观点的代码。

在你的 CSS 和组件结构中坚持强烈的视觉身份：

• 编辑式粗野主义：高对比度单色调色板、超大排版、锐利矩形边缘和原始网格结构。
• 有机流动性：柔和渐变、深度圆角、玻璃态覆盖层和弹性弹簧物理。
• 赛博/技术风：深色模式主导、发光霓虹强调色、等宽排版和快速交错显示动画。
• 电影节奏：全视口图像、慢速淡入淡出、深刻运用负空间和依赖滚动的叙事。

---

2. 沉浸式 UI 的结构要求

在搭建页面或生成核心组件时，包含以下架构层，将标准页面转变为体验。

2.1 进入序列（预加载与初始化）

空白屏幕是不可接受的。用户的第一次交互必须设定预期。

• 实现：生成一个轻量级预加载器组件，处理资源解析（字体、初始图像、3D 模型）。
• 动画：输出代码，使预加载器流畅过渡——例如分门式揭示、缩放放大或交错文本扫过。

2.2 首屏架构

顶部折叠区域必须立即吸引注意力。

• 视觉：输出实现全出血容器（100vh/100dvh）的代码。
• 排版引擎：确保标题按语法分解（例如，按单词或字符包裹 span），以允许级联入场动画。
• 深度：利用微妙的浮动元素或背景裁剪路径，在主文案后方营造规模和深度感。

2.3 流畅且上下文相关的导航

• 实现：不要生成标准的静态导航栏。输出响应滚动方向的粘性头部（向下滚动时隐藏，向上滚动时显示）。
• 交互性：包含悬停状态，显示丰富内容（例如，显示悬停链接图像预览的 mega 菜单）。

---

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. 创造有意图的、令人难忘的美学印记。