modern-web-design

现代 Web 设计

概述

2024-2025 年的现代 Web 设计注重性能、无障碍性和有意义的交互。本技能全面介绍当前的设计趋势、实现模式和最佳实践，帮助打造引人入胜、无障碍且高性能的 Web 体验。

这项元技能综合了本仓库中所有动画、交互和 3D 技能的知识，提供整体性的设计指导。

核心设计原则（2024-2025）

1. 性能优先设计

理念：设计决策应优先考虑 Core Web Vitals，以及各种设备上的用户体验。

关键指标：

• 最大内容绘制（LCP）：< 2.5s
• 首次输入延迟（FID）：< 100ms
• 累积布局偏移（CLS）：< 0.1
• 与下一次绘制的交互（INP）：< 200ms

实现指南：

• 将非关键动画延迟到页面加载完成后
• 使用 CSS transforms/opacity 实现动画（由 GPU 加速）
• 为图像、视频和 3D 内容实现延迟加载
• 渐进增强：无需 JavaScript 也能呈现核心内容

相关技能：使用 gsap-scrolltrigger、motion-framer、lottie-animations 实现优化的动画

2. 大胆的极简主义

特点：

• 大尺寸、醒目的字体排版（使用 clamp() 实现流畅缩放）
• 充足的留白（将负空间作为设计元素）
• 精简的配色方案（3-5 种主色）
• 有意识地使用醒目的强调色
• 几何形状与简洁线条

字体排版比例（现代流体系统）：

/* Fluid typography using clamp() */
--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--font-size-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
--font-size-2xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
--font-size-3xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);

色彩系统（无障碍优先）：

/* WCAG AAA compliant color system */
--color-primary: oklch(50% 0.2 250); /* Blue */
--color-accent: oklch(65% 0.25 30);  /* Coral */
--color-neutral-50: oklch(98% 0 0);
--color-neutral-900: oklch(20% 0 0);
/* Contrast ratio: minimum 7:1 for text */

相关技能：使用 animated-component-libraries 获取 UI 组件

3. 微交互

定义：提供反馈、引导用户并提升感知性能的细微且有目的的动画。

类别：

a) 悬停状态（桌面端）：

• 缩放变换（1.05-1.1x）
• 颜色过渡（200-300ms）
• 阴影深度变化
• 光标变换

b) 加载状态：

• 骨架屏（优于加载动画）
• 渐进式图像加载（模糊渐显技术）
• 乐观 UI 更新
• 错落式内容显现

c) 交互反馈：

• 按钮按下状态（缩小至 0.95x）
• 带弹簧物理效果的切换开关
• 表单字段验证（即时且友善的反馈）
• 带动效的成功/错误状态

实现示例（Framer Motion）：

// Button with micro-interaction
<motion.button
  whileHover={{ scale: 1.05, y: -2 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  Click me
</motion.button>

相关技能：使用 motion-framer、react-spring-physics、animejs 实现微交互

4. 滚动叙事

定义：以叙事为主线，内容会随着用户滚动而显现和变换的体验。

模式：

a) 滚动触发显现：

• 进入视口时淡入（带偏移）
• 从两侧滑入并错落呈现
• 缩放 + 不透明度过渡
• clip-path 显现

b) 滚动联动动画：

• 视差图层（不同的滚动速度）
• 水平滚动区域
• 带滚动控制动画的固定区域
• 与滚动联动的 3D 对象旋转

c) 进度指示器：

• 阅读进度条
• 逐步显示的视觉指南
• 随滚动绘制的 SVG 动画路径

实现示例（GSAP ScrollTrigger）：

// Scroll-linked 3D rotation
gsap.to(".cube", {
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    scrub: 1, // Smooth scrubbing
  },
  rotationY: 360,
  ease: "none"
});

相关技能：使用 gsap-scrolltrigger、locomotive-scroll、scroll-reveal-libraries、react-three-fiber 实现 3D 滚动叙事

5. 光标 UX

演进：自定义光标可增强交互并提供情境反馈。

模式：

a) 自定义光标形状：

• 圆形／点状跟随光标（带延迟和缓动）
• 基于文本的光标（“查看”“拖动”“点击”）
• 使用混合模式增添视觉趣味
• 悬停时缩放／变形

b) 情境化变换：

• 在链接／按钮上扩展
• 磁性吸附到交互元素
• 在图片上反转颜色
• 为操作使用自定义图标（播放、缩放、展开）

c) 性能注意事项：

