premium-frontend-design

高级前端设计技能

此技能指导你打造具有生命力的生产级前端界面——不落俗套、不照搬模板，而是精心设计、令人难忘的体验。

“出色的界面与令人难忘的界面之间，差别在于每个像素都经过深思熟虑。”

---

依赖项（灵活选择，按需搭配）

此技能不绑定框架。根据用户偏好和项目需求选择软件包。

核心 3D（用于 WebGL 模板）

pnpm add three @react-three/fiber @react-three/drei

动画（根据用户偏好选择）

库	最适用于	复杂度	包体积
CSS/Tailwind	简单过渡、微交互	低	0KB
Framer Motion	原生 React 体验、布局动画、手势	中	~30KB
GSAP	复杂时间线、滚动触发效果、文本效果	高	~60KB
GSAP + Club	SplitText、ScrollTrigger、MorphSVG	高	~80KB

# Framer Motion (simpler, React-idiomatic)
pnpm add framer-motion

# GSAP (powerful, timeline-based)
pnpm add gsap @gsap/react
# Note: SplitText, ScrollTrigger require GSAP Club license

选择指南：

• 用户说“简单”或“轻量” → CSS + Framer Motion
• 用户说“复杂动画”或“滚动效果” → GSAP
• 用户说“文本动画”或“拆分文本” → GSAP + SplitText
• 用户未说明 → 默认使用 Framer Motion（API 更简单）

可选增强功能

# Mesh gradients (for mesh-gradient-hero)
pnpm add @paper-design/shaders-react

# Icons
pnpm add lucide-react

# Charts/Sparklines (for dashboards)
pnpm add recharts
# or lightweight: pnpm add @visx/shape @visx/scale

浏览器兼容性说明

• backdrop-filter：Firefox < 103 不支持（添加背景回退方案）
• WebGL：为较旧设备提供 CSS 回退方案
• @starting-style：Chrome 117+、Safari 17.4+（渐进增强）

---

核心理念

“鲜活”原则

界面在以下情况下会显得鲜活：

• 它会呼吸：微妙的环境动画、粒子或着色器效果带来持续但不分散注意力的动态感
• 它会响应：微交互会为用户的每个操作提供令人满意的反馈
• 它有深度：图层、视差、玻璃拟态和阴影营造出立体空间
• 它带来惊喜：至少有一个元素以令人愉悦的方式打破预期

设计思考（编写任何代码之前）

动笔编写代码前，先回答以下问题：

1. 目的：要解决什么问题？谁会使用它？

2. 风格：选择一个鲜明的方向（不要混搭）：

   • 极简至上
   • 极繁主义混乱风
   • 复古未来主义 / 赛博朋克
   • 有机 / 自然
   • 奢华 / 精致
   • 活泼 / 玩具感
   • 编辑部 / 杂志风
   • 粗野主义 / 原始
   • 装饰艺术 / 几何
   • 工业 / 实用主义
   • 生物荧光 / 科幻
   • 任务控制 / 技术风

3. 独特亮点：哪个单一元素会让人印象深刻？每个出色的界面都有自己的标志性时刻。

4. 约束条件：框架、性能预算、无障碍要求。

重要：大胆的极繁主义和精致的极简主义都行得通。关键在于深思熟虑，而非一味求强。一个完美呈现的动画，胜过 50 个平庸的动画。

---

惊艳感 + 清晰度框架

当需求描述含糊，或需要为设计决策提供依据时，请使用此框架。目标是兼具惊艳感与明确目的。

1. 层级原则

• 1 个主视觉亮点（着色器、粒子系统或地球仪）。其他所有元素都应服务于可读性。
• 1 个辅助亮点（微交互、动态数据卡片或发光的 CTA）。仅此为限。
• 布局规则：主视觉（大胆）→ 内容区块（平静）→ 佐证内容（平静）→ CTA（突出显示）。
• 如果页面内容超过一个屏幕长度，则每隔一个区块都应以静态内容为主。

2. 字体排版规范

• 标题字体最多 2 种（展示字体 + 正文字体）。等宽字体仅用于数据。
• 标题字间距 ≥ -0.04em。再紧就会影响可读性。
• 正文宽度目标：桌面端每行 55–75 个字符，移动端每行 35–45 个字符。
• 大号展示文本下方始终搭配一句简洁的说明文字，长度不超过 80 个字符。

3. 色彩与对比度规则

• 将霓虹色限制在主要 CTA + 1 种强调色。其他所有内容都使用 zinc/中性色调。
• 如果背景较复杂（着色器、渐变、粒子），在文字后方添加 bg-black/70 或 bg-slate-950/70 遮罩。
• 即使采用赛博朋克美学，正文的对比度也要保持 ≥ 4.5:1。
• 发布前进行灰度预览检查：如果画面看起来灰蒙蒙的，就降低调色板的饱和度。

