frontend-ui-ux-engineer

前端 UI/UX 工程师

目的

提供前端设计与开发方面的专业能力，专注于无需设计稿也能打造出色、以用户为中心的界面。运用创意设计思维、进阶样式、动画和无障碍最佳实践，为现代 Web 应用打造精美的 UI/UX。

适用场景

• 需要将功能完善的 UI 转变为视觉效果出色的界面
• 没有设计稿，但需要打造精美的 UI
• 优先关注视觉润色和微交互
• 组件样式设计需要创意设计思维
• 需要改善用户体验，但没有专职设计师

快速开始

在以下情况下调用此技能：

• 需要将功能完善的 UI 转变为视觉效果出色的界面
• 没有设计稿，但需要打造精美的 UI
• 相较于代码简洁性，更优先关注视觉润色和微交互
• 组件样式设计需要创意设计思维
• 需要改善用户体验，但没有专职设计师

以下情况不要调用：

• 需要开发后端逻辑或 API
• 只需重构代码，不涉及视觉变化
• 唯一优先事项是性能优化
• 需要以安全性为重点的开发
• 需要处理数据库或基础设施

---

---

核心工作流

工作流 1：将功能组件改造为出色的 UI

使用场景： 给定一个普通的 React 组件，将其改造成视觉效果出众的组件

输入示例：

// Before: Functional but plain
function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button>Add to Cart</button>
    </div>
  );
}

步骤：

1. 视觉分析（2 分钟）

Questions to answer:
- What emotion should this evoke? (Premium? Playful? Trustworthy?)
- What's the visual hierarchy? (Image > Name > Price > CTA)
- What interactions delight users? (Hover effects, smooth transitions)
- Where's the whitespace needed? (Breathing room around elements)

2. 优化颜色与字体

// After: Visual foundation established
import { motion } from 'framer-motion';

