Frontend Design Skill

Guide for creating distinctive, purposeful UI designs that avoid cookie-cutter patterns.

When to Use

• •Designing new UI components or screens
• •Evaluating existing designs for uniqueness
• •Reviewing designs that feel "generic"
• •Creating brand-aligned interfaces
• •Building memorable user experiences

Core Principles

1. Purpose Over Pattern

Every design decision should answer: "Why this, not something else?"

• •Bad: Using a card grid because it's common
• •Good: Using a card grid because content is comparable and scannable

2. Distinctive Identity

Your UI should be recognizable without the logo.

Questions to ask:

• •Would users recognize this as our product?
• •What makes this different from competitors?
• •Does this reflect our brand personality?

3. Intentional Defaults

Don't accept framework defaults blindly.

[CUSTOMIZE] Review these common defaults in your stack:
- Border radius values
- Shadow depths
- Spacing scales
- Color applications
- Typography scales

Design Review Checklist

Visual Distinction

• • Color palette goes beyond primary/secondary/neutral
• • Typography creates clear hierarchy (not just size changes)
• • Spacing creates intentional rhythm (not uniform gaps)
• • Icons have consistent style/weight/meaning
• • Micro-interactions add personality

Purposeful Patterns

• • Each component solves a specific user problem
• • Layout serves content structure (not vice versa)
• • Navigation reflects user mental models
• • Empty states guide users (not just "No data")
• • Loading states reduce perceived wait time

Avoiding Generic Traps

• • Not using component library defaults unchanged
• • Headers aren't just logo-left, nav-right
• • Forms have personality beyond labels + inputs
• • Buttons vary by importance (not just color)
• • Data displays fit the data (not just tables)

Breaking Generic Patterns

Instead of Generic Cards

Consider:

• •Asymmetric layouts for visual interest
• •Inline expansion vs. navigation
• •Progressive disclosure of details
• •Content-specific shapes (not all rectangles)

Instead of Generic Forms

Consider:

• •Conversational flows for complex inputs
• •Smart defaults that reduce input
• •Inline validation with helpful context
• •Progress indication for multi-step

Instead of Generic Tables

Consider:

• •Is a table the right pattern at all?
• •Grouped/nested rows for hierarchy
• •Inline actions vs. row selection
• •Responsive transformations (not just scroll)

Instead of Generic Dashboards

Consider:

• •User goals, not data availability
• •Actionable metrics, not vanity metrics
• •Contextual insights, not just numbers
• •Personalization based on role/usage

Design Language Documentation

[CUSTOMIZE] Document your design language:

## Our Design Personality
- [Define 3-5 adjectives: e.g., "Professional but approachable"]

## Signature Elements
- [Unique visual elements that define your brand]

## Intentional Constraints
- [Self-imposed rules that create consistency]

## Anti-Patterns
- [Specific patterns to avoid in your context]

Review Questions

Before shipping any design:

1. •Is this recognizable? Would users know it's from us?
2. •Is this purposeful? Can we justify every choice?
3. •Is this necessary? Does it solve a real problem?
4. •Is this accessible? Can all users interact with it?
5. •Is this maintainable? Can we scale this pattern?

Resources

[CUSTOMIZE] Add your project's design resources:

• •Design system documentation
• •Brand guidelines
• •Component library
• •Design tokens
• •Approved patterns and templates