frontend-design

Frontend Design Skill

This skill guides the creation of distinctive, production-grade frontend interfaces that avoid the bland "AI slop" aesthetic. Implement truly usable code with high attention to aesthetic detail and creative choices.

When to Use This Skill

Use this skill when the user requests:

• Build web components, pages, or full applications
• Create landing pages, dashboards, or marketing pages
• Design React, Vue, or vanilla HTML/CSS interfaces
• Beautify or redesign an existing web UI
• Create posters, assets, or visual design elements (for the web)
• Any frontend project that requires high design quality and a distinctive aesthetic

Key trigger words: web components, pages, apps, websites, landing pages, dashboards, React components, HTML/CSS, UI design, beautify, frontend

Core principles

Before writing code, you must engage in deep design thinking. Every interface should be distinctive, intentional, and memorable.

Design thinking process

Before implementing any code, answer the following questions:

1. Purpose

• Question: What problem does this interface solve?
• Users: Who uses it? In what context?
• Goals: What tasks do users need to complete?

2. Style Direction

Choose oneclear and boldaesthetic direction. Do not choose a generic description like "modern minimalism"; instead, choose an extreme style:

Style options(but not limited to these):

• Minimalism: Extreme restraint, abundant whitespace, precise typography
• Extreme chaos: Dense layouts, overlapping elements, visual impact
• Retro-futurism: 80s neon colors, grids, synthwave style
• Organic/natural: Flowing shapes, natural tones, soft curves
• Luxurious/refined: Elegant fonts, gold accents, fine details
• Playful/toy-like: Bright colors, rounded corners, fun animations
• Editorial/magazine style: Bold typography, grid systems, predominantly black and white
• Rugged/raw: Monochrome, hard edges, utilitarianism
• Art Deco/geometric: Symmetrical patterns, geometric shapes, high contrast
• Soft/pastel: Gentle colors, gradients, dreamy feel
• Industrial/utilitarian: System fonts, monochrome, function first
• Neumorphism: Soft shadows, embossed effects, subtle depth
• Glassmorphism: Blurred backgrounds, transparency, sense of light

Key: Choose a clear conceptual direction and execute it precisely. Bold maximalism and refined minimalism both work—the key isintention, not intensity.

3. Technical Constraints

• What framework is used? (React, Vue, vanilla HTML/CSS)
• Performance requirements? (Animation complexity, file size)
• Accessibility requirements? (ARIA labels, keyboard navigation, color contrast)
• Browser compatibility?

4. Differentiation

• Memorable point: What makes it unforgettable?
• Uniqueness: Which detail will users remember?
• Surprise: Where will users be pleasantly surprised?

Frontend Aesthetics Guide

1. Typography

Principle: Font choice is the soul of design.

Do:

• ✅ Chooseunique and distinctivefonts
• ✅ Use eye-catching fonts for headings and readable fonts for body text
• ✅ Try unexpected font pairings
• ✅ Use font variations (font-weight, font-style) to create hierarchy
• ✅ Precisely control letter-spacing and line-height

Don't:

• ❌ Use generic fonts: Arial, Helvetica, Inter, Roboto, system fonts
• ❌ Use the same font and size for all text
• ❌ Ignore font loading performance (use font-display: swap)

Recommended font sources:

• Google Fonts (choose niche, distinctive fonts)
• Custom fonts (if the project allows)

Example font combinations:

/* 极简编辑风格 */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

/* 现代科技风格 */
--font-heading: 'Space Mono', monospace;
--font-body: 'DM Sans', sans-serif;

/* 优雅奢华风格 */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;

2. Color & Theme

Principle: Color defines mood and brand.

Do:

• ✅ Use CSS variables to maintain consistency
• ✅ A combination of a primary color + vivid accent colors
• ✅ Consider color psychology (blue = trust, red = urgency, green = success)
• ✅ Use gradients to create depth (but tastefully)
• ✅ Maintain color contrast (WCAG AA standard: at least 4.5:1)

Don't:

• ❌ Cliche color schemes: white background + purple gradient
• ❌ Too many colors (3-5 main colors is enough)
• ❌ Ignore accessibility

Example themes:

:root {
  /* 极简黑白 */
  --color-primary: #000000;
  --color-secondary: #ffffff;
  --color-accent: #ff3366;

  /* 复古未来 */
  --color-primary: #1a1a2e;
  --color-secondary: #16213e;
  --color-accent: #00fff5;
  --color-highlight: #ff006e;

  /* 自然有机 */
  --color-primary: #2d6a4f;
  --color-secondary: #52b788;
  --color-accent: #ffc857;
}

3. Animation & Motion

Principle: Animation should enhance the experience, not distract.

Do:

• ✅ Prefer CSS animations (better performance)
• ✅ Design page load animations (first impression)
• ✅ Use animation-delay to reveal elements one by one
• ✅ Add subtle transitions to hover states
• ✅ Scroll-triggered animations (Intersection Observer)
• ✅ For React, use Framer Motion or React Spring

Don't:

• ❌ Overuse animations (every element is moving)
• ❌ Animation durations that are too long (> 500ms makes people impatient)
• ❌ Ignore prefers-reduced-motion media queries

Example animations:

/* 页面加载 - 元素逐个淡入 */
.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }

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

/* 悬停效果 */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

4. Spatial Composition

Principle: Layout should guide the eye and create visual rhythm.

Do:

• ✅ Try asymmetrical layouts
• ✅ Use overlapping elements to create depth
• ✅ Diagonal flow to guide the eye
• ✅ Elements that break the grid (but with intention)
• ✅ Generous whitespace or carefully controlled density
• ✅ Use Grid and Flexbox to create complex layouts

Don't:

• ❌ Center-align all elements
• ❌ Evenly distributed grids (boring)
• ❌ Ignore responsive design

Example layout techniques:

/* 不对称网格 */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

/* 重叠效果 */
.overlap-container {
  position: relative;
}

.overlap-item {
  position: absolute;
  z-index: 2;
  transform: translate(-20%, -20%);
}

/* 对角线流程 */
.diagonal-section {
  transform: skewY(-3deg);
  padding: 100px 0;
}

.diagonal-section > * {
  transform: skewY(3deg);
}

5. Background & Visual Details

Principle: Backgrounds create atmosphere and depth.

Do:

• ✅ Gradient mesh
• ✅ Noise texture
• ✅ Geometric patterns
• ✅ Layered transparency
• ✅ Dramatic shadows
• ✅ Decorative borders
• ✅ Custom cursor (if it suits the style)
• ✅ Grain overlay effect

Don't:

• ❌ Solid color background (unless minimalist style)
• ❌ Low-quality or irrelevant stock images
• ❌ Overuse of shadows (box-shadow pollution)

Example background effects:

/* 渐变网格背景 */
.gradient-grid {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 50px 50px, 50px 50px, 100% 100%;
}

/* 噪点纹理 */
.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;
}

/* 玻璃态效果 */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Avoid generic AI aesthetics

Absolutely forbidden elements:

• ❌ Overused fonts: Inter, Roboto, Arial, system fonts
• ❌ Clichéd color schemes: white background + purple gradient
• ❌ Predictable layout patterns (centered card grid)
• ❌ Cookie-cutter designs lacking context-specific characteristics

How to avoid:

• ✅ Choosedifferentfonts for each project
• ✅ Vary between light/dark themes
• ✅ Try different layout structures
• ✅ Add unique brand elements and personality

Match complexity to aesthetics

Key principle: Code complexity should match the design vision.

Maximalist design → Complex code

• Extensive animations and transition effects
• Multi-layered overlapping elements
• Complex interaction states
• Detailed visual effects (particles, gradients, textures)

// 示例：复杂的动画卡片
<motion.div
  initial={{ opacity: 0, scale: 0.8, rotateX: -15 }}
  animate={{ opacity: 1, scale: 1, rotateX: 0 }}
  whileHover={{
    scale: 1.05,
    rotateY: 5,
    boxShadow: "0 25px 50px rgba(0,0,0,0.2)"
  }}
  transition={{
    type: "spring",
    stiffness: 300,
    damping: 20
  }}
>
  {/* 复杂内容 */}
</motion.div>

Minimalist design → Precise code

• Restrained animations (only at key moments)
• Precise spacing and typography
• Subtle transition effects
• Focus on detail rather than quantity

/* 示例：精致的极简主义 */
.minimal-card {
  padding: 60px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  transition: border-color 0.3s ease;
}