4. 动效限制

• 默认：使用 CSS 或 Framer Motion，持续时间 ≤ 400ms，缓动函数为 cubic-bezier(0.34, 1.56, 0.64, 1)。
• 仅在需求明确要求电影感或交互式体验时，才升级到 GSAP/WebGL。
• 每个视口最多使用 1 个持续动画（例如，着色器或波形条，二选一，不能同时使用）。
• 提供“平静模式”：当启用 prefers-reduced-motion 或用户滚动至 Hero 区域之外时，停用非必要动效。

5. 需求模糊时

情况	默认方案	可选升级
用户只说“简洁的 SaaS”	mesh-gradient-hero + bento-grid	如果用户之后要求“更有活力”，则将 Hero 背景换成 CPPN
用户只说“仪表盘”，未提及风格	bento-grid + dashboard-widgets + CSS 发光药丸	只有在数据可视化方案获批后，才添加 digital-liquid 着色器
用户只说“Hero 区块”，没有其他要求	以文字为主的布局 + CSS 渐变	可以建议使用着色器/地球仪，但绝不能默认采用

如果提示词没有明确提及 WebGL，就默认采用 CSS 优先，只有用户接受相关成本时才启用着色器。

---

反模式（绝不可这样做）

视觉反模式

❌ 默认使用白色/浅色背景（深色模式更显高级） ❌ 使用通用渐变（白底紫到蓝的渐变是 AI 垃圾设计） ❌ 使用均匀分布、缺乏表现力的调色板 ❌ 使用静态、缺乏生气的背景 ❌ 使用千篇一律的组件布局 ❌ 缺少加载/过渡状态 ❌ 使用突兀、未经缓动处理的动画

字体排版反模式

❌ 用 Inter、Roboto、Arial、系统字体作为标题字体 ❌ 所有内容使用相同字体 ❌ 使用默认行高和字间距 ❌ 使用乏味、可预测的字体比例

代码反模式

❌ 随意散布内联样式 ❌ 未使用 CSS 变量进行主题配置 ❌ 动画没有 will-change 或 GPU 加速 ❌ Canvas/WebGL 未使用 requestAnimationFrame ❌ useEffect 中缺少清理逻辑

---

设计系统

1. 色彩架构

规则：只使用 1 种主导强调色，其他所有元素都为其提供衬托。

// Premium Dark Theme (Default)
const colors = {
  // Backgrounds (layer from darkest to lightest)
  bg: {
    void: '#000000',      // True black for maximum contrast
    primary: '#050505',   // Main background
    elevated: '#0a0a0a',  // Cards, modals
    subtle: '#111111',    // Hover states
  },
  
  // Glass surfaces
  glass: {
    bg: 'rgba(255, 255, 255, 0.03)',
    border: 'rgba(255, 255, 255, 0.08)',
    hover: 'rgba(255, 255, 255, 0.06)',
  },
  
  // Text hierarchy
  text: {
    primary: '#ffffff',
    secondary: '#a1a1aa',   // zinc-400
    muted: '#71717a',       // zinc-500
    ghost: '#3f3f46',       // zinc-700
  },
  
  // Accent (choose ONE per project)
  accent: '#ff4d00',  // Neon Orange
  // accent: '#00f3ff',  // Neon Cyan
  // accent: '#ccff00',  // Neon Lime
  // accent: '#F5E445',  // Premium Yellow
  // accent: '#a855f7',  // Electric Purple
}

强调色使用规则：

• 主要操作：使用完整强调色
• 次要元素：使用 20% 不透明度的强调色
• 边框/线条：使用 30% 不透明度的强调色
• 光晕：强调色加模糊，使用 40-60% 不透明度
• 绝不将强调色用于大面积背景

2. 字体排版系统

规则：展示字体用于营造冲击力，正文字体用于阅读，等宽字体用于数据。

/* Tier 1: Display/Headlines - BOLD, characterful */
--font-display: 'Chakra Petch', 'Orbitron', 'Bebas Neue', 'Playfair Display';

/* Tier 2: Headings - Geometric, modern */
--font-heading: 'Manrope', 'Outfit', 'Syne', 'Space Grotesk';

/* Tier 3: Body - Clean, highly legible */
--font-body: 'Plus Jakarta Sans', 'DM Sans', 'Satoshi', 'General Sans';

/* Tier 4: Data/Code - ALWAYS monospace */
--font-mono: 'JetBrains Mono', 'Fira Code', 'IBM Plex Mono';

字体排版模式：

/* Hero Headlines: Massive, tight, aggressive */
.headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 10rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Section Titles */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Technical Labels */
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Data Display */
.data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

