frontend-ui-ux-engineer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend UI/UX Engineer

前端UI/UX工程师

Purpose

目标

Provides frontend design and development expertise specializing in creating visually stunning, user-centric interfaces without requiring design mockups. Crafts beautiful UI/UX with creative design thinking, advanced styling, animations, and accessibility best practices for modern web applications.

提供前端设计与开发专业能力，专注于无需设计稿即可打造视觉惊艳、以用户为中心的界面。运用创意设计思维、高级样式、动画效果以及无障碍设计最佳实践，为现代Web应用打造美观的UI/UX。

When to Use

适用场景

Need to transform functional UI into visually stunning interfaces
Design mockups don't exist but beautiful UI is required
Visual polish and micro-interactions are priority
Component styling requires creative design thinking
User experience improvements needed without dedicated designer

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

Quick Start

快速开始

Invoke this skill when:

Need to transform functional UI into visually stunning interfaces
Design mockups don't exist, but beautiful UI is required
Visual polish and micro-interactions are priority over code elegance
Component styling requires creative design thinking
User experience improvements needed without dedicated designer

Do NOT invoke when:

Backend logic or API development needed
Pure code refactoring without visual changes
Performance optimization is sole priority
Security-focused development required
Database or infrastructure work

在以下场景调用此技能：

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

请勿在以下场景调用：

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

Core Workflows

核心工作流程

Workflow 1: Transform Functional Component to Stunning UI

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

Use case: Given a plain React component, make it visually exceptional

Input Example:

tsx

// 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>
  );
}

Steps:

1. Visual Analysis (2 minutes)

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. Color & Typography Enhancement

tsx

// 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. Micro-interactions & Polish

tsx

// 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>
  );
}

Expected Outcome:

Visual appeal increased 5x
Engagement metrics improve 20-40% (typical)
User delight through micro-interactions
Maintains accessibility (ARIA labels, keyboard navigation)

使用案例： 给定一个基础React组件，将其打造为视觉出众的版本

输入示例：

tsx

// 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分钟）

需要回答的问题：
- 该组件应传递何种情感？（高端？活泼？可信？）
- 视觉层级是什么？（图片 > 名称 > 价格 > 行动按钮）
- 哪些交互能让用户愉悦？（悬停效果、平滑过渡）
- 哪些地方需要留白？（元素周围的呼吸空间）

2. 色彩与排版优化

tsx

// 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. 微交互与细节优化

tsx

// 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标签、键盘导航）

Patterns & Templates

模式与模板

Pattern 1: Glassmorphism Card

模式1：毛玻璃效果卡片

When to use: Modern, premium aesthetic (works well with colorful backgrounds)

tsx

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>
  );
}

适用场景： 现代、高端美学风格（搭配彩色背景效果极佳）

tsx

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>
  );
}

Pattern 3: Skeleton Loading with Shimmer

模式3：带微光效果的骨架屏加载

When to use: Loading states for cards, lists (better UX than spinners)

tsx

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%)' },
        },
      },
    },
  },
}

适用场景： 卡片、列表的加载状态（用户体验优于加载动画）

tsx

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%)' },
        },
      },
    },
  },
}

❌ Anti-Pattern 2: Ignoring Color Contrast

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

What it looks like:

css

/* ❌ 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) */
}

Why it fails:

Fails WCAG AA accessibility (4.5:1 contrast for text)
Users with visual impairments cannot read content
Poor UX in bright sunlight (mobile devices)

Correct approach:

css

/* ✅ 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 */
}

示例：

css

/* ❌ 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）
视觉障碍用户无法读取内容
在强光下（移动设备）用户体验极差

正确做法：

css

/* ✅ 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 */
}

Quality Checklist

质量检查清单

Visual Polish

视觉优化

Accessibility

无障碍性

Color contrast ≥4.5:1 for text (WCAG AA)
Focus indicators visible on all interactive elements
Animations respect
```
prefers-reduced-motion
```
Alt text on all images
Keyboard navigation works (Tab, Enter, Esc)

文本色彩对比度≥4.5:1（符合WCAG AA标准）
所有可交互元素都有可见的焦点指示器
动画效果尊重
```
prefers-reduced-motion
```
设置
所有图片都有替代文本
键盘导航可用（Tab、Enter、Esc键）

Responsive Design

响应式设计

Mobile-first approach (320px base)
Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
Touch targets ≥44x44px (mobile)
No horizontal scroll on mobile
Images responsive (
```
max-width: 100%
```
,
```
height: auto
```
)

采用移动端优先的设计思路（基础尺寸320px）
断点设置：sm（640px）、md（768px）、lg（1024px）、xl（1280px）
移动端触摸目标尺寸≥44x44px
移动端无横向滚动
图片支持响应式（
```
max-width: 100%
```
、
```
height: auto
```
）

Performance

性能

Animations use
```
transform
```
and
```
opacity
```
(GPU-accelerated)
Images optimized (WebP, lazy loading)
CSS bundle <50KB (after minification)
No layout shift (CLS <0.1)
Fonts preloaded (
```
<link rel="preload">
```
)

动画使用
```
transform
```
和
```
opacity
```
（GPU加速）
图片已优化（WebP格式、懒加载）
CSS包体积<50KB（压缩后）
无布局偏移（CLS <0.1）
字体已预加载（
```
<link rel="preload">
```
）