premium-frontend-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Immersive Frontend UI Craftsmanship

沉浸式前端UI设计工艺

As an AI engineering assistant, your role when building premium frontend experiences goes beyond outputting functional HTML and CSS. You must architect immersive digital environments. This skill provides the blueprint for generating highly intentional, award-level web applications that prioritize aesthetic quality, deep interactivity, and flawless performance.

When a user requests a high-end landing page, an interactive portfolio, or a specialized component that requires top-tier visual polish, apply the following rigorous standards to every line of code you generate.

作为AI工程助手，你在打造高端前端体验时的职责绝不仅仅是输出可用的HTML和CSS代码，你需要构建沉浸式数字环境。本技能为你提供蓝图，助你生成目标明确、达到获奖水准的Web应用，这些应用兼顾美学品质、深度交互性与完美性能。

当用户请求高端着陆页、交互式作品集或需要顶级视觉打磨的特殊组件时，请为你生成的每一行代码遵循以下严格标准。

1. Establishing the Creative Foundation

1. 搭建创意基础

Before generating layout code, ensure you understand the core emotional resonance the UI should deliver. Do not default to generic, unopinionated code.

Commit to a strong visual identity in your CSS and component structure:

Editorial Brutalism: High-contrast monochromatic palettes, oversized typography, sharp rectangular edges, and raw grid structures.
Organic Fluidity: Soft gradients, deeply rounded corners, glassmorphism overlays, and bouncy spring-based physics.
Cyber / Technical: Dark mode dominance, glowing neon accents, monospaced typography, and rapid, staggered reveal animations.
Cinematic Pacing: Full-viewport imagery, slow cross-fades, profound use of negative space, and scroll-dependent storytelling.

在生成布局代码前，务必明确UI需要传递的核心情感共鸣。切勿默认生成通用、无风格倾向的代码。

在你的CSS和组件结构中确立鲜明的视觉风格：

编辑派粗野主义：高对比度单色调色板、超大尺寸排版、锐利的矩形边缘与原生网格结构。
有机流动风格：柔和渐变、大圆角、毛玻璃效果叠加以及弹性物理动效。
赛博/科技风格：深色模式为主、霓虹发光点缀、等宽字体，以及快速、错落的渐显动画。
电影级叙事节奏：全屏视口图像、缓慢的交叉淡入淡出、大量留白的运用以及基于滚动的叙事设计。

2. Structural Requirements for Immersive UI

2. 沉浸式UI的结构要求

When scaffolding a page or generating core components, include the following architectural layers to transform a standard page into an experience.

在搭建页面框架或生成核心组件时，需包含以下架构层级，将标准页面升级为沉浸式体验。

2.1 The Entry Sequence (Preloading & Initialization)

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

A blank screen is unacceptable. The user's first interaction must set expectations.

Implementation: Generate a lightweight preloader component that handles asset resolution (fonts, initial images, 3D models).
Animation: Output code that transitions the preloader away fluidly—such as a split-door reveal, a scale-up zoom, or a staggered text sweep.

空白加载页是不可接受的。用户的首次交互必须建立体验预期。

实现方式：生成轻量级预加载组件，处理资源解析（字体、初始图片、3D模型）。
动画设计：输出可让预加载组件流畅退场的代码——例如分栏展开、缩放放大或错落文字扫过效果。

2.2 The Hero Architecture

2.2 核心头部架构

The top fold must command attention immediately.

Visuals: Output code that implements full-bleed containers (
```
100vh
```
/
```
100dvh
```
).
Typography Engine: Ensure headlines are broken down syntactically (e.g., span wrapping by word or character) to allow for cascading entrance animations.
Depth: Utilize subtle floating elements or background clipping paths to create a sense of scale and depth behind the primary copy.

首屏区域必须立刻抓住用户注意力。

视觉设计：输出实现全屏容器（
```
100vh
```
/
```
100dvh
```
）的代码。
排版引擎：确保标题按语法拆分（例如按单词或字符包裹span标签），以支持渐次入场动画。
深度感：利用微妙的悬浮元素或背景裁剪路径，在主文案后方营造出规模感与深度感。

