Skip to main content
This skill teaches design principles and decision-making, not fixed patterns to copy. Every pixel has purpose. Restraint is luxury. User psychology drives decisions.

​
What This Skill Provides

The Frontend Design System skill provides comprehensive design thinking principles for creating web interfaces. It emphasizes thinking over memorizing and asking over assuming.

​
Core Philosophy

THINK, don’t memorize. ASK, don’t assume. This skill teaches agents to:
  • Analyze context and constraints before designing
  • Make decisions based on user psychology and emotion
  • Avoid AI design clichés and template patterns
  • Ask users for preferences when requests are open-ended
  • Create original, memorable designs for each project

​
Knowledge Areas

UX Psychology

Cognitive laws (Hick’s, Fitts’, Miller’s), emotional design levels, trust building

Color System

60-30-10 rule, color psychology, OKLCH color space, emotion-driven palette selection

Typography

Type scale selection, font pairing, readability rules, hierarchy principles

Visual Effects

Shadow hierarchy, gradient usage, glassmorphism (when appropriate), depth creation

Animation

Timing principles, easing selection, performance guidelines, motion psychology

Layout Principles

Golden ratio, 8-point grid, responsive strategies, constraint analysis

​
When This Skill Is Loaded

Agents load this skill when:
  • Designing components, layouts, or interfaces
  • Making decisions about color schemes
  • Selecting typography or font pairings
  • Creating aesthetic user interfaces
  • Applying UX psychology principles
  • Working on any visual design task
The skill uses selective reading - the UX Psychology file is REQUIRED for all tasks, while other files (color, typography, effects) are loaded only when relevant to the specific design decision.

​
Use Cases

​
Before Implementation Design

Agents use this skill to learn design principles for:
  • Color palette selection based on emotion and context
  • Typography hierarchy and font pairing
  • Layout decisions using golden ratio and spacing systems
  • Animation timing and easing curves

​
Constraint Analysis

Before any design work, agents answer:
  • Timeline: How much time available?
  • Content: Ready or placeholder?
  • Brand: Existing guidelines or free to create?
  • Tech: What’s the implementation stack?
  • Audience: Who exactly is using this?

​
Breaking AI Design Clichés

The skill actively prevents common AI design patterns:
Forbidden Default Patterns:
  • Bento Grids - Used in every AI design (only for complex data)
  • Hero Split (Left/Right) - Predictable and boring
  • Mesh/Aurora Gradients - The “new” lazy background
  • Glassmorphism - AI’s idea of “premium”
  • Deep Cyan/Fintech Blue - Safe harbor color
  • Dark + Neon Glow - Overused “AI look”
  • Rounded Everything - Generic and safe
Think Instead: Take risks, use sharp edges, unexpected layouts, radical color pairings.

​
Key Principles

​
UX Psychology Core Laws

Hick's Law

More choices = slower decisions. Limit options, use progressive disclosure.

Fitts' Law

Bigger + closer = easier to click. Size CTAs appropriately.

Miller's Law

~7 items in working memory. Chunk content into groups.

Von Restorff Effect

Different = memorable. Make CTAs visually distinct.

​
Color Decision Process

  1. What’s the industry? - Narrows options
  2. What’s the emotion? - Picks primary color
  3. Light or dark mode? - Sets foundation
  4. ASK USER if not specified
60-30-10 Rule:
  • 60% → Primary/Background (calm, neutral base)
  • 30% → Secondary (supporting areas)
  • 10% → Accent (CTAs, highlights, attention)

​
Typography Scale Selection

Content TypeScale RatioFeel
Dense UI1.125-1.2Compact, efficient
General web1.25Balanced (most common)
Editorial1.333Readable, spacious
Hero/display1.5-1.618Dramatic impact

Next.js React Expert

Performance optimization for implementing designs

Tailwind Patterns

CSS-first implementation of design systems

Web Design Guidelines

Post-implementation accessibility and best practices audit

​
Design Workflow

Complete Design Process:
  1. DESIGN → Read frontend-design principles ← YOU ARE HERE
  2. CODE → Implement the design
  3. AUDIT → Run web-design-guidelines review
  4. FIX → Address findings from audit

​
Which Agents Use This Skill

Frontend Specialist

The Frontend Specialist uses this skill extensively for all UI/UX design work. It’s loaded alongside nextjs-react-expert, tailwind-patterns, and web-design-guidelines to provide comprehensive frontend expertise.
The Frontend Specialist has an enhanced design decision process that includes mandatory “Deep Design Thinking” phases, anti-cliché checks, and the “Maestro Auditor” for quality control.

​
Anti-Patterns to Avoid

​
Lazy Design Indicators

  • Default system fonts without consideration
  • Stock imagery that doesn’t match brand
  • Inconsistent spacing
  • Too many competing colors
  • Walls of text without hierarchy
  • Inaccessible contrast ratios

​
AI Tendency Patterns (AVOID)

  • Same colors every project
  • Dark + neon as default
  • Purple/violet everything (PURPLE BAN active)
  • Bento grids for simple landing pages
  • Mesh Gradients & Glow Effects
  • Same layout structure / Vercel clone
  • Not asking user preferences

​
Dark Patterns (Unethical)

  • Hidden costs or forced actions
  • Fake urgency or scarcity
  • Deceptive UI or confirmshaming

​
Decision Process Summary

For EVERY design task:

1. CONSTRAINTS
   └── What's the timeline, brand, tech, audience?
   └── If unclear → ASK

2. CONTENT
   └── What content exists?
   └── What's the hierarchy?

3. STYLE DIRECTION
   └── What's appropriate for context?
   └── If unclear → ASK (don't default!)

4. EXECUTION
   └── Apply principles above
   └── Check against anti-patterns

5. REVIEW
   └── "Does this serve the user?"
   └── "Is this different from my defaults?"
   └── "Would I be proud of this?"

​
Wow Factor Checklist

​
Premium Indicators

  • Generous whitespace (luxury = breathing room)
  • Subtle depth and dimension
  • Smooth, purposeful animations
  • Attention to detail (alignment, consistency)
  • Cohesive visual rhythm
  • Custom elements (not all defaults)

​
Trust Builders

  • Security cues where appropriate
  • Social proof/testimonials
  • Clear value proposition
  • Professional imagery
  • Consistent design language

​
Emotional Triggers

  • Hero that evokes intended emotion
  • Human elements (faces, stories)
  • Progress/achievement indicators
  • Moments of delight
Remember: Design is THINKING, not copying. Every project deserves fresh consideration based on its unique context and users. Avoid the Modern SaaS Safe Harbor!

Build docs developers (and LLMs) love

Get started for freeTalk to us