• 仅使用 CSS 变换（不用 top/left）
• JS 光标使用 RequestAnimationFrame
• 在移动设备／触摸设备上禁用
• 尊重 prefers-reduced-motion

实现示例：

// Simple smooth cursor follower
const cursor = document.querySelector('.cursor');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;

document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

function updateCursor() {
  // Smooth easing
  cursorX += (mouseX - cursorX) * 0.1;
  cursorY += (mouseY - cursorY) * 0.1;

  cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
  requestAnimationFrame(updateCursor);
}
updateCursor();

相关技能：gsap-scrolltrigger（用于缓动）、motion-framer（用于 React 光标组件）

6. 玻璃拟态与纵深感

特征：

• 磨砂玻璃效果（backdrop-filter）
• 具有纵深层级的分层 UI
• 微妙的阴影和边框
• 半透明背景

现代玻璃拟态（2024）：

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

纵深系统（分层）：

/* Elevation scale */
--elevation-1: 0 1px 3px rgba(0,0,0,0.12);
--elevation-2: 0 4px 8px rgba(0,0,0,0.15);
--elevation-3: 0 8px 16px rgba(0,0,0,0.18);
--elevation-4: 0 16px 32px rgba(0,0,0,0.2);

相关技能：animated-component-libraries，用于玻璃拟态组件

7. AI 增强个性化

模式：

a) 自适应内容：

• 根据用户行为动态调整布局
• 个性化内容推荐
• 自适应配色方案（系统偏好 + 用户历史记录）
• 根据情境设置智能默认值

b) 智能交互：

• 提供即时结果的预测性搜索
• 智能表单补全
• 感知情境的建议
• 根据使用情况渐进式展示内容

c) 性能 + 隐私：

• 客户端个性化（localStorage、IndexedDB）
• 使用边缘计算实现快速个性化
• 保护隐私的分析
• 透明的数据使用方式

实现注意事项：

• 回退到默认体验
• 个性化不得造成布局偏移
• 尊重“请勿跟踪”
• 符合 GDPR/CCPA 要求

常见设计模式

模式 1：沉浸式主视觉区域

适用场景：落地页、产品发布、作品集网站

特征：

• 全视口高度
• 微妙的 3D 背景或动态渐变
• 使用流体排版的大标题
• 平滑的滚动指示器
• 滚动离开时产生视差效果

实现（组合方案）：

HTML 结构：

<section class="hero">
  <div id="bg-canvas"></div>
  <div class="hero__content">
    <h1 class="hero__title">Modern Design</h1>
    <p class="hero__subtitle">Performance meets beauty</p>
    <button class="hero__cta">Explore</button>
  </div>
  <div class="scroll-indicator">
    <span>Scroll</span>
  </div>
</section>

技术：

• 背景：Vanta.js WAVES 效果（lightweight-3d-effects）
• 文本动画：GSAP SplitText，带交错效果（gsap-scrolltrigger）
• 按钮：Framer Motion 悬停状态（motion-framer）
• 滚动指示器：CSS 动画 + 滚动时使用 GSAP 淡出

相关技能：lightweight-3d-effects、gsap-scrolltrigger、motion-framer

模式 2：水平滚动图库

适用场景：作品集、产品展示、案例研究

实现（GSAP ScrollTrigger）：

gsap.to(".gallery__track", {
  x: () => -(document.querySelector(".gallery__track").scrollWidth - window.innerWidth),
  ease: "none",
  scrollTrigger: {
    trigger: ".gallery",
    pin: true,
    scrub: 1,
    end: () => "+=" + document.querySelector(".gallery__track").scrollWidth
  }
});

增强项：

• 图片滚动进入视口时再延迟加载
• 卡片内部视差效果
• 活动卡片缩放变换
• 使用 Locomotive 实现平滑的惯性滚动

相关技能：gsap-scrolltrigger、locomotive-scroll

模式 3：3D 产品查看器

适用场景：电子商务、产品营销、产品展示

实现（React Three Fiber）：

import { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF } from '@react-three/drei'

function ProductViewer() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 50 }}>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} />
      <Product />
      <OrbitControls
        enableZoom={false}
        autoRotate
        autoRotateSpeed={2}
      />
    </Canvas>
  )
}

增强项：

• 材质变体（颜色选择器）
• 带注释的热点
• 移动设备上的 AR 模式
• 截图／分享功能

相关技能：react-three-fiber、threejs-webgl、model-viewer-component

模式 4：动态数据可视化

适用场景：仪表板、分析、信息图表

模式：

