frontend-design（前端设计）

Frontend Design

Transform web interfaces into bold, memorable experiences with distinctive aesthetics and production-grade implementation.

When to Use This Skill

Use when:

• User uploads a screenshot asking for design improvements
• User requests to build a website, landing page, or web app
• User asks to "make it look better" or "improve the design"
• User wants to create a dashboard, portfolio, or marketing site
• User needs to transform existing UI into something memorable
• User asks for creative or bold design direction

Design Thinking Process

Before writing any code, analyze and commit to a design direction:

1. Understand Context (30 seconds)

Ask yourself:

• Purpose: What problem does this interface solve? Who uses it?
• Users: Technical? Non-technical? Age group? Context of use?
• Content: Heavy text? Visual-first? Data-driven? E-commerce?
• Brand: Startup? Enterprise? Creative? Professional? Playful?

2. Choose Bold Aesthetic Direction (CRITICAL)

Pick ONE extreme direction and commit fully:

Minimalist Directions:

• Brutally Minimal - Stark contrast, system fonts, zero decoration, maximum whitespace
• Swiss Modernism - Grid-based, geometric, structured, limited color
• Japanese Zen - Natural materials, subtle shadows, breathing room, muted tones
• Scandinavian - Clean lines, natural light, soft colors, functional beauty

Maximalist Directions:

• Maximalist Chaos - Layered elements, bold typography, explosive color, controlled chaos
• Neo-Brutalism - Bold shapes, thick borders, shadow extrusion, high contrast
• Y2K/Cyber - Metallic gradients, chrome effects, futuristic UI, neon accents
• Retro-Futuristic - 70s/80s sci-fi, analog/digital fusion, warm gradients

Distinctive Styles:

• Editorial/Magazine - Bold typography hierarchy, generous images, asymmetric grids
• Art Deco/Geometric - Symmetry, gold accents, geometric patterns, luxury feel
• Organic/Natural - Curves, earth tones, textures, hand-drawn elements
• Soft/Pastel - Gentle gradients, rounded corners, light colors, dreamy atmosphere
• Industrial/Utilitarian - Raw materials, monospace fonts, technical aesthetic
• Glassmorphism - Frosted glass effects, transparency, layered depth, subtle blur
• Neumorphism - Soft shadows, subtle extrusion, tactile interfaces
• Claymorphism - 3D clay-like textures, soft shadows, playful depth

NEVER choose generic, context-free aesthetics. The direction must fit the purpose.

3. Define Differentiation

What makes this design UNFORGETTABLE?

Examples:

• "The hero section uses diagonal type layout with aggressive cropping"
• "Navigation dissolves into view with particle effects"
• "Cards cast dramatic shadows that respond to cursor position"
• "Typography scales dramatically from 12px to 120px in one scroll"
• "Background has animated gradient mesh that shifts with scroll"
• "Interactive elements have tactile, physics-based feedback"

One Memorable Thing Rule: Every design needs ONE standout feature people will remember.

4. Technical Constraints

Consider:

• Framework (HTML/CSS, React, Vue, etc.)
• Performance requirements
• Accessibility (WCAG AA minimum)
• Browser support
• Animation performance
• Responsive behavior

Typography: The Foundation

Typography is 80% of design. Get this right first.

Font Selection Strategy

AVOID THESE OVERUSED FONTS:

• ❌ Inter
• ❌ Roboto
• ❌ Arial
• ❌ Helvetica
• ❌ System fonts (unless intentionally brutalist)
• ❌ Space Grotesk (overused in AI designs)

RECOMMENDED FONT CATEGORIES:

Display/Heading Fonts (Bold Personality):

• Serif: Playfair Display, Crimson Pro, Spectral, Lora, Fraunces
• Sans-serif: DM Sans, Manrope, Outfit, Sora, Cabinet Grotesk, Archivo
• Geometric: Montserrat, Raleway, Poppins (use sparingly)
• Condensed: Anton, Bebas Neue, Oswald, Barlow Condensed
• Editorial: Bodoni Moda, Libre Baskerville, Cormorant
• Experimental: Righteous, Unbounded, Rubik, Recursive

Body/Text Fonts (Readable Comfort):

• Classic: Source Sans Pro, Public Sans, IBM Plex Sans, Work Sans
• Modern: Instrument Sans, Geist, Satoshi, Plus Jakarta Sans
• Editorial: Lora, Merriweather, Source Serif Pro, Bitter
• Technical: JetBrains Mono, Fira Code, IBM Plex Mono

Typography Hierarchy

Create dramatic contrast in scale:

/* GOOD - Dramatic contrast */
.hero-title { font-size: clamp(48px, 8vw, 120px); }
.section-title { font-size: clamp(32px, 4vw, 64px); }
.body-text { font-size: 18px; }
.caption { font-size: 14px; }

