frontend-design-system

Frontend Design System

Generate cohesive, production-grade frontend code with matched design tokens, accessible components, and responsive layouts.

Workflow

1. Understand the request Read the user's UI description. Identify:

   • Page type: landing page, dashboard, form, card grid, documentation, blog, SaaS app
   • Visual mood: professional, playful, bold, calm, luxury, technical
   • Framework: React (default), Vue, Svelte, or vanilla HTML/CSS
   • CSS approach: Tailwind (default), CSS Modules, or plain CSS

2. Select a visual style mode Based on the mood, pick one:

   Mode	Character
   Minimalist	White space, thin lines, muted palette
   Brutalist	Raw, bold borders, monospace, high contrast
   Glassmorphism	Blur backgrounds, transparency, gradients
   Neumorphic	Soft shadows, light/dark depth, rounded
   Dark Corporate	Deep navy/charcoal, accent highlights
   Soft Gradient	Pastel gradients, rounded corners, airy
   Neobrutalist	Thick borders, offset shadows, bright colors
   Clean SaaS	Light bg, blue/indigo accents, tight spacing
   Editorial	Serif headings, generous whitespace, type-driven
   Cyberpunk	Neon accents, dark bg, glitch effects
   Nature/Organic	Earth tones, soft edges, natural textures
   Playful	Bright colors, bouncy shapes, fun typography

3. Generate the color palette Create a semantic palette with 6-8 tokens:

   :root {
     --color-primary: /* main brand color */;
     --color-primary-hover: /* darker variant */;
     --color-secondary: /* complementary accent */;
     --color-background: /* page background */;
     --color-surface: /* card/panel background */;
     --color-text: /* primary text */;
     --color-text-muted: /* secondary text */;
     --color-border: /* dividers, outlines */;
     --color-success: /* #22c55e or variant */;
     --color-warning: /* #f59e0b or variant */;
     --color-error: /* #ef4444 or variant */;
   }