• 滚动进入视口时播放数字递增动画
• 动态展示图表（进度条、饼图）
• 交错播放网格动画
• 用粒子背景表示数据

实现（Framer Motion + IntersectionObserver）：

function AnimatedStat({ end, label }) {
  const [count, setCount] = useState(0);
  const ref = useRef();
  const isInView = useInView(ref, { once: true });

  useEffect(() => {
    if (isInView) {
      // Count up animation
      const duration = 2000;
      const steps = 60;
      const increment = end / steps;
      let current = 0;

      const timer = setInterval(() => {
        current += increment;
        if (current >= end) {
          setCount(end);
          clearInterval(timer);
        } else {
          setCount(Math.floor(current));
        }
      }, duration / steps);
    }
  }, [isInView, end]);

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 20 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6 }}
    >
      <h2>{count}+</h2>
      <p>{label}</p>
    </motion.div>
  );
}

相关技能：motion-framer；基于画布的可视化可使用 pixijs-2d

模式 5：页面过渡

用例：多页面应用、作品集网站、叙事体验

实现（Barba.js + GSAP）：

barba.init({
  transitions: [{
    name: 'slide',
    leave(data) {
      return gsap.to(data.current.container, {
        xPercent: -100,
        duration: 0.5
      });
    },
    enter(data) {
      return gsap.from(data.next.container, {
        xPercent: 100,
        duration: 0.5
      });
    }
  }]
});

现代替代方案：

• View Transitions API（Chrome 111+，渐进增强）
• React SPA 中使用 Framer Motion 的 AnimatePresence
• 共享元素过渡

相关技能：barba-js、gsap-scrolltrigger、motion-framer

模式 6：交互式光标效果

用例：创意机构、作品集、交互式体验

模式：

• 延迟跟随的文本光标
• 磁性按钮（光标被元素吸引）
• 混合模式光标（反转颜色）
• 揭示内容的光标

实现（原生 JS + GSAP）：

const links = document.querySelectorAll('a');
const cursor = document.querySelector('.cursor');

links.forEach(link => {
  link.addEventListener('mouseenter', () => {
    gsap.to(cursor, {
      scale: 2,
      duration: 0.3,
      ease: "power2.out"
    });
  });

  link.addEventListener('mouseleave', () => {
    gsap.to(cursor, {
      scale: 1,
      duration: 0.3,
      ease: "power2.out"
    });
  });
});

相关技能：gsap-scrolltrigger、motion-framer

模式 7：交错式内容显现

用例：功能板块、客户评价、团队网格

实现（Framer Motion variants）：

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

function FeatureGrid() {
  return (
    <motion.div
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.3 }}
      className="grid"
    >
      {features.map((feature, i) => (
        <motion.div key={i} variants={item}>
          {feature}
        </motion.div>
      ))}
    </motion.div>
  );
}

相关技能：motion-framer、gsap-scrolltrigger、scroll-reveal-libraries

与其他技能集成

动画技能集成

GSAP ScrollTrigger（gsap-scrolltrigger）：

• 用于滚动驱动的叙事
• 固定板块，逐步显现内容
• 将动画与滚动位置同步
• 批量处理动画以提升性能

Framer Motion（motion-framer）：

• React 组件动画
• 使用 AnimatePresence 实现页面过渡
• 基于手势的交互（拖动、悬停、轻触）
• 布局动画（共享元素过渡）

React Spring（react-spring-physics）：

• 基于物理效果的动画（感觉更自然）
• 交互式弹簧效果（拖动、拉动）
• 轨迹动画（依次显现）
• 用于营造“真实”感的 UI 反馈

Anime.js（animejs）：

• SVG 路径动画（线条绘制）
• SVG 变形过渡
• 交错网格动画
• 基于时间轴的序列

Lottie（lottie-animations）：

• 由设计师制作的复杂动画
• 图标动画和微交互
• 加载状态
• 滚动驱动的播放

3D 技能集成

Three.js（threejs-webgl）：

• 自定义 3D 场景和体验
• 着色器效果和后期处理
• 基于 WebGL 的粒子系统
• 高级灯光和材质

React Three Fiber（react-three-fiber）：

• 在 React 应用中实现 3D
• 产品查看器和配置器
• 交互式 3D UI 组件
• 滚动驱动的 3D 动画

Babylon.js（babylonjs-engine）：

• 基于物理效果的 3D 体验
• VR/XR 应用
• 类游戏交互
• 用于增强真实感的 PBR 材质

轻量级 3D（lightweight-3d-effects）：

