Frontend Design Skill

Activation

Use this skill when creating or modifying frontend interfaces, components, pages, or applications.

Overview

Create distinctive, production-grade web interfaces that prioritize authentic design over generic AI aesthetics. Every interface should feel intentionally crafted for its specific context.

Design Process

Step 1: Design Thinking (Before Code)

Before writing any code, analyze:

•Purpose: What is this interface trying to accomplish?
•Audience: Who will use this? What are their expectations?
•Tone: What feeling should this evoke? (professional, playful, luxurious, etc.)
•Constraints: Technical limitations, accessibility needs, performance requirements
•Differentiation: What makes this memorable and unique?

Step 2: Aesthetic Commitment

Choose a bold direction and commit fully:

•Brutalist / Raw / Industrial
•Luxury / Refined / Elegant
•Playful / Toy-like / Whimsical
•Organic / Natural / Earthy
•Technical / Data-driven / Precise
•Retro / Nostalgic / Vintage
•Minimalist / Clean / Spacious

Step 3: Implementation

Execute with precision across all design dimensions.

Design Dimensions

Typography

•Choose fonts that are beautiful, unique, and interesting
•Avoid generic defaults: Arial, Helvetica, Inter, system fonts
•Consider display fonts for headers, readable fonts for body
•Use deliberate scale, weight, and spacing
•Examples: Playfair Display, Space Grotesk, DM Serif, Outfit, Cabinet Grotesk

Color & Theme

•Develop a cohesive palette using CSS variables
•Use dominant colors with sharp accents
•Avoid timid, washed-out distributions
•Consider dark/light mode from the start
•
Health/Wellness palette example:
- •Primary: Forest green (#2D5A3D)
- •Secondary: Warm terracotta (#C67B5C)
- •Background: Off-white cream (#F8F5F0)
- •Text: Deep charcoal (#2C2C2C)
- •Accents: Sage green (#87A878)

Layout & Composition

•Embrace asymmetry where appropriate
•Use overlap and layering for depth
•Create unexpected spatial arrangements
•Don't default to centered, boxed layouts
•Consider negative space as a design element

Motion & Animation

•Create high-impact moments, especially on page load
•Use staggered reveals for lists and grids
•Add scroll-triggered interactions
•Micro-interactions on hover and focus
•Keep animations purposeful, not decorative noise

Visual Details

•Add atmosphere through gradients and textures
•Use patterns that reinforce the aesthetic
•Layer effects for depth
•Consider shadows, borders, and shapes
•Match details to the overall direction

What to Avoid

Typography:

•Generic sans-serifs (Arial, Helvetica, Inter)
•System font stacks without consideration
•Inconsistent type scales

Color:

•Overused purple/blue gradients
•Gray-on-gray schemes
•Random accent colors

Layout:

•Predictable centered boxes
•Generic card grids
•Bootstrap-style patterns

Overall:

•Cookie-cutter design lacking context
•"Safe" choices that blend in
•Features without visual hierarchy

Complexity Matching

•Maximalist vision → Elaborate code, rich interactions
•Minimalist vision → Precise, restrained, every detail intentional

Output Requirements

•Working code (HTML/CSS/JS, React, Vue, etc.)
•Responsive by default
•Accessible (semantic HTML, ARIA where needed)
•Performance-conscious (lazy loading, optimized assets)
•CSS variables for theming