前端UI/UX工程师Skill frontend-ui-ux-engineer

---

name: frontend-ui-ux-engineer description: 一位由设计师转型的开发人员，即使没有设计稿也能打造惊艳的UI/UX。代码可能有点乱，但视觉效果总是出彩。

前端UI/UX工程师

目的

提供前端设计和开发专业知识，专注于在没有设计稿的情况下创建视觉惊艳、以用户为中心的界面。运用创造性设计思维、高级样式、动画和现代Web应用的无障碍最佳实践，打造美观的UI/UX。

使用时机

• 需要将功能性UI转化为视觉惊艳的界面时
• 没有设计稿但需要美观的UI时
• 视觉润色和微交互是优先事项时
• 组件样式需要创造性设计思维时
• 没有专职设计师但需要改进用户体验时

快速开始

在以下情况调用此技能：

• 需要将功能性UI转化为视觉惊艳的界面
• 没有设计稿，但需要美观的UI
• 视觉润色和微交互的优先级高于代码优雅性
• 组件样式需要创造性设计思维
• 没有专职设计师但需要改进用户体验

不要在以下情况调用：

• 需要后端逻辑或API开发时
• 纯代码重构且无视觉更改时
• 性能优化是唯一优先事项时
• 需要安全重点开发时
• 数据库或基础设施工作时

---

---

核心工作流

工作流 1：将功能组件转化为惊艳UI

用例： 给定一个普通的React组件，使其在视觉上脱颖而出

输入示例：

// 之前：功能齐全但普通
function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button>添加到购物车</button>
    </div>
  );
}

步骤：

1. 视觉分析（2分钟）

需要回答的问题：
- 应该唤起什么情感？（高级感？趣味性？可信赖感？）
- 视觉层次是什么？（图片 > 名称 > 价格 > 行动号召）
- 哪些交互能让用户愉悦？（悬停效果、平滑过渡）
- 哪里需要留白？（元素周围的呼吸空间）

2. 色彩与排版增强

// 之后：建立视觉基础
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' }}
    >
      {/* 图片容器，带宽高比 */}
      <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"
        />
        {/* 用于可读性的渐变叠加层 */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
      </div>

      {/* 内容，带适当间距 */}
      <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>

        {/* 增强的行动号召按钮 */}
        <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">
          添加到购物车
        </button>
      </div>
    </motion.div>
  );
}

3. 微交互与润色

// 最终：添加了令人愉悦的交互
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"
        />
        
        {/* 带有动画的促销徽章 */}
        {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"
          >
            促销
          </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} // 价格变化时重新动画
            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
          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" />
              已添加！
            </span>
          ) : (
            '添加到购物车'
          )}
        </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}
    `}>
      {/* 可选的渐变叠加层 */}
      <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">
      {/* 微光效果 */}
      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/50 to-transparent" />
      
      {/* 骨架屏内容 */}
      <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 配置（添加到 tailwind.config.js）
{
  theme: {
    extend: {
      animation: {
        shimmer: 'shimmer 2s infinite',
      },
      keyframes: {
        shimmer: {
          '100%': { transform: 'translateX(100%)' },
        },
      },
    },
  },
}

---

---

❌ 反模式 2：忽略色彩对比度

表现：

/* ❌ 浅灰色背景上的灰色文字 = 难以阅读 */
.subtle-text {
  color: #999999;
  background: #f0f0f0;
  /* 对比度比率：2.1:1（不符合WCAG AA 4.5:1要求） */
}

失败原因：

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

正确方法：

/* ✅ 足够的对比度 */
.readable-text {
  color: #333333;
  background: #ffffff;
  /* 对比度比率：12.6:1（符合WCAG AAA） */
}

/* 或使用设计系统令牌 */
.text {
  color: var(--color-text-primary);    /* 保证4.5:1 */
  background: var(--color-bg-surface); /* 相对于文字颜色 */
}

---

---

质量检查清单

视觉润色

• [ ] 调色板使用最多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">）