Frontend Design Skill

This skill guides the creation of unique, production-grade frontend interfaces, avoiding mediocre "AI-generated rough" aesthetics. It delivers truly functional code with a strong focus on aesthetic details and creative choices.

When to Use This Skill

Use this skill when the user requests:

Building web components, pages, or full applications
Creating landing pages, dashboards, or marketing pages
Designing React, Vue, or native HTML/CSS interfaces
Beautifying or redesigning existing web UIs
Creating posters, materials, or visual design elements (for web use)
Any frontend project requiring high design quality and unique aesthetics

Key trigger words: Web components, pages, applications, websites, landing pages, dashboards, React components, HTML/CSS, UI design, beautification, frontend

Core Principles

Before writing any code, thorough design thinking is essential. Every interface should be unique, purposeful, and memorable.

Design Thinking Process

Before implementing any code, answer the following questions:

1. Purpose

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

2. Style Direction

Choose a clear and bold aesthetic direction. Avoid generic descriptions like "modern minimalist"; instead, opt for extreme styles:

Style Options (but not limited to these):

Minimalism: Extreme restraint, ample white space, precise typography
Maximalist Chaos: Dense layouts, overlapping elements, visual impact
Retro-futurism: 80s neon colors, grids, synthwave style
Organic/Natural: Flowing shapes, natural tones, soft curves
Luxurious/Exquisite: Elegant fonts, gold accents, fine details
Playful/Toy-like: Bright colors, rounded corners, fun animations
Editorial/Magazine Style: Bold typography, grid systems, black and white focused
Rugged/Primitive: Monochrome, hard edges, pragmatism
Art Deco/Geometric: Symmetric patterns, geometric shapes, high contrast
Soft/Pastel: Gentle colors, gradients, dreamy feel
Industrial/Pragmatic: System fonts, monochrome, function-first
Neumorphism: Soft shadows, embossed effects, subtle depth
Glass Morphism: Blurred backgrounds, transparency, light feel

Key: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism work—the key is intent, not intensity.

3. Constraints

Which framework to use? (React, Vue, native 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 impressed?

Frontend Aesthetics Guide

1. Typography

Principle: Font selection is the soul of design.

Do:

✅ Choose unique and distinctive fonts
✅ Use eye-catching fonts for headings, 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, unique fonts)
Custom fonts (if the project allows)

Example Font Combinations:

css

/* Minimalist editorial style */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

/* Modern tech style */
--font-heading: 'Space Mono', monospace;
--font-body: 'DM Sans', sans-serif;

/* Elegant luxurious style */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;

2. Color & Theme

Principle: Colors define mood and brand.

Do:

✅ Use CSS variables for consistency
✅ Combine primary color + striking accent color
✅ 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:

❌ Clichéd color schemes: white background + purple gradient
❌ Too many colors (3-5 primary colors are sufficient)
❌ Ignore accessibility

Example Themes:

css

:root {
  /* Minimalist black and white */
  --color-primary: #000000;
  --color-secondary: #ffffff;
  --color-accent: #ff3366;

  /* Retro-futurism */
  --color-primary: #1a1a2e;
  --color-secondary: #16213e;
  --color-accent: #00fff5;
  --color-highlight: #ff006e;

  /* Natural organic */
  --color-primary: #2d6a4f;
  --color-secondary: #52b788;
  --color-accent: #ffc857;
}

3. Animation & Motion

Principle: Animations should enhance the experience, not distract from it.

Do:

✅ Prioritize CSS animations (better performance)
✅ Design page load animations (first impression)
✅ Use
```
animation-delay
```
to achieve sequential element display
✅ Add subtle transitions for hover states
✅ Scroll-triggered animations (Intersection Observer)
✅ For React, use Framer Motion or React Spring

Don't:

❌ Overuse animations (every element moving)
❌ Animation duration too long (> 500ms will make people impatient)
❌ Ignore
```
prefers-reduced-motion
```
media query

Example Animations:

css

/* Page load - elements fade in one by one */
.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);
  }
}

/* Hover effect */
.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 asymmetric layouts
✅ Use overlapping elements to create depth
✅ Diagonal flow to guide the eye
✅ Break grid elements (but purposefully)
✅ Generous white space or carefully controlled density
✅ Use Grid and Flexbox to create complex layouts

Don't:

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

Example Layout Techniques:

css

/* Asymmetric grid */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

/* Overlap effect */
.overlap-container {
  position: relative;
}

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

