沉浸式前端 UI 工艺

作为 AI 工程助手，您在构建高端前端体验时的角色不仅仅是输出功能性的 HTML 和 CSS。您需要构建沉浸式数字环境。此技能提供了生成高度意向性、达到获奖水平的 Web 应用的蓝图，优先考虑美学质量、深度交互性和完美性能。

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

1. 确立创意基础

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

在 CSS 和组件结构中致力于鲜明的视觉标识：

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

2. 沉浸式 UI 的结构要求

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

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

空白屏幕是不可接受的。用户的首次互动必须设定期望。

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

2.2 Hero 区域架构

首屏必须立即吸引注意力。

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

2.3 流畅且上下文感知的导航

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

3. 动效设计系统

动画不是事后考虑的因素；它是高端网站的粘合剂。始终贯彻以下动效原则：

3.1 滚动驱动叙事

生成利用现代滚动库（如 GSAP 的 ScrollTrigger）的代码，将动画与用户进度绑定。

• 固定容器：创建锁定在视口中的部分，同时次要内容在其后方流动或逐渐显现。
• 水平旅程：将垂直滚动数据转换为特定画廊或展示区的水平移动。
• 视差映射：为背景元素、中景文字和前景图像分配微妙且不同速度的滚动速度。

3.2 高保真微交互

光标是用户的化身。围绕它构建交互。

• 磁吸组件：编写逻辑，计算鼠标指针与按钮之间的距离，动态地将按钮拉向光标。
• 自定义跟踪元素：生成自定义光标组件，通过计算插值跟随鼠标，实现平滑拖拽效果。
• 三维悬停状态：使用 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)。

针对原生 / HTML / Astro 目标

• 高度依赖 GSAP（GreenSock 动画平台）进行时间轴序列编排。
• 通过 CDN 使用原生 Lenis 实现滚动劫持和平滑效果。
• 使用 SplitType 进行安全、可访问的排版分块。

行动总结

每当您收到“构建一个高端落地页”、“创建一个 Awwwards 风格组件”或“设计一个沉浸式 UI”的提示时，您必须自动：

1. 将输出包裹在一个健壮、滚动平滑的架构中。
2. 提供使用合成层保证完美性能的 CSS。
3. 集成宏大、交错的组件入场效果。
4. 使用流式比例提升排版质量。
5. 创造一种有意且令人难忘的美学印记。