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

1. 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 |

1. Generate the color palette

Create a semantic palette with 6-8 tokens: ``css :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 */; } ``

1. Select typography pairing

Pick from these proven pairings:

• Inter + JetBrains Mono — Modern SaaS, clean and readable
• Outfit + Space Mono — Tech-forward, slightly geometric
• DM Sans + DM Serif Display — Editorial, warm contrast
• Plus Jakarta Sans + Instrument Serif — Luxury editorial
• Space Grotesk + IBM Plex Mono — Brutalist, monospace accent
• Nunito + Fira Code — Friendly, rounded, developer-oriented

1. Generate the component(s)

Build complete, responsive components:

• Use semantic HTML (section, nav, article, aside, header, footer)
• Include ARIA labels and roles for accessibility
• Support dark mode via prefers-color-scheme or class toggle
• Use CSS Grid/Flexbox for layout (never floats)
• Mobile-first responsive breakpoints: 640px, 768px, 1024px, 1280px
• Include hover, focus, and active states for all interactive elements

1. Add design tokens as CSS variables

Output all tokens at the top of the CSS so they can be easily customized: ``css :root { --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px rgb(0 0 0 / 0.07); --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1); --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --transition-fast: 150ms ease; --transition-normal: 250ms ease; } ``

Rules

• Never use inline styles — always use CSS classes or styled components
• Every color must be a CSS variable so themes can be swapped
• Always include dark mode support
• All interactive elements must have visible focus indicators
• Font sizes must use rem units, not px
• Spacing must use the spacing scale, not arbitrary pixel values
• Generate complete, runnable code — no placeholders like "add your styles here"
• Include a brief design rationale comment at the top explaining the chosen style
• If the user's framework is unspecified, default to React + Tailwind CSS

Example Output Structure

/* Design System: Clean SaaS style
   Palette: Indigo primary, slate neutrals
   Typography: Inter + JetBrains Mono */

:root {
  --color-primary: #4f46e5;
  /* ... full token set ... */
}

/* Component styles follow... */

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: sourav15mukherjee
• Source: sourav15mukherjee/skillforge-free-skills
• License: MIT

Install and usage instructions live in the source repository linked above.