3. 间距与布局

规则：不对称能营造趣味。网格只是起点，不是束缚。

/* Spacing scale (use consistently) */
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-24: 6rem;     /* 96px */
--space-32: 8rem;     /* 128px */

/* Use generous padding on containers */
.container {
  padding-inline: clamp(1rem, 5vw, 4rem);
}

/* Hero sections need breathing room */
.hero {
  min-height: 100vh;
  padding-block: var(--space-32);
}

Bento 网格模式（用于仪表盘）：

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: var(--space-4);
}

/* Feature card spans */
.card-hero { grid-column: span 2; grid-row: span 2; }
.card-wide { grid-column: span 2; }
.card-tall { grid-row: span 2; }

---

视觉效果库

1. 玻璃拟态（正确用法）

.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

/* Elevated glass (for modals, dropdowns) */
.glass-elevated {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

2. CRT 扫描线叠加效果

.scanlines::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 9999;
}

3. 胶片颗粒纹理

.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

4. 科技网格背景

.tech-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

5. 霓虹发光效果

/* Text glow */
.neon-text {
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor,
    0 0 80px currentColor;
}

/* Box glow */
.neon-box {
  box-shadow: 
    0 0 20px var(--accent-alpha-40),
    0 0 40px var(--accent-alpha-20),
    inset 0 0 20px var(--accent-alpha-10);
}

/* Border glow */
.neon-border {
  border: 1px solid var(--accent);
  box-shadow: 
    0 0 10px var(--accent-alpha-50),
    inset 0 0 10px var(--accent-alpha-20);
}

---

动画模式

理念

• 入场动画：只使用一次，并发挥最大效果
• 微交互：细腻、快速（150-300ms）
• 环境动效：无限循环、速度极慢、不分散注意力
• 页面过渡：流畅、协调

选择合适的工具

需求	使用	原因
悬停／焦点状态	CSS	无需 JS，即时生效
简单入场动画	CSS 关键帧	轻量
布局动画	Framer Motion	layout 属性很强大
基于手势的动画	Framer Motion	内置拖动／平移功能
滚动触发动画	GSAP ScrollTrigger	功能最强大
文本拆分	GSAP SplitText	行业标准
复杂时间轴	GSAP	精准控制
SVG 变形	GSAP MorphSVG	没有替代方案

默认选择更简单的方案。仅在需要时才增加复杂度。

CSS 关键帧库

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

交错入场模式

.stagger-container > * {
  opacity: 0;
  animation: fade-up 0.6s ease-out forwards;
}

.stagger-container > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-container > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-container > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-container > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-container > *:nth-child(5) { animation-delay: 0.5s; }

纯 CSS 模式（零依赖）

/* View transition entrance (Chrome 111+, Safari 18+) */
@supports (view-transition-name: none) {
  .card {
    view-transition-name: card;
  }
  
  ::view-transition-old(card),
  ::view-transition-new(card) {
    animation-duration: 0.3s;
  }
}

/* Scroll-driven animations (Chrome 115+) */
@supports (animation-timeline: scroll()) {
  .parallax-bg {
    animation: parallax linear;
    animation-timeline: scroll();
  }
  
  @keyframes parallax {
    from { transform: translateY(0); }
    to { transform: translateY(-30%); }
  }
}

/* Hover with spring-like feel */
.spring-hover {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spring-hover:hover {
  transform: scale(1.05);
}

/* Glow pulse */
.glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--accent-alpha-40); }
  50% { box-shadow: 0 0 40px var(--accent-alpha-60); }
}

GSAP 模式（需要强大功能时）

// Stagger entrance on scroll
gsap.from('.card', {
  scrollTrigger: {
    trigger: '.cards-section',
    start: 'top 80%',
  },
  y: 60,
  opacity: 0,
  duration: 0.8,
  stagger: 0.1,
  ease: 'power3.out',
});

// Text scramble effect
const scrambleText = (el: HTMLElement, text: string) => {
  const chars = '!<>-_\\/[]{}—=+*^?#';
  let iteration = 0;
  
  const interval = setInterval(() => {
    el.innerText = text
      .split('')
      .map((char, i) => 
        i < iteration ? char : chars[Math.floor(Math.random() * chars.length)]
      )
      .join('');
    
    if (iteration >= text.length) clearInterval(interval);
    iteration += 1/3;
  }, 30);
};

// Smooth parallax
gsap.to('.parallax-bg', {
  scrollTrigger: {
    scrub: 1,
  },
  y: '-30%',
  ease: 'none',
});

Framer Motion 模式

// Page transitions
<AnimatePresence mode="wait">
  <motion.div
    key={page}
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -20 }}
    transition={{ duration: 0.3 }}
  />
</AnimatePresence>