/* Diagonal flow */
.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 grids
✅ Noise textures
✅ Geometric patterns
✅ Layered transparency
✅ Dramatic shadows
✅ Decorative borders
✅ Custom cursors (if suitable for the style)
✅ Grain overlay effects

Don't:

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

Example Background Effects:

css

/* Gradient grid background */
.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 */
.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 morphism effect */
.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 grids)
❌ One-size-fits-all designs lacking context-specific features

How to Avoid:

✅ Choose different fonts for each project
✅ Alternate between light/dark themes
✅ Try different layout structures
✅ Add unique brand elements and personality

Match Implementation Complexity to Aesthetics

Key Principle: Code complexity should match the design vision.

Maximalist Design → Complex Code

Numerous animations and transitions
Multiple layered elements
Complex interaction states
Detailed visual effects (particles, gradients, textures)

jsx

// Example: Complex animated card
<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
  }}
>
  {/* Complex content */}
</motion.div>

Minimalist Design → Precise Code

Restrained animations (only at critical moments)
Precise spacing and typography
Subtle transition effects
Focus on details rather than quantity

css

/* Example: Exquisite minimalism */
.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 Requirements

Read the user's 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 frameworks and tools
Decide on animation libraries (Framer Motion, CSS, React Spring)
Determine font sources

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 timings
Test on 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 user sign-ups
Style: Modern tech + editorial style, using Space Grotesk font, black and white + blue accents
Layout: Asymmetric, hero section occupies 70% of the screen, diagonal flow
Differentiation: Unique font pairing, bold typography hierarchy

Implementation Focus:

Hero section uses large-size headings (4-6rem)
Scroll-triggered fade-in animations
Glass morphism CTA buttons
Responsive grid for feature display

Scenario 2: Design a Dashboard

User Request: "Create a data analysis dashboard"

Design Thinking:

Purpose: Clearly display data and support quick decision-making
Style: Pragmatic + exquisite, using IBM Plex Sans, dark theme
Layout: Grid system, card-based layout, data visualization priority
Differentiation: Subtle animation transitions, hover to show detailed information

Implementation Focus:

Dark background to reduce eye strain
Cards use soft shadows and borders
Charts use striking accent colors
Skeleton screens for loading states

Scenario 3: React Component Library

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

Design Thinking:

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

Implementation Focus:

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

Code Quality Standards

Must Follow:

✅ 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 (image lazy loading, font optimization)

Forbidden:

❌ Inline styles (except for dynamic values)
❌ Unnecessary
```
!important
```
❌ Hard-coded color values (use CSS variables)
❌ Unoptimized images
❌ Meaningless class names (
```
.box1
```
,
```
.container2
```
)

Tech Stack References

Recommended Tools:

Fonts: Google Fonts, Font Squirrel
Colors: Coolors.co, Adobe Color
Animations: 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 generic appearance)
❌ Default Tailwind CSS configuration (needs customization)

Checklist

After completing the implementation, verify the following:

Chose a unique font combination (not Inter/Roboto/Arial)
Color scheme has a clear aesthetic direction
At least 1-2 carefully designed animations
Layout is not a simple centered grid
Has unique visual details (backgrounds, textures, shadows)
Responsive design looks good on mobile and desktop
Accessibility standards are met (contrast, ARIA)
Code is clear and maintainable
Performance is good (no janky animations, fast loading)

Final Reminder

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

Strive for excellence, not perfection. A design with strong personality is better than a "safe" but mediocre one. Dare to experiment and surprise users.

frontend-design

NPX Install

Tags

SKILL.md Content (Chinese)

Frontend Design Skill

When to Use This Skill

Core Principles

Design Thinking Process

1. Purpose

2. Style Direction

3. Constraints

4. Differentiation

Frontend Aesthetics Guide

1. Typography

2. Color & Theme

3. Animation & Motion

4. Spatial Composition

5. Background & Visual Details

Avoid Generic AI Aesthetics

Match Implementation Complexity to Aesthetics

Maximalist Design → Complex Code

Minimalist Design → Precise Code

Workflow

Step 1: Understand Requirements

Step 2: Design Thinking

Step 3: Technical Decisions

Step 4: Implementation

Step 5: Refinement

Example Scenarios

Scenario 1: Create a Landing Page

Scenario 2: Design a Dashboard

Scenario 3: React Component Library

Code Quality Standards

Tech Stack References

Recommended Tools:

Avoid:

Checklist

Final Reminder