function ProductCard({ product }: { product: Product }) {
  return (
    <motion.div
      className="group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow hover:shadow-2xl"
      whileHover={{ y: -4 }}
      transition={{ duration: 0.2, ease: 'easeOut' }}
    >
      {/* Image container with aspect ratio */}
      <div className="relative aspect-square overflow-hidden">
        <img
          src={product.image}
          alt={product.name}
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
        />
        {/* Gradient overlay for readability */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
      </div>

      {/* Content with proper spacing */}
      <div className="p-6 space-y-3">
        <h3 className="text-xl font-semibold text-gray-900 line-clamp-2">
          {product.name}
        </h3>
        
        <div className="flex items-baseline gap-2">
          <span className="text-2xl font-bold text-blue-600">
            ${product.price}
          </span>
          {product.compareAtPrice && (
            <span className="text-sm text-gray-500 line-through">
              ${product.compareAtPrice}
            </span>
          )}
        </div>

        {/* Enhanced CTA button */}
        <button className="w-full rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-300 disabled:cursor-not-allowed">
          Add to Cart
        </button>
      </div>
    </motion.div>
  );
}

3. 添加微交互并进行润色

// Final: Delightful interactions added
function ProductCard({ product, onAddToCart }: ProductCardProps) {
  const [isAdded, setIsAdded] = useState(false);

  const handleAddToCart = () => {
    onAddToCart(product);
    setIsAdded(true);
    setTimeout(() => setIsAdded(false), 2000);
  };

  return (
    <motion.div
      layout
      className="group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow hover:shadow-2xl"
      whileHover={{ y: -4 }}
    >
      <div className="relative aspect-square overflow-hidden">
        <img
          src={product.image}
          alt={product.name}
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
        />
        
        {/* Sale badge with animation */}
        {product.onSale && (
          <motion.div
            initial={{ scale: 0, rotate: -180 }}
            animate={{ scale: 1, rotate: 0 }}
            className="absolute top-4 right-4 rounded-full bg-red-500 px-3 py-1 text-sm font-bold text-white shadow-lg"
          >
            SALE
          </motion.div>
        )}
      </div>

      <div className="p-6 space-y-3">
        <h3 className="text-xl font-semibold text-gray-900 line-clamp-2 transition-colors group-hover:text-blue-600">
          {product.name}
        </h3>
        
        <div className="flex items-baseline gap-2">
          <motion.span
            className="text-2xl font-bold text-blue-600"
            key={product.price} // Re-animate on price change
            initial={{ scale: 1.2, color: '#ef4444' }}
            animate={{ scale: 1, color: '#2563eb' }}
          >
            ${product.price}
          </motion.span>
          {product.compareAtPrice && (
            <span className="text-sm text-gray-500 line-through">
              ${product.compareAtPrice}
            </span>
          )}
        </div>

        {/* Button with success state */}
        <button
          onClick={handleAddToCart}
          className={`
            w-full rounded-lg px-6 py-3 font-medium text-white transition-all
            ${isAdded 
              ? 'bg-green-500 scale-105' 
              : 'bg-blue-600 hover:bg-blue-700 active:scale-95'
            }
          `}
        >
          {isAdded ? (
            <span className="flex items-center justify-center gap-2">
              <CheckIcon className="h-5 w-5" />
              Added!
            </span>
          ) : (
            'Add to Cart'
          )}
        </button>
      </div>
    </motion.div>
  );
}

预期效果：

• 视觉吸引力提升 5 倍
• 互动指标提升 20-40%（通常情况下）
• 通过微交互带来愉悦体验
• 保持无障碍支持（ARIA 标签、键盘导航）

---

---

模式与模板

模式 1：玻璃拟态卡片

适用场景： 现代、高级的视觉风格（搭配鲜艳背景效果出色）

function GlassCard({ children, className = '' }: GlassCardProps) {
  return (
    <div className={`
      relative overflow-hidden rounded-2xl
      backdrop-blur-xl backdrop-saturate-150
      bg-white/10 border border-white/20
      shadow-xl shadow-black/5
      ${className}
    `}>
      {/* Optional gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent opacity-50" />
      
      <div className="relative z-10 p-6">
        {children}
      </div>
    </div>
  );
}

---

---

模式 3：带闪烁效果的骨架屏加载

适用场景： 卡片和列表的加载状态（比加载指示器带来更好的用户体验）

function SkeletonCard() {
  return (
    <div className="relative overflow-hidden rounded-xl bg-gray-200 p-6">
      {/* Shimmer effect */}
      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/50 to-transparent" />
      
      {/* Skeleton content */}
      <div className="space-y-4">
        <div className="h-4 w-3/4 rounded bg-gray-300" />
        <div className="h-4 w-1/2 rounded bg-gray-300" />
        <div className="h-32 w-full rounded bg-gray-300" />
      </div>
    </div>
  );
}

// Tailwind config (add to tailwind.config.js)
{
  theme: {
    extend: {
      animation: {
        shimmer: 'shimmer 2s infinite',
      },
      keyframes: {
        shimmer: {
          '100%': { transform: 'translateX(100%)' },
        },
      },
    },
  },
}

---

---

❌ 反模式 2：忽视颜色对比度

表现形式：

/* ❌ Gray text on light gray background = unreadable */
.subtle-text {
  color: #999999;
  background: #f0f0f0;
  /* Contrast ratio: 2.1:1 (FAILS WCAG AA 4.5:1 requirement) */
}

问题所在：

• 不符合 WCAG AA 无障碍标准（文本对比度需达到 4.5:1）
• 有视觉障碍的用户无法阅读内容
• 在阳光强烈的环境下用户体验较差（移动设备）

正确做法：

/* ✅ Sufficient contrast */
.readable-text {
  color: #333333;
  background: #ffffff;
  /* Contrast ratio: 12.6:1 (PASSES WCAG AAA) */
}

/* Or use design system tokens */
.text {
  color: var(--color-text-primary);    /* Guaranteed 4.5:1 */
  background: var(--color-bg-surface); /* Against text color */
}

---

---

质量检查清单

视觉润色

• 配色方案最多使用 3 种主色，加上中性色
• 字体层级清晰（3-5 种字号）
• 间距遵循统一的比例（4px、8px、16px、24px、32px……）
• 所有交互元素都有悬停状态
• 异步操作都有加载状态
• 空状态提供实用的说明

无障碍

• 文本颜色对比度 ≥4.5:1（WCAG AA）
• 所有交互元素都有清晰可见的焦点指示器
• 动画遵循 prefers-reduced-motion
• 所有图片都有替代文本
• 键盘导航可用（Tab、Enter、Esc）

响应式设计

• 采用移动端优先方案（基准宽度为 320px）
• 断点：sm（640px）、md（768px）、lg（1024px）、xl（1280px）
• 触控目标尺寸 ≥44x44px（移动设备）
• 移动设备上没有水平滚动
• 图片具有响应式布局（max-width: 100%、height: auto）

性能

• 动画使用 transform 和 opacity（由 GPU 加速）
• 图片经过优化（WebP、延迟加载）
• CSS 包体积 <50KB（压缩后）
• 不发生布局偏移（CLS <0.1）
• 字体使用预加载（<link rel="preload">）