/* BAD - Timid scaling */
.hero-title { font-size: 36px; }
.section-title { font-size: 24px; }
.body-text { font-size: 16px; }

Font Pairing Patterns

Pattern 1: Contrast (Serif + Sans)

:root {
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
}

Pattern 2: Harmony (Same family, different weights)

:root {
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --weight-display: 700;
  --weight-body: 400;
}

Pattern 3: Editorial (Display Serif + Text Serif)

:root {
  --font-display: 'Fraunces', serif;
  --font-body: 'Lora', serif;
}

Color Theory & Themes

Avoid Generic Palettes

NEVER USE:

• ❌ Purple gradients on white background
• ❌ Blue (#0070f3) + White (Vercel clone)
• ❌ Generic rainbow gradients
• ❌ Equal distribution of colors

Color Strategy

Dominant + Accent Pattern:

:root {
  /* One dominant color (60%) */
  --primary: #1a1a1a;

  /* One accent color (30%) */
  --accent: #ff6b35;

  /* One highlight (10%) */
  --highlight: #f7f052;

  /* Neutrals */
  --background: #fafafa;
  --text: #2d2d2d;
}

Monochromatic with Punch:

:root {
  /* Single hue, varied lightness */
  --color-900: #0a2540;
  --color-700: #1a4d7a;
  --color-500: #2a7ab0;
  --color-300: #5fa8d3;
  --color-100: #b8dced;

  /* One contrasting accent */
  --accent: #ff6b35;
}

Natural/Earthy:

:root {
  --clay: #d4a574;
  --stone: #6b7280;
  --moss: #4a5d23;
  --sand: #f4f1e8;
  --rust: #a0522d;
}

High Contrast/Bold:

:root {
  --black: #000000;
  --white: #ffffff;
  --red: #ff0000;
  --yellow: #ffff00;
}

Dark Mode Excellence

Don't just invert colors:

/* GOOD - Thoughtful dark mode */
:root[data-theme="dark"] {
  --background: #0a0a0a;
  --surface: #1a1a1a;
  --text: #e5e5e5;
  --text-muted: #a3a3a3;
  --border: rgba(255,255,255,0.1);
  --accent: #ff6b35; /* Slightly desaturated */
}

/* BAD - Simple inversion */
:root[data-theme="dark"] {
  --background: #333;
  --text: #fff;
}

Motion & Animation

Animation Philosophy

One Orchestrated Moment > Many Scattered Micro-interactions

Focus on:

1. Page Load - Staggered reveals create delight
2. Scroll Triggers - Major section transitions
3. Hover States - Surprising, meaningful responses
4. State Changes - Smooth transitions between UI states

CSS-First Approach

Prefer CSS animations for performance:

/* Staggered fade-in on load */
.hero-content > * {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.2s; }
.hero-content > *:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

High-Impact Hover Effects

/* Lift & Shadow */
.card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Color shift */
.button {
  background: linear-gradient(135deg, var(--color-1), var(--color-2));
  background-size: 200% 200%;
  transition: background-position 0.5s ease;
}

.button:hover {
  background-position: 100% 100%;
}

/* Morphing border */
.link {
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.link:hover::after {
  width: 100%;
}

Scroll-Triggered Animations

/* Elements start invisible */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Add visible class via JavaScript */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

// Intersection Observer for scroll reveals
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

React Motion (Framer Motion)

For React projects, use Framer Motion:

import { motion } from 'framer-motion';

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

// Hover scale
<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  Click Me
</motion.button>

Spatial Composition

Break the grid. Create visual interest through unexpected layouts.

Asymmetric Layouts

/* Two-column asymmetric */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
}

/* Broken grid with overlap */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.feature-1 { grid-column: 1 / 7; grid-row: 1; }
.feature-2 { grid-column: 6 / 13; grid-row: 1; z-index: 2; }
.feature-3 { grid-column: 1 / 8; grid-row: 2; margin-top: -40px; }

Diagonal Flow

/* Diagonal section transition */
.section-diagonal {
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
  margin-top: -10vh;
}

/* Diagonal text layout */
.hero-title {
  transform: rotate(-5deg);
  transform-origin: left center;
}

Generous Negative Space

/* GOOD - Breathing room */
.hero {
  padding: 15vh 10vw;
  min-height: 100vh;
}

.section {
  padding: 120px 60px;
}

/* BAD - Cramped */
.hero {
  padding: 40px 20px;
}

Backgrounds & Visual Details

Create atmosphere, not just flat colors.

Gradient Meshes

.gradient-mesh {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(98, 0, 234, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

Noise Texture

.noise-texture {
  position: relative;
}

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

Geometric Patterns

.geometric-bg {
  background-image:
    linear-gradient(30deg, transparent 40%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.03) 60%, transparent 60%),
    linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.03) 60%, transparent 60%);
  background-size: 80px 140px;
}