• 背景效果（Vanta.js）
• 微妙的 3D 插画（Zdog）
• 倾斜效果（Vanilla-Tilt）
• 注重性能的 3D 点缀

组件库

动画组件（animated-component-libraries）：

• Magic UI 组件（背景、文本效果）
• 预构建的交互式组件
• 设计系统基础
• 快速原型设计

滚动显现（scroll-reveal-libraries）：

• 滚动时简单淡入/滑入
• 集成 AOS 库
• ScrollTrigger 的轻量级替代方案
• 快速实现基础内容显现效果

无障碍最佳实践

1. 动效与动画

尊重用户偏好：

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

JavaScript 检测：

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (prefersReducedMotion) {
  // Disable or simplify animations
  gsap.config({ nullTargetWarn: false });
  // Skip scroll animations, use instant reveals
}

2. 色彩对比度

WCAG AAA 标准：

• 正文：对比度 7:1
• 大号文本（18pt+）：对比度 4.5:1
• 使用 OKLCH 色彩空间，确保感知上的均匀性

测试：

// Check contrast ratio
function getContrastRatio(color1, color2) {
  const l1 = getLuminance(color1);
  const l2 = getLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

3. 键盘导航

要求：

• 所有交互元素都可聚焦
• 显示清晰的焦点指示器（不要设置 outline: none）
• 合理的 Tab 顺序
• 为较长的导航提供跳过链接
• 按 Escape 键关闭模态框/覆盖层

焦点样式（现代）：

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

4. 屏幕阅读器支持

语义化 HTML：

• 使用正确的标题层级（h1-h6）
• 地标区域（header、nav、main、footer）
• 为图标按钮添加 aria-label
• 为动态内容添加 aria-live 区域

动画播报：

<div role="status" aria-live="polite" aria-atomic="true">
  Loading complete. 12 items displayed.
</div>

5. 触控目标

最小尺寸：44x44px（iOS），48x48px（Android）

间距：触控目标之间至少间隔 8px

实现：

.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
  /* Tap target includes padding */
}

性能优化

1. 动画性能

60 FPS 检查清单：

• 使用 CSS transforms（translateX/Y/Z、scale、rotate）——由 GPU 加速
• 淡入淡出使用 opacity——由 GPU 加速
• 避免：top/left、width/height、margin、padding 动画
• 谨慎使用 will-change（会占用内存）
• 使用 RequestAnimationFrame 实现 JS 动画

GSAP 性能：

// Force GPU acceleration
gsap.set(element, { force3D: true });

// Use will-change during animation only
gsap.to(element, {
  x: 100,
  onStart: () => element.style.willChange = 'transform',
  onComplete: () => element.style.willChange = 'auto'
});

2. 加载策略

关键路径：

• 内联关键 CSS（首屏内容）
• 延迟加载非关键 CSS
• 异步加载 JavaScript
• 预加载字体和主视觉图片

渐进增强：

<style>
  /* Critical CSS inlined */
</style>


<link rel="preload" href="animations.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="animations.css"></noscript>

3. 图片优化

现代格式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

响应式图片：

<img
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="image-800.jpg"
  alt="Description"
  loading="lazy"
>

4. 3D 内容优化

加载策略：

• 加载期间显示占位内容
• 优先加载低多边形模型
• 渐进增强，随后加载高多边形模型
• 延迟加载首屏以下的 3D 场景

运行时性能：

• 使用对象池
• 实现 LOD（细节层次）
• 视锥剔除
• 纹理压缩（Basis Universal）

相关技能：threejs-webgl、react-three-fiber、babylonjs-engine

5. JavaScript 包大小

代码拆分：

// Dynamic imports
const AnimationModule = lazy(() => import('./animations'));

// Route-based splitting
const Gallery = lazy(() => import('./pages/Gallery'));

Tree Shaking：

• 使用 ES6 导入
• 只导入所需内容
• 使用现代构建工具（Vite、esbuild）

常见问题

问题 1：动画过多

问题：动画过多会分散用户对内容的注意力，并影响性能。

解决方案：

• 仅在有意义的交互中使用动画
• 用动画引导注意力，而不是强行吸引注意
• 遵循这一原则：“动画应有目的”
• 衡量性能影响（Chrome DevTools 的 Performance 标签页）

经验法则：如果无法说明某个动画存在的理由，就将其移除。

问题 2：忽视移动设备性能

问题：动画在桌面设备上运行正常，但在移动设备上会卡顿。

解决方案：

