Frontend Design Skill

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

When to Use This Skill

Activate this skill when the user:

• Asks to build web components, pages, or applications
• Requests landing pages, dashboards, or React components
• Wants HTML/CSS layouts or to beautify web UI
• Provides frontend requirements with design direction
• Seeks production-grade interfaces with exceptional visual quality

Design Thinking Process

Before coding, understand the context and commit to a BOLD aesthetic direction:

1. Understand Purpose

• What problem does this interface solve?
• Who uses it?
• What's the user journey?

2. Pick an Extreme Aesthetic Direction

Choose one and commit to it:

• Brutally Minimal: Whitespace, single color, maximum clarity
• Maximalist Chaos: Layered complexity, visual abundance, organized chaos
• Retro-Futuristic: 80s/90s tech aesthetics, neon, geometric
• Organic/Natural: Flowing forms, natural materials, earthy tones
• Luxury/Refined: Elegant, sophisticated, high-end materials
• Playful/Toy-like: Friendly, rounded, colorful, approachable
• Editorial/Magazine: Typography-focused, hierarchical, narrative-driven
• Brutalist/Raw: Exposed structure, raw materials, no-frills
• Art Deco/Geometric: Symmetrical patterns, bold lines, geometric forms
• Soft/Pastel: Gentle colors, smooth transitions, calming
• Industrial/Utilitarian: Function-first, mechanical, stripped-down

3. Technical Constraints

• Framework requirement (HTML/CSS, React, Vue, etc.)
• Performance considerations
• Accessibility needs
• Browser support

4. Define Differentiation

What makes this UNFORGETTABLE?

• What's the one thing someone will remember?
• What's the unexpected creative choice?

Implementation Requirements

Typography

• Choose boldly: Distinctive, beautiful fonts (NOT Arial, Inter, Roboto, system fonts)
• Display Font: Unique, characterful, memorable
• Body Font: Refined, readable, complementary to display
• Font Pairing: Unexpected but harmonious combinations

Examples of distinctive choices: Playfair Display, Bebas Neue, IBM Plex, Abril Fatface, Montserrat, Space Mono, Courier Prime (for tech), Quicksand (for playful), Crimson Text (for editorial)

Color & Theme

• Commit to aesthetic: Cohesive color system matching the direction
• Use CSS variables: --primary, --accent, --text, --bg
• Dominant + Accent: Strong primary colors with sharp accents outperform timid palettes
• Avoid: Generic purple gradients on white, overused combinations

Motion & Animation

• CSS-first for HTML: Prioritize CSS animations and transitions
• Motion library for React: Use libraries like Framer Motion when beneficial
• High-impact moments: Page load with staggered reveals (animation-delay)
• Micro-interactions: Hover states, scroll-triggers, transitions that surprise
• Don't overdo: 2-3 well-orchestrated moments beat scattered effects

Spatial Composition

• Unexpected layouts: Break grid patterns intentionally
• Asymmetry: Deliberate imbalance creates visual interest
• Overlap & Layering: Elements interact with each other
• Diagonal Flow: Break from rigid vertical/horizontal alignment
• Negative Space: Generous whitespace OR controlled density (not middle ground)

Visual Details & Atmosphere

• Backgrounds: Gradients, patterns, textures (not solid colors)
• Depth: Shadows, layering, perspective
• Decorative Effects: Geometric patterns, noise textures, grain overlays
• Custom Elements: Custom cursors, decorative borders, SVG details
• Context-specific: Effects match the overall aesthetic, not generic

What to AVOID

NEVER use generic AI aesthetics:

• Generic font families: Inter, Roboto, Arial, system fonts
• Clichéd color schemes: Purple gradients, overused combinations
• Predictable layouts: Standard cards, centered content, cookie-cutter patterns
• Overused components: Modal windows, dropdown menus without personality
• Lack of context: Design that could work for any project

CRITICAL: Every design should be unique and specific to its context.

Implementation Steps

1. Analyze requirements: Read the user's request carefully for constraints and preferences
2. Choose direction: Commit to ONE clear aesthetic vision
3. Define typography: Select distinctive display + body font pair
4. Set color system: Define CSS variables for cohesive color scheme
5. Plan layout: Sketch or describe the unexpected spatial composition
6. Code structure: Build semantic HTML/component structure
7. Style systematically: Apply colors, typography, spacing with intention
8. Add motion: Implement animations and micro-interactions
9. Visual refinement: Add textures, shadows, decorative details
10. Test and iterate: Visual testing in browser, refine until memorable

Code Quality Standards

• Production-grade: Functional, tested, production-ready code
• Semantic: Clean HTML structure, accessible markup
• Organized: Well-commented, maintainable code structure
• Responsive: Mobile-first approach when applicable
• Performance: Optimize images, animations, load times
• Browser compatible: Test across target browsers

Complexity Matching

• Maximalist designs need elaborate code: extensive animations, effects, layered visuals
• Minimal designs still need detail: precision spacing, typography refinement, subtle interactions
• Match ambition to implementation: The code complexity should serve the design vision

Visual Testing

Always test the implementation:

• Screenshot the result to verify design execution
• Check animations and transitions in browser
• Verify responsive behavior on different screen sizes
• Ensure accessibility (color contrast, keyboard navigation)
• Validate browser compatibility if needed

Examples of Distinctive Choices

Instead of:

• Generic "modern" grey + blue → Bold jewel tones or monochromatic + neon accent
• Centered layout → Asymmetrical, diagonal, or overlapping grid
• Fade animations → Staggered bounces, scale reveals, or morphing shapes
• Helvetica/Arial → Playfair Display + Space Mono, or Bebas + Crimson Text
• Flat design → Layered depth, dramatic shadows, geometric patterns

Remember

Great frontend design is:

• ✓ Intentional in every choice
• ✓ Specific to its context
• ✓ Bold and memorable
• ✓ Functionally excellent
• ✓ Visually distinctive
• ✓ Technically sound

Never settle for generic. Every project is an opportunity to create something unforgettable.