Frontend Design System

A skill for production-grade UI design. Supports consistent, scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks.

When to use this skill

• Production-quality UI needed: Generate high-quality UI from prompts

• Consistent design language: Maintain a unified visual language across screens

• Typography/layout/motion guidance: Systematic design system

Instructions

Step 1: Define Design Tokens

// design-tokens.ts export const tokens = { // Colors colors: { primary: { 50: '#EFF6FF', 100: '#DBEAFE', 500: '#3B82F6', 600: '#2563EB', 700: '#1D4ED8', }, secondary: { 500: '#6366F1', 600: '#4F46E5', }, accent: '#F59E0B', success: '#10B981', warning: '#F59E0B', error: '#EF4444', background: { primary: '#FFFFFF', secondary: '#F9FAFB', tertiary: '#F3F4F6', }, text: { primary: '#1F2937', secondary: '#6B7280', tertiary: '#9CA3AF', inverse: '#FFFFFF', }, },

// Typography typography: { fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'], }, fontSize: { xs: '0.75rem', // 12px sm: '0.875rem', // 14px base: '1rem', // 16px lg: '1.125rem', // 18px xl: '1.25rem', // 20px '2xl': '1.5rem', // 24px '3xl': '1.875rem', // 30px '4xl': '2.25rem', // 36px }, fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700, }, lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75, }, },

// Spacing (8px base unit) spacing: { 0: '0', 1: '0.25rem', // 4px 2: '0.5rem', // 8px 3: '0.75rem', // 12px 4: '1rem', // 16px 5: '1.25rem', // 20px 6: '1.5rem', // 24px 8: '2rem', // 32px 10: '2.5rem', // 40px 12: '3rem', // 48px 16: '4rem', // 64px },

// Border Radius borderRadius: { none: '0', sm: '0.25rem', // 4px md: '0.375rem', // 6px lg: '0.5rem', // 8px xl: '0.75rem', // 12px '2xl': '1rem', // 16px full: '9999px', },

// Shadows shadows: { sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', md: '0 4px 6px -1px rgb(0 0 0 / 0.1)', lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)', xl: '0 20px 25px -5px rgb(0 0 0 / 0.1)', },

// Breakpoints breakpoints: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px', }, };

Step 2: Define Layout + UX Goals

page_spec: type: "landing" | "dashboard" | "form" | "blog" | "e-commerce"

hierarchy: primary_action: [Main CTA] secondary_actions: [Secondary actions] information_architecture: - section: hero priority: 1 - section: features priority: 2 - section: social_proof priority: 3 - section: cta priority: 4

responsive: mobile_first: true breakpoints: - mobile: "< 640px" - tablet: "640px - 1024px" - desktop: "> 1024px" stack_behavior: "vertical on mobile, horizontal on desktop"

Step 3: Generate UI Output

Component structure by section:

// Hero Section <section className="hero"> <div className="container"> <div className="hero-content"> <Badge>New Release</Badge> <Heading level={1}> Main Headline Here </Heading> <Paragraph size="lg"> Supporting copy that explains the value proposition in 1-2 sentences. </Paragraph> <div className="cta-group"> <Button variant="primary" size="lg"> Primary CTA </Button> <Button variant="secondary" size="lg"> Secondary CTA </Button> </div> </div> <div className="hero-visual"> <Image src="hero-image.png" alt="Product screenshot" /> </div> </div> </section>

Motion/interaction notes:

/* Motion Guidelines / :root { / Duration */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms;

/* Easing */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); }

/* Hover States */ .button { transition: all var(--duration-fast) var(--ease-in-out); } .button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Page Transitions */ .page-enter { opacity: 0; transform: translateY(10px); } .page-enter-active { opacity: 1; transform: translateY(0); transition: all var(--duration-normal) var(--ease-out); }

Step 4: Validate Accessibility

Accessibility Checklist

Color Contrast (WCAG 2.1 AA)

• Text/background: 4.5:1 minimum (normal text)
• Text/background: 3:1 minimum (large text)
• UI components: 3:1 minimum

Keyboard Navigation

• All interactive elements focusable
• Focus order logical (left→right, top→bottom)
• Focus indicator visible
• Skip links present

Screen Reader

• Semantic HTML used
• Images have alt text
• Form labels associated
• ARIA labels where needed

Text & Readability

• Minimum 16px body text
• Line height ≥ 1.5
• Paragraph width < 80 characters
• No text in images

Step 5: Handoff

Design Handoff Package

Component Breakdown

CSS/Token Summary

• Colors: [link to color palette]
• Typography: [link to type scale]
• Spacing: 8px base unit
• Breakpoints: 640/768/1024/1280px

Files

• Figma: [link]
• Tokens: design-tokens.ts
• Components: /src/components/

Examples

Example 1: SaaS Landing Page

Prompt:

Design a SaaS landing page with modern typography, soft gradients, and subtle motion. Include hero, features, pricing, and CTA.

Expected output:

• Section layout with visual direction

• Typography scale (H1: 48px → Body: 16px)

• Color palette with gradient definitions

• Motion/interaction specifications

• Component list with props

Example 2: Admin Dashboard

Prompt:

Create a clean admin dashboard with data cards, filters, and tables. Focus on clarity and fast scanning.

Expected output:

• Grid layout (12-column)

• Component breakdown (cards, tables, filters)

• Visual hierarchy documentation

• Responsive behavior specification

Example 3: Mobile-First Form

Prompt:

Design a multi-step form optimized for mobile. Include progress indicator, validation states, and success confirmation.

Expected output:

• Step-by-step flow diagram

• Form field specifications

• Error/success state designs

• Touch-friendly sizing (min 44px targets)

Best practices

• Start with content hierarchy: UI follows content priority

• Consistent spacing scale: 8px-based system, no ad-hoc spacing

• Motion with intent: Only animate meaningful transitions

• Test on mobile: Verify layout integrity

• Accessibility first: Consider accessibility at the design stage

Common pitfalls

• Overusing effects and gradients: Keep it simple

• Inconsistent typography scale: Use the defined scale

• Ignoring accessibility: Check color contrast and keyboard navigation

Troubleshooting

Issue: UI feels generic

Cause: No visual direction or tokens defined Solution: Provide style references and a color palette

Issue: Layout breaks on mobile

Cause: No responsive grid rules defined Solution: Define breakpoints and stacking behavior

Issue: Inconsistent components

Cause: Tokens not being used Solution: Reference all values from tokens

Output format

Design System Report

Tokens Applied

• Colors: [primary, secondary, accent]
• Typography: [font-family, scale]
• Spacing: [base unit, scale]
• Shadows: [levels]

Section Layout

Component List

• Button (primary, secondary, ghost)
• Card (elevated, flat)
• Input (default, error)
• Badge
• Icon

Accessibility Audit

• Contrast ratios pass
• Focus indicators visible
• Semantic HTML

Multi-Agent Workflow

Validation & Retrospectives

• Round 1 (Orchestrator): Visual direction, section completeness

• Round 2 (Analyst): Accessibility, hierarchy review

• Round 3 (Executor): Handoff checklist verification

Agent Roles

Agent Role

Claude Token definition, component design

Gemini Accessibility analysis, reference research

Codex CSS/component code generation

Metadata

Version

• Current Version: 1.0.0

• Last Updated: 2026-01-21

• Compatible Platforms: Claude, ChatGPT, Gemini, Codex

Related Skills

• ui-component-patterns

• responsive-design

• web-accessibility

• image-generation

Tags

#frontend #design #ui #ux #typography #animation #design-tokens #accessibility