• 在真实设备上测试（而不只是模拟器）
• 降低移动设备上的动画复杂度
• 在低端设备上禁用开销较大的效果（视差、3D）
• 使用 matchMedia 实现针对不同设备的体验

const isLowEndDevice = () => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) &&
         navigator.hardwareConcurrency < 4;
};

if (isLowEndDevice()) {
  // Simplify or disable animations
}

问题 3：缺少回退方案

问题：没有 JavaScript 或使用较旧浏览器时，体验会出问题。

解决方案：

• 采用渐进增强的思路
• 确保无需 JS 即可访问核心内容
• 使用现代 API 前先进行功能检测
• 为关键功能提供 Polyfill

// Feature detection
if ('IntersectionObserver' in window) {
  // Use scroll-triggered animations
} else {
  // Show content immediately
}

问题 4：忽视无障碍访问

问题：忽略键盘用户、屏幕阅读器用户或对动作敏感的用户。

解决方案：

• 仅使用键盘进行测试
• 使用屏幕阅读器测试（NVDA、VoiceOver）
• 始终检查 prefers-reduced-motion
• 使用语义化 HTML
• 妥善管理焦点

检查清单：

• 所有交互元素均可通过键盘访问
• 焦点指示器清晰可见
• 颜色对比度达到 WCAG AAA 标准
• 可禁用动画
• 屏幕阅读器播报内容清晰易懂

问题 5：忽视加载状态

问题：加载内容期间出现空白屏幕或布局偏移。

解决方案：

• 为可预测的布局使用骨架屏
• 使用平滑的加载过渡效果
• 为动态内容预留空间
• 显示有意义的加载指示器

// Skeleton screen pattern
function ProductCard({ loading, data }) {
  if (loading) {
    return (
      <div className="skeleton">
        <div className="skeleton__image" />
        <div className="skeleton__title" />
        <div className="skeleton__price" />
      </div>
    );
  }

  return <ProductCardContent data={data} />;
}

问题 6：劫持滚动

问题：覆盖原生滚动行为会让用户感到不便。

解决方案：

• 保留浏览器的原生滚动行为（惯性、键盘）
• 使用 ScrollTrigger/Locomotive，但不改变滚动机制
• 允许用户按自己的节奏滚动
• 切勿完全禁用滚动
• 避免对全屏页面区块进行滚动劫持

良好实践：增强滚动体验，而不是取代它。

设计系统架构

令牌结构

现代设计令牌（CSS 自定义属性）：

:root {
  /* Colors - OKLCH for perceptual uniformity */
  --color-primary: oklch(50% 0.2 250);
  --color-accent: oklch(65% 0.25 30);

  /* Spacing - Consistent scale */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --space-xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --space-2xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);

  /* Typography - Fluid scale */
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);

  /* Animation - Consistent timing */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Easing - Natural motion */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

组件架构

原子设计（Brad Frost）：

1. 原子：按钮、输入框、标签
2. 分子：表单字段、卡片
3. 有机体：导航、主视觉区块
4. 模板：页面布局
5. 页面：具体实例

相关技能：animated-component-libraries，用于组件模式

资源

此技能在实现过程中会参考以下技能：

动画与交互

• gsap-scrolltrigger - 滚动驱动的动画、固定、滚动进度控制
• motion-framer - React 动画、手势、布局动画
• react-spring-physics - 基于物理效果的动画
• animejs - SVG 动画、交错效果
• lottie-animations - 设计师制作的动画
• scroll-reveal-libraries - 简单的滚动显现效果（AOS）

3D 与 WebGL

• threejs-webgl - 自定义 3D 场景和效果
• react-three-fiber - React 应用中的 3D
• babylonjs-engine - 基于物理效果的 3D、VR/XR
• lightweight-3d-effects - Vanta.js 背景、Zdog 插画

页面过渡与滚动

• barba-js - 页面过渡
• locomotive-scroll - 平滑滚动

组件库

• animated-component-libraries - Magic UI、React Bits
• pixijs-2d - 基于 Canvas 的 2D 图形

详细参考资料

请查看 references/ 目录中的详细文档：

• design_trends_2024.md - 当前 Web 设计趋势与预测
• interaction_patterns.md - 全面的微交互目录
• accessibility_guide.md - WCAG 合规模式与测试
• performance_checklist.md - 优化策略与指标

脚本

scripts/ 目录包含用于实现设计模式的工具：

• pattern_generator.py - 生成设计模式样板代码
• design_audit.py - 审查现有设计的合规性

资源文件

assets/ 目录包含设计系统模板和起始文件。详情请参阅 assets/README.md。