Glassmorphism

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-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);
}

Dramatic Shadows

/* Layered shadow for depth */
.card-elevated {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 16px 32px rgba(0, 0, 0, 0.1),
    0 32px 64px rgba(0, 0, 0, 0.1);
}

/* Colored shadow matching element */
.button-primary {
  background: #ff6b35;
  box-shadow: 0 10px 40px rgba(255, 107, 53, 0.4);
}

Production-Grade Implementation

Code Quality Standards

Structure:

• Semantic HTML5 elements
• BEM or utility-class methodology
• CSS custom properties for theming
• Mobile-first responsive design
• Accessibility attributes (ARIA, alt text, labels)

Performance:

• Optimize images (WebP, lazy loading)
• Minimize JavaScript for interactions
• Use CSS transforms for animations
• Implement proper loading states
• Consider reduced motion preferences

Accessibility:

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

/* Sufficient color contrast */
/* Check: https://webaim.org/resources/contrastchecker/ */

Responsive Design Patterns

/* Mobile-first approach */
.container {
  padding: 20px;
}

@media (min-width: 768px) {
  .container {
    padding: 40px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 60px;
  }
}

/* Fluid typography */
.title {
  font-size: clamp(32px, 5vw, 80px);
  line-height: 1.1;
}

Implementation Workflow

When user provides a screenshot or requests design:

Step 1: Analyze (If screenshot provided)

Extract:

• Current aesthetic (generic, minimal, bold?)
• Color palette
• Typography choices
• Layout structure
• Interactive elements
• Problems/weaknesses

Step 2: Propose Direction

Suggest 2-3 bold directions based on context:

"I see three directions for this e-commerce homepage:

1. **Editorial Luxury** - Bold serif typography, asymmetric grid, dramatic product photography, minimal color (black/white/gold)

2. **Neo-Brutalism** - Thick borders, shadow extrusion, bold sans-serif, high contrast, interactive 3D effects

3. **Soft Glassmorphism** - Frosted glass cards, gentle gradients, rounded corners, ambient light effects

Which aesthetic resonates with your brand?"

Step 3: Implement with Precision

Create production-ready code that:

• Fully realizes the chosen aesthetic
• Includes all necessary HTML/CSS/JS
• Works responsively
• Has smooth animations
• Follows accessibility standards
• Can be copied and used immediately

Step 4: Explain Decisions

After code, briefly explain:

• Why this typography pairing
• Color psychology choices
• Animation strategy
• Layout innovations
• How it achieves memorability

Common Scenarios

Landing Page

• Hero: Bold typography + striking visual
• Features: Asymmetric grid with icons
• Testimonials: Editorial card layout
• CTA: High-contrast, animated button

Dashboard

• Sidebar: Clean navigation with icons
• Cards: Data visualization with shadows
• Charts: Custom styled (not default)
• Interactions: Smooth transitions

Portfolio

• Hero: Large typography + personal photo
• Projects: Grid with hover reveals
• About: Two-column asymmetric
• Contact: Simple form with style

E-commerce

• Product Grid: Hover zoom effects
• Product Page: Large images + clean details
• Cart: Glassmorphic overlay
• Checkout: Step progress indicator

Critical Reminders

1. Never converge on the same aesthetic twice
2. Avoid generic fonts (Inter, Roboto, Arial, Space Grotesk)
3. One memorable thing - every design needs a standout feature
4. Match complexity to vision - maximalist = elaborate code, minimalist = precise restraint
5. Bold choices - commit fully to the aesthetic direction
6. Context matters - design for the actual use case, not generic templates
7. Production-ready - code should work, not just look pretty
8. Accessibility - beautiful AND usable by everyone

Example Transformations

Generic → Neo-Brutalist:

• Add thick black borders (3-5px)
• Use shadow extrusion (offset shadows)
• Bold sans-serif headings (Anton, Bebas Neue)
• High contrast color blocks
• Geometric button shapes

Generic → Editorial:

• Large serif display font (Playfair Display)
• Asymmetric two-column grid
• Generous whitespace
• Black/white with one accent color
• Large, impactful images

Generic → Glassmorphism:

• Semi-transparent cards with backdrop-filter
• Soft gradients in background
• Rounded corners (20-30px)
• Subtle shadows
• Light, airy spacing

Remember: Claude is capable of extraordinary creative work. Every design should feel handcrafted for its specific context, with bold choices that make it unforgettable.