.minimal-card:hover {
  border-color: rgba(0,0,0,0.2);
}

.minimal-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

Workflow

Step 1: Understand the requirements

• Read the user request and extract key information
• Determine the project type (component, page, full application)
• Identify the tech stack (React, Vue, native HTML/CSS)

Step 2: Design thinking

• Answer the 4 questions in the design thinking process
• Choose a clear aesthetic direction
• Visualize the final result in your mind

Step 3: Technical decisions

• Choose the framework and tools
• Decide on the animation library (Framer Motion, CSS, React Spring)
• Determine the font source

Step 4: Implementation

• Write semantic HTML structure
• Implement CSS styles (using CSS variables)
• Add interactions and animations
• Ensure responsive design

Step 5: Refinement

• Adjust spacing and typography
• Optimize animation timing
• Test different screen sizes
• Ensure accessibility (ARIA, keyboard navigation)

Example scenarios

Scenario 1: Create a landing page

User request: "Help me create a landing page for a SaaS product"

Design thinking:

• Purpose: Showcase product value and attract users to sign up
• Style: Modern tech + editorial style, using the Space Grotesk font, black and white + blue accents
• Layout: Asymmetrical, hero section occupies 70% of the screen, diagonal flow
• Differentiation: Unique font pairing, bold typographic hierarchy

Implementation focus:

• Hero section uses large headline text (4-6rem)
• Scroll-triggered fade-in animations
• Glassmorphic CTA buttons
• Responsive grid to showcase features

Scenario 2: Design dashboard

User request: "Create a data analytics dashboard"

Design thinking:

• Purpose: Clearly present data and support rapid decision-making
• Style: Pragmatic + refined, using IBM Plex Sans, dark theme
• Layout: Grid system, card-based layout, data visualization first
• Differentiation: Subtle animated transitions, hover to reveal detailed information

Implementation focus:

• A dark background reduces eye strain
• Cards use soft shadows and borders
• Charts use vivid accent colors
• Loading states use skeleton screens

Scenario 3: React component library

User request: "Create a set of custom button components"

Design thinking:

• Purpose: A reusable, customizable button system
• Style: Flexible, supporting multiple variants
• Technology: Use styled-components or CSS modules
• Differentiation: Unique hover effects and loading states

Implementation focus:

• Primary button, secondary button, and text button variants
• Size variants (small, medium, large)
• Loading and disabled states
• Smooth transition animations

Code quality standards

Must comply:

• ✅ Semantic HTML (<header>, <nav>, <main>, <article>）
• ✅ BEM naming convention or CSS Modules
• ✅ CSS variables for colors and spacing
• ✅ Mobile-first responsive design
• ✅ Accessibility (ARIA labels, keyboard navigation)
• ✅ Performance optimization (lazy-loading images, font optimization)

Prohibited:

• ❌ Inline styles (unless using dynamic values)
• ❌ Unnecessary !important
• ❌ Hard-coded color values (use CSS variables)
• ❌ Unoptimized images
• ❌ Meaningless class names (.box1, .container2）

Tech stack reference

Recommended tools:

• Fonts: Google Fonts, Font Squirrel
• Colors: Coolors.co, Adobe Color
• Animation: Framer Motion (React), Anime.js, GreenSock
• Icons: Heroicons, Lucide, Phosphor Icons
• CSS frameworks: Tailwind CSS (custom configuration), styled-components

Avoid:

• ❌ Bootstrap, Material-UI (prone to a generic look)
• ❌ Default Tailwind configuration (requires customization)

Checklist

After completing the implementation, verify the following:

• A unique font combination was chosen (not Inter/Roboto/Arial)
• The color scheme has a clear aesthetic direction
• At least 1-2 carefully designed animations
• The layout is not a simple centered grid
• There are unique visual details (background, texture, shadows)
• Responsive design looks good on both mobile and desktop
• Meets accessibility standards (contrast, ARIA)
• Code is clear and maintainable
• Good performance (no janky animations, fast loading)

Final reminder

Creative interpretation is key. Don't ask the user "What color do you want?", but instead make bold design decisions based on context. Every design should be unique. Vary light/dark themes, fonts, and aesthetic styles between different projects.

Strive for excellence, not perfection. A design with strong personality beats a "safe" but mediocre design. Dare to experiment and surprise the user.