// Hover glow effect
<motion.div
  whileHover={{ 
    scale: 1.02,
    boxShadow: '0 0 30px rgba(255, 77, 0, 0.4)',
  }}
  transition={{ type: 'spring', stiffness: 300 }}
/>

// Stagger children
<motion.div
  initial="hidden"
  animate="visible"
  variants={{
    hidden: {},
    visible: { transition: { staggerChildren: 0.1 } },
  }}
>
  {items.map(item => (
    <motion.div
      key={item.id}
      variants={{
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0 },
      }}
    />
  ))}
</motion.div>

---

3D 与 WebGL 模式

技术栈

npm install three @react-three/fiber @react-three/drei

基本场景设置

import { Canvas } from '@react-three/fiber';
import { Stars, Float, MeshDistortMaterial } from '@react-three/drei';

const Scene = () => (
  <Canvas
    camera={{ position: [0, 0, 5], fov: 75 }}
    style={{ position: 'fixed', inset: 0, zIndex: -1 }}
  >
    <ambientLight intensity={0.2} />
    <pointLight position={[10, 10, 10]} color="#ff4d00" />
    <Stars radius={100} depth={50} count={3000} />
    {/* Your 3D content */}
  </Canvas>
);

粒子球体（数据地球）

const ParticleSphere = ({ count = 3000, color = '#ff4d00' }) => {
  const ref = useRef<THREE.Points>(null);
  
  const positions = useMemo(() => {
    const pos = new Float32Array(count * 3);
    for (let i = 0; i < count; i++) {
      const theta = Math.random() * Math.PI * 2;
      const phi = Math.acos(Math.random() * 2 - 1);
      const r = 2;
      pos[i * 3] = r * Math.sin(phi) * Math.cos(theta);
      pos[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
      pos[i * 3 + 2] = r * Math.cos(phi);
    }
    return pos;
  }, [count]);
  
  useFrame(() => {
    if (ref.current) ref.current.rotation.y += 0.001;
  });
  
  return (
    <points ref={ref}>
      <bufferGeometry>
        <bufferAttribute
          attach="attributes-position"
          count={count}
          array={positions}
          itemSize={3}
        />
      </bufferGeometry>
      <pointsMaterial size={0.02} color={color} transparent opacity={0.8} />
    </points>
  );
};

有感知能力的核心（AI 大脑）

const SentientCore = () => (
  <Float speed={2} rotationIntensity={0.5}>
    <mesh>
      <sphereGeometry args={[1.5, 64, 64]} />
      <MeshDistortMaterial
        color="#00f3ff"
        wireframe
        distort={0.4}
        speed={2}
      />
    </mesh>
  </Float>
);

性能规则

1. 始终通过 useFrame 使用 requestAnimationFrame
2. 在移动设备上减少粒子数量（检查 window.innerWidth）
3. 使用 useMemo 进行几何体／位置计算
4. 在 useEffect 的返回函数中清理动画
5. 设置 transparent 和 opacity 以进行深度排序

---

组件模式

1. 加载与页面过渡

默认方案（除非用户另有要求，否则采用此方案）：

• 在卡片／区域上使用骨架占位符（参见上文的微光模式）
• 使用 CSS 或 Framer Motion 路由过渡实现简单的页面淡入／滑动过渡

可选的电影式模式（仅当用户需要叙事式启动序列，且时间／预算充足时）：

• 使用 GSAP 驱动的预加载器，包含启动日志、文字扰乱效果和着色器／WebGL 背景
• 协调时间轴，在数据就绪后淡入实际内容

2. 玻璃拟态导航栏

<nav className="fixed top-4 left-1/2 -translate-x-1/2 z-50">
  <div className="glass rounded-full px-6 py-3 flex items-center gap-8">
    <Logo />
    <NavLinks />
    <ThemeToggle />
    <CTA />
  </div>
</nav>

3. 实时终端

const Terminal = ({ logs }) => {
  const scrollRef = useRef();
  
  useEffect(() => {
    scrollRef.current?.scrollTo(0, scrollRef.current.scrollHeight);
  }, [logs]);
  
  return (
    <div className="glass font-mono text-xs">
      <header className="border-b border-white/10 px-4 py-2">
        <span className="text-accent">&gt;</span> System Logs
        <span className="ml-auto w-2 h-2 bg-green-500 rounded-full animate-pulse" />
      </header>
      <div ref={scrollRef} className="h-64 overflow-y-auto p-4">
        {logs.map(log => (
          <div key={log.id}>
            <span className="text-zinc-600">{log.time}</span>
            <span className={levelColor[log.level]}>[{log.level}]</span>
            <span>{log.message}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

4. 带迷你趋势图的统计卡片

const StatCard = ({ icon, label, value, change, trend }) => (
  <motion.div
    whileHover={{ scale: 1.02, boxShadow: '0 0 30px var(--accent-alpha-30)' }}
    className="glass p-4"
  >
    <div className="flex justify-between">
      <div className="p-2 rounded-lg bg-accent/10 text-accent">{icon}</div>
      <span className={change > 0 ? 'text-green-400' : 'text-red-400'}>
        {change > 0 ? '+' : ''}{change}%
      </span>
    </div>
    <div className="mt-4 font-mono text-2xl font-bold">{value}</div>
    <div className="text-xs text-zinc-500 uppercase">{label}</div>
    <Sparkline data={trend} className="mt-2 h-8" />
  </motion.div>
);

---

质量检查清单

发布前，请确认：

视觉效果

• 默认启用暗色模式，呈现高级质感
• 始终一致地使用一种主强调色
• 玻璃效果具有适当的模糊和边框
• 添加扫描线或颗粒叠加纹理
• 暗色背景上不使用纯白文字（最高为 #f4f4f5）

排版

• 标题使用展示字体（而非 Inter／Roboto）
• 所有数据／代码／数字均使用等宽字体
• 层级清晰（3–4 个不同级别）
• 调整大号文字的字距

动画

• 加载时播放入场动画（交错显示）
• 悬停状态同时具有变换和光晕效果
• 所有画布动画均流畅达到 60fps
• 动画都有明确用途

代码

• 所有颜色均使用 CSS 变量
• 响应式布局（移动端优先）
• 在 useEffect 中提供清理函数
• 为 3D 内容设置错误边界

---

无障碍（高级质感 ≠ 无障碍）

优秀的设计应当具有包容性。以下内容不可或缺。

动画敏感性

/* ALWAYS respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// React hook for motion preference
const usePrefersReducedMotion = () => {
  const [prefersReduced, setPrefersReduced] = useState(false);
  
  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setPrefersReduced(mq.matches);
    const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  
  return prefersReduced;
};

// Usage
const shouldAnimate = !usePrefersReducedMotion();

WebGL 无障碍

// Always mark decorative 3D as hidden
<div aria-hidden="true" className="pointer-events-none">
  <Canvas>{/* decorative background */}</Canvas>
</div>

// Provide text alternatives for meaningful 3D
<div role="img" aria-label="3D visualization of global network connections">
  <Canvas>{/* data visualization */}</Canvas>
</div>

色彩对比度

元素	最低比例	目标
正文	4.5:1	7:1
大号文字（18px+）	3:1	4.5:1
UI 组件	3:1	4.5:1
装饰元素	不适用	不适用

/* Safe text colors on dark backgrounds */
--text-primary: #ffffff;     /* ✓ 21:1 on #000 */
--text-secondary: #a1a1aa;   /* ✓ 7.2:1 on #000 */
--text-muted: #71717a;       /* ✓ 4.6:1 on #000 */
--text-ghost: #52525b;       /* ⚠ 3.2:1 - decorative only */

键盘导航

// Interactive 3D elements need keyboard support
<mesh
  tabIndex={0}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
  onClick={handleClick}
/>

// Focus indicators for glass components
.glass:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

---

移动端与响应式策略

高级体验应能优雅地适应不同设备。不要只是缩小尺寸，而要重新构思。

WebGL 回退方案

// Detect low-power devices
const useIsLowPowerDevice = () => {
  const [isLowPower, setIsLowPower] = useState(false);
  
  useEffect(() => {
    const isLow = 
      window.innerWidth < 768 ||
      navigator.hardwareConcurrency <= 4 ||
      /Android|iPhone|iPad/.test(navigator.userAgent);
    setIsLowPower(isLow);
  }, []);
  
  return isLowPower;
};

// Usage in hero components
const HeroBackground = () => {
  const isLowPower = useIsLowPowerDevice();
  
  if (isLowPower) {
    return <CSSGradientFallback />; // Lighter alternative
  }
  
  return <WebGLBackground />;
};

性能预算

设备	JS 预算	动画目标
桌面端	< 500KB	WebGL 达到 60fps
平板	< 300KB	30fps 或仅使用 CSS
移动端	< 150KB	仅使用 CSS，不使用 WebGL

触控交互

// Replace hover with tap/long-press on mobile
<motion.div
  whileHover={{ scale: 1.02 }}  // Desktop
  whileTap={{ scale: 0.98 }}    // Mobile
  onTouchStart={handleTouch}
/>

// Increase touch targets
.button {
  min-height: 44px;  /* Apple HIG */
  min-width: 44px;
  padding: 12px 24px;
}

响应式排版

/* Fluid type scale */
--text-hero: clamp(2.5rem, 8vw, 7rem);
--text-h1: clamp(2rem, 5vw, 4rem);
--text-h2: clamp(1.5rem, 3vw, 2.5rem);
--text-body: clamp(1rem, 2vw, 1.125rem);

/* Reduce letter-spacing on mobile */
@media (max-width: 768px) {
  .headline {
    letter-spacing: -0.02em; /* Less aggressive than desktop */
  }
}

---

加载与错误状态

高级 UX 应优雅地处理每种状态。

骨架屏加载器

// Glass skeleton with shimmer
const Skeleton = ({ className }: { className?: string }) => (
  <div 
    className={`relative overflow-hidden rounded-lg bg-white/5 ${className}`}
  >
    <div 
      className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent"
    />
  </div>
);

// Usage
<div className="space-y-4">
  <Skeleton className="h-8 w-3/4" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
</div>

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

错误边界（带样式）

const ErrorFallback = ({ error, resetErrorBoundary }) => (
  <div className="glass p-8 text-center">
    <div className="mx-auto mb-4 h-16 w-16 rounded-full bg-red-500/10 flex items-center justify-center">
      <AlertTriangle className="h-8 w-8 text-red-400" />
    </div>
    <h2 className="text-xl font-semibold text-white mb-2">
      Something went wrong
    </h2>
    <p className="text-zinc-400 mb-4 font-mono text-sm">
      {error.message}
    </p>
    <button 
      onClick={resetErrorBoundary}
      className="px-4 py-2 bg-white/10 rounded-lg hover:bg-white/20 transition"
    >
      Try again
    </button>
  </div>
);

空状态

const EmptyState = ({ 
  icon: Icon, 
  title, 
  description, 
  action 
}: EmptyStateProps) => (
  <div className="flex flex-col items-center justify-center py-16 text-center">
    <div className="mb-4 rounded-full bg-white/5 p-4">
      <Icon className="h-8 w-8 text-zinc-500" />
    </div>
    <h3 className="text-lg font-medium text-white mb-1">{title}</h3>
    <p className="text-zinc-400 mb-4 max-w-sm">{description}</p>
    {action}
  </div>
);

// Usage
<EmptyState
  icon={Inbox}
  title="No messages yet"
  description="When you receive messages, they'll appear here."
  action={<Button>Send your first message</Button>}
/>

数据加载状态

// Optimistic UI with rollback
const [items, setItems] = useState(data);
const [pending, startTransition] = useTransition();

const addItem = (newItem) => {
  // Optimistic update
  setItems(prev => [...prev, { ...newItem, pending: true }]);
  
  startTransition(async () => {
    try {
      await api.createItem(newItem);
    } catch {
      // Rollback on error
      setItems(prev => prev.filter(i => i.id !== newItem.id));
      toast.error('Failed to add item');
    }
  });
};

---

框架集成

Next.js App Router

// Client boundary for WebGL components
// app/components/hero-client.tsx
'use client';

import dynamic from 'next/dynamic';

// Lazy load heavy 3D components
const WebGLHero = dynamic(() => import('./webgl-hero'), {
  ssr: false,
  loading: () => <HeroSkeleton />,
});

export default function HeroClient() {
  return <WebGLHero />;
}

// Server component wrapper
// app/page.tsx
import HeroClient from './components/hero-client';

export default function Page() {
  return (
    <main>
      {/* Server-rendered SEO content */}
      <h1 className="sr-only">Your SEO Title</h1>
      
      {/* Client-side 3D hero */}
      <HeroClient />
    </main>
  );
}

WebGL 内容的 SEO

// WebGL isn't crawlable - always provide text alternatives
<section aria-labelledby="hero-title">
  {/* Hidden but crawlable */}
  <h1 id="hero-title" className="sr-only">
    AI-Powered Trading Platform
  </h1>
  <p className="sr-only">
    {seoDescription}
  </p>
  
  {/* Visual hero (not crawled) */}
  <div aria-hidden="true">
    <Canvas>...</Canvas>
  </div>
  
  {/* Visible text (crawled) */}
  <div className="relative z-10">
    <span className="text-7xl">{visibleTitle}</span>
  </div>
</section>

带加载状态的数据获取

// Server Component with Suspense
import { Suspense } from 'react';

async function DashboardData() {
  const data = await fetchDashboardData();
  return <DashboardWidgets data={data} />;
}

export default function Dashboard() {
  return (
    <div className="bento-grid">
      <Suspense fallback={<WidgetSkeleton />}>
        <DashboardData />
      </Suspense>
    </div>
  );
}

---

模板速查

模板	属性	WebGL	移动端回退方案	最佳动画库
cppn-hero	title、description、ctaButtons、microDetails	是	CSS 渐变	GSAP（SplitText）
mesh-gradient-hero	colors[]、speed、distortion、swirl	否*	原生	Framer Motion
wave-hero	title、subtitle、placeholder、onPromptSubmit	是	纯色背景	GSAP
globe-hero	globeImage、dashboardImage、accentColor	否	原生	Framer Motion
hero-section	title、badge、primaryCTA、accentColor	是	CSS 星星	二者皆可
bento-grid	children（卡片布局）	否	原生	CSS 或 Framer
dashboard-widgets	value、change、trend[]	否	原生	Framer Motion
terminal	logs[]、title	否	原生	CSS
preloader	onComplete、messages[]	可选	CSS 版本	GSAP
glass-components	各种属性	否	原生	CSS

*mesh-gradient-hero 使用 @paper-design/shaders-react（Canvas，而非 WebGL）

---

模板实用方案（从扎实基础出发，有意叠加惊艳效果）

目标	基础方案（优先清晰）	可选的惊艳升级	以下情况不采用
营销 / 候补名单	mesh-gradient-hero + glass-components + bento-grid 价值主张	将主视觉替换为 cppn-hero，或添加 wave-hero 区块展示社会认同	文案较长，或产品涉及大量合规要求
AI / 研究类落地页	cppn-hero + dashboard-widgets（指标）+ terminal 日志	添加 holographic 着色器区块，或插入 globe-hero	用户需要适合打印的交付内容
加密货币 / 金融	globe-hero + bento-grid KPI + dashboard-widgets + CTA 横条	添加 data-grid 着色器背景或滚动行情栏	性能预算低于 200KB，或仅面向移动端
开发者工具	wave-hero + terminal + glass-components 卡片	引入 digital-liquid 着色器或 3D 设备模型	受众是需要保守风格的企业买家
产品仪表盘	bento-grid + dashboard-widgets + mesh-gradient-hero（静态）	添加迷你 WebGL 模块（有感知力的核心、粒子地球）	数据密集，需要清晰的表格呈现

布局流程方案

1. 主视觉（标志性点缀） → 关键指标 / 价值主张（沉稳） → 产品证明（屏幕截图） → 用户评价 / Logo → CTA（发光按钮）。
2. 仪表盘页面：首屏摘要（精简） → 功能网格（非对称） → 实时数据（终端 / 迷你趋势图） → 帮助 / 资源（沉稳）。
3. 文档 / 平台：简洁页眉（mesh-gradient-hero 的 CSS 模式） → 导航网格 → 内容区（等宽字体） → CTA。

每个流程最多使用 两个高饱和度区块。如果需要更多动感，不要再添加一个着色器，而应改为给 CTA 或强调边框添加动画。

模板混搭与适配模式

需求	操作	备注
从 WebGL 降级为 CSS	将 cppn-hero 替换为 mesh-gradient-hero，保留相同文案。将着色器背景换成 bg-gradient-to-b。	用户提到“移动端优先”“性能”或“轻量”时使用。
从 CSS 升级为 WebGL	从 mesh-gradient-hero 开始，然后注入 ShaderBackground，并复用 cppn-hero 中的 props。	仅在确认客户端想要“电影感”或“实验性”效果后使用。
替换着色器	使用着色器的任何 Hero 都可以通过替换导入项来切换到其他着色器（例如，holographic ↔ digital-liquid）。保持 uniform 名称一致。	在替换时一并记录新的强调色调色板。
内容密度模式	当设计需要承载大量文本时，保留 Hero 的视觉效果，但让后续每个区块都使用 bg-black 和简洁的边框。	示例：顶部使用 cppn-hero，后续使用普通玻璃卡片构成的 bento-grid。
提示词到模板的默认映射	- “简洁 SaaS” → Mesh 渐变套件 - “AI 平台” → CPPN Hero + 仪表盘指标 - “加密货币交易” → Globe Hero + 行情滚动条 - “开发者 CLI” → Wave Hero + 终端	在回复中直接说明这些默认映射，避免模型凭空生成新结构。

如果拿不准：从基线方案开始，先交付可用布局，再提出一项令人惊艳的升级作为后续建议（“如果你想要更有神经网络氛围的效果，我们也可以换成 CPPN 着色器。”）。

---

模板与着色器选择指南

使用本指南，根据用户的需求选择合适的模板和着色器。不要凡事都默认使用同一个 Hero——应让美学风格与领域相匹配。

行业／垂直领域映射

行业	Hero 模板	着色器	强调色	调性
AI/ML/神经网络	cppn-hero	cppn-generative	青色 #00f3ff / 紫色 #a855f7	有机、鲜活、数学感
加密货币/DeFi/交易	globe-hero	data-grid	紫色 #9b87f5 / 琥珀色 #f59e0b	全球化、技术感、金融感
开发者工具/API	wave-hero	digital-liquid	蓝色 #1f3dbc / 橙色 #ff4d00	技术感、动态、创造者气质
SaaS/B2B/产品	mesh-gradient-hero	(仅 CSS)	柔和的粉彩色	简洁、专业、可信
创意机构	hero-section（CyberpunkHero）	holographic	霓虹色	大胆、实验性、艺术感
金融科技/仪表盘	bento-grid + dashboard-widgets	data-grid	绿色 #10b981 / 蓝色 #3b82f6	数据丰富、精确、分析性

基于关键词的选择

分析用户需求时，将关键词与模板匹配：

User Request Analysis:
├── Contains "AI", "neural", "intelligent", "learning", "model", "GPT"
│   → cppn-hero + cppn-generative shader
│   → Organic, flowing backgrounds that feel "alive"
│
├── Contains "crypto", "blockchain", "trading", "global", "DeFi", "web3"
│   → globe-hero + data-grid shader
│   → Earth imagery, global reach, financial precision
│
├── Contains "developer", "API", "code", "build", "deploy", "ship"
│   → wave-hero + digital-liquid shader
│   → Dynamic bars, typing animations, terminal aesthetic
│
├── Contains "SaaS", "product", "waitlist", "brand", "startup", "launch"
│   → mesh-gradient-hero (no WebGL needed)
│   → Soft, fluid gradients, professional feel
│
├── Contains "futuristic", "cyber", "agency", "creative", "portfolio"
│   → hero-section (CyberpunkHero) + holographic shader
│   → Particle spheres, text scramble, scanlines
│
└── Contains "dashboard", "analytics", "metrics", "data", "monitoring"
    → bento-grid + dashboard-widgets + terminal
    → Stat cards, sparklines, live data feeds

基于性能的选择

根据目标受众和设备限制进行选择：

性能等级	模板	最适用场景
高端（WebGL）	cppn-hero、wave-hero、hero-section	桌面端优先、作品集网站、创意机构
中等（Canvas/图像）	globe-hero	营销网站、加密货币落地页
轻量（仅 CSS）	mesh-gradient-hero、bento-grid	移动端优先、SaaS、B2B、注重无障碍的场景

着色器搭配指南

着色器	美学风格	适配场景
cppn-generative	神经网络、有机、数学感	AI 产品、生成艺术、研究工具
data-grid	矩阵、技术感、赛博朋克	加密货币、金融科技、开发者工具
digital-liquid	流动、动态、流畅	创意工具、媒体平台
holographic	科幻、虹彩、未来感	游戏、AR/VR、实验性项目

快速决策流程图

Is performance critical (mobile-first)?
├── YES → mesh-gradient-hero (CSS only)
└── NO → Continue...
    │
    Is it AI/ML related?
    ├── YES → cppn-hero
    └── NO → Continue...
        │
        Is it crypto/global/financial?
        ├── YES → globe-hero
        └── NO → Continue...
            │
            Is it developer-focused?
            ├── YES → wave-hero
            └── NO → hero-section (CyberpunkHero)

---

文件结构

premium-frontend-skill/
├── SKILL.md                           # This document
├── examples/
│   ├── 01-racing-dashboard.tsx        # Motorsport telemetry
│   ├── 02-cyberpunk-platform.tsx      # Developer platform
│   ├── 03-bioluminescent-landing.tsx  # AI agency landing
│   ├── 04-fintech-protocol.tsx        # DeFi interface
│   └── 05-neural-interface.tsx        # Sentient AI core
├── templates/
│   ├── preloader.tsx                  # Boot sequence loader
│   ├── glass-components.tsx           # Glassmorphic UI elements
│   ├── terminal.tsx                   # Live logs display
│   ├── bento-grid.tsx                 # Dashboard layout system
│   ├── dashboard-widgets.tsx          # Stat cards, charts, metrics
│   ├── hero-section.tsx               # CyberpunkHero + StarfieldScene
│   ├── cppn-hero.tsx                  # Neural network shader hero
│   ├── mesh-gradient-hero.tsx         # Fluid gradient hero (CSS-light)
│   ├── wave-hero.tsx                  # Animated wave bars hero
│   └── globe-hero.tsx                 # 3D globe with dashboard
└── shaders/
    ├── cppn-generative.glsl.ts        # Neural pattern generator
    ├── digital-liquid.glsl.ts         # Flowing noise effect
    ├── data-grid.glsl.ts              # Matrix/grid effect
    └── holographic.glsl.ts            # Hologram interference

---

牢记

“目标是打造鲜活、电影感十足、令人难忘的界面。每一个像素都应经过精心设计。这些不只是网站，更是体验。”

大胆放手去做，展现跳出框架、全心投入独特构想时真正能创造出的作品。