2.3 Fluid & Contextual Navigation

2.3 流畅且贴合场景的导航

Implementation: Do not generate standard static navbars. Output sticky headers that react toscroll direction (hide on scroll down, reveal on scroll up).
Interactivity: Include hover states that reveal rich content (e.g., mega-menus that display image previews of the hovered link).

实现方式：切勿生成标准的静态导航栏。输出可根据滚动方向做出响应的粘性头部（向下滚动时隐藏，向上滚动时显示）。
交互性：包含可展示丰富内容的悬停状态（例如，悬停链接时显示图片预览的巨型菜单）。

3. The Motion Design System

3. 动效设计系统

Animation is not an afterthought; it is the connective tissue of a premium site. Always implement the following motion principles:

动画绝非事后补充，而是高端网站的连接纽带。请始终遵循以下动效原则：

3.1 Scroll-Driven Narratives

3.1 滚动驱动的叙事

Generate code utilizing modern scroll libraries (like GSAP's ScrollTrigger) to tie animations to user progress.

Pinned Containers: Create sections that lock into the viewport while secondary content flows past or reveals itself.
Horizontal Journeys: Translate vertical scroll data into horizontal movement for specific galleries or showcases.
Parallax Mapping: Assign subtle, varying scroll-speeds to background elements, midground text, and foreground imagery.

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

固定容器：创建可锁定在视口中的区块，同时让次要内容在其上方流过或渐显。
横向浏览体验：将垂直滚动数据转化为特定画廊或展示区的横向移动效果。
视差映射：为背景元素、中层文本与前景图像设置细微的不同滚动速度。

3.2 High-Fidelity Micro-Interactions

3.2 高保真微交互

The cursor is the user's avatar. Build interactions around it.

Magnetic Components: Write logic that calculates the distance between the mouse pointer and a button, pulling the button towards the cursor dynamically.
Custom Tracking Elements: Generate custom cursor components that follow the mouse with calculated interpolation (lerp) for a smooth drag effect.
Dimensional Hover States: Use CSS Transforms (
```
scale
```
,
```
rotateX
```
,
```
translate3d
```
) to give interactive elements weight and tactile feedback.

光标是用户的虚拟化身，请围绕它构建交互效果。

磁吸组件：编写可计算鼠标指针与按钮距离的逻辑，让按钮动态地向光标方向移动。
自定义追踪元素：生成自定义光标组件，通过插值计算（lerp）实现平滑的跟随拖拽效果。
立体悬停状态：使用CSS变换（
```
scale
```
、
```
rotateX
```
、
```
translate3d
```
）为交互元素赋予重量感与触觉反馈。

4. Typography & Visual Texture

4. 排版与视觉质感

The aesthetics of your generated code must reflect premium craftsmanship.

Type Hierarchy: Enforce massive contrast in scale. Headlines should utilize extreme sizing (
```
clamp()
```
functions spanning up to
```
12vw
```
), while body copy remains incredibly crisp (
```
16px-18px
```
minimum).
Font Selection: Always recommend or implement highly specified variable fonts or premium typefaces over system defaults.
Atmospheric Filters: Implement CSS/SVG noise overlays (
```
mix-blend-mode: overlay
```
, opacity
```
0.02 - 0.05
```
) to remove digital sterility and add photographic grain.
Lighting & Glass: Utilize
```
backdrop-filter: blur(x)
```
combined with ultra-thin, semi-transparent borders to create modern, frosted-glass depth.

你生成的代码在美学上必须体现高端工艺水准。

层级分明的排版：严格执行尺寸上的强烈对比。标题应使用极端尺寸（
```
clamp()
```
函数可支持最大
```
12vw
```
的尺寸），而正文则需保持极致清晰（最小
```
16px-18px
```
）。
字体选择：始终推荐或使用高度定制的可变字体或高端字体，而非系统默认字体。
氛围滤镜：实现CSS/SVG噪点叠加效果（
```
mix-blend-mode: overlay
```
，透明度
```
0.02 - 0.05
```
），消除数字感的生硬，增添照片般的颗粒质感。
光影与毛玻璃效果：结合
```
backdrop-filter: blur(x)
```
与超薄半透明边框，营造现代的毛玻璃深度感。

5. The Performance Imperative

5. 性能优先级

A beautiful site that stutters is a failure. Enforce strict performance guardrails in all generated code:

Hardware Acceleration: Only animate properties that do not trigger layout recalculations:
```
transform
```
and
```
opacity
```
. Code that animates
```
width
```
,
```
height
```
,
```
top
```
, or
```
margin
```
should be fiercely avoided.
Render Optimization: Apply
```
will-change: transform
```
intelligently on complex moving elements, but remove it post-animation to conserve memory.
Responsive Degradation: Wrap custom cursor logic and heavy hover animations in
```
@media (hover: hover) and (pointer: fine)
```
to ensure pristine performance on touch devices.
Accessibility: Wrap heavy continuous animations in
```
@media (prefers-reduced-motion: no-preference)
```
. Never sacrifice user accessibility for aesthetic flair.

美观但卡顿的网站是失败的。请在所有生成的代码中严格遵循性能规范：

硬件加速：仅对不会触发布局重计算的属性执行动画：
```
transform
```
与
```
opacity
```
。坚决避免为
```
width
```
、
```
height
```
、
```
top
```
或
```
margin
```
设置动画的代码。
渲染优化：在复杂的移动元素上合理使用
```
will-change: transform
```
，但在动画结束后移除该属性以节省内存。
响应式降级：将自定义光标逻辑与复杂悬停动画包裹在
```
@media (hover: hover) and (pointer: fine)
```
中，确保触控设备上的性能表现。
可访问性：将持续播放的复杂动画包裹在
```
@media (prefers-reduced-motion: no-preference)
```
中。切勿为了美学效果牺牲用户的可访问性。

6. Implementation Ecosystem

6. 实现生态系统

When the user asks you to implement these patterns, leverage industry-standard libraries tailored to their framework:

当用户要求你实现这些设计模式时，请根据他们使用的框架选用行业标准库：

For React / Next.js Targets

针对React / Next.js项目

Structure the application to support Framer Motion for layout transitions and spring physics.
Recommend Lenis (
```
@studio-freight/lenis
```
) for smooth scrolling context.
Implement React Three Fiber (
```
@react-three/fiber
```
) if webGL or 3D interactions are requested.

构建支持Framer Motion的应用结构，用于布局过渡与弹性物理动效。
推荐使用Lenis（
```
@studio-freight/lenis
```
）实现平滑滚动环境。
若需要WebGL或3D交互，请实现React Three Fiber（
```
@react-three/fiber
```
）。

For Vanilla / HTML / Astro Targets

针对原生HTML / Astro项目

Rely heavily on GSAP (GreenSock Animation Platform) for timeline sequencing.
Utilize vanilla Lenis via CDN for scroll hijacking and smoothing.
Use SplitType for safe, accessible typography chunking.

主要依赖GSAP（GreenSock动画平台）实现时间轴序列动画。
通过CDN使用原生Lenis实现滚动劫持与平滑效果。
使用SplitType实现安全、可访问的文本拆分。

Summary of Action

行动总结

Whenever you receive a prompt to "Build a premium landing page," "Create an Awwwards-style component," or "Design an immersive UI," you must automatically:

Wrap the output in a robust, scroll-smoothed architecture.
Provide CSS that guarantees perfect performance using composited layers.
Integrate sweeping, staggered component entrances.
Elevate the typography using fluid scales.
Create an intentional, memorable aesthetic footprint.

每当你收到“打造高端着陆页”、“创建Awwwards风格组件”或“设计沉浸式UI”这类请求时，必须自动执行以下操作：

将输出内容包裹在稳健的、支持平滑滚动的架构中。
提供可确保完美性能的CSS代码，使用合成层。
融入流畅、错落的组件入场动画。
利用流体缩放提升排版效果。
打造具有辨识度、令人难忘的美学风格。