SuperDesign

---

name: frontend-design description: Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface. metadata: {"clawdbot":{"emoji":"🎨"}}

---

Frontend Design Skill

Use this skill when creating UI components, landing pages, dashboards, or any frontend design work.

Design Workflow

Follow this structured approach for UI design:

1. Layout Design — Think through component structure, create ASCII wireframes 2. Theme Design — Define colors, fonts, spacing, shadows 3. Animation Design — Plan micro-interactions and transitions 4. Implementation — Generate the actual code

1. Layout Design

Before coding, sketch the layout in ASCII format:

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

2. Theme Guidelines

Color Rules:

NEVER use generic bootstrap-style blue (#007bff) — it looks dated

Prefer oklch() for modern color definitions

Use semantic color variables (--primary, --secondary, --muted, etc.)

Consider both light and dark mode from the start

Font Selection (Google Fonts):

Sans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk
Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono
Serif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville
Display: Architects Daughter, Oxanium

Spacing & Shadows:

Use consistent spacing scale (0.25rem base)

Shadows should be subtle — avoid heavy drop shadows

Consider using oklch() for shadow colors too

3. Theme Patterns

Modern Dark Mode (Vercel/Linear style):

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.970 0 0);
  --muted: oklch(0.970 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
  --font-sans: Inter, system-ui, sans-serif;
}

Neo-Brutalism (90s web revival):

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --primary: oklch(0.649 0.237 26.97);
  --secondary: oklch(0.968 0.211 109.77);
  --accent: oklch(0.564 0.241 260.82);
  --border: oklch(0 0 0);
  --radius: 0px;
  --shadow: 4px 4px 0px 0px hsl(0 0% 0%);
  --font-sans: DM Sans, sans-serif;
  --font-mono: Space Mono, monospace;
}

Glassmorphism:

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
}

4. Animation Guidelines

Micro-syntax for planning:

button: 150ms [S1→0.95→1] press
hover: 200ms [Y0→-2, shadow↗]
fadeIn: 400ms ease-out [Y+20→0, α0→1]
slideIn: 350ms ease-out [X-100→0, α0→1]
bounce: 600ms [S0.95→1.05→1]

Common patterns:

Entry animations: 300-500ms, ease-out

Hover states: 150-200ms

Button press: 100-150ms

Page transitions: 300-400ms

5. Implementation Rules

Tailwind CSS:

Flowbite (component library):

Icons (Lucide):

Images:

Use real placeholder services: Unsplash, placehold.co

Never make up image URLs

Example: https://images.unsplash.com/photo-xxx?w=800&h=600

6. Responsive Design

Always design mobile-first and responsive:

/* Mobile first */
.container { padding: 1rem; }
/* Tablet */
@media (min-width: 768px) {
  .container { padding: 2rem; }
}
/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

7. Accessibility

Use semantic HTML (header, main, nav, section, article)

Include proper heading hierarchy (h1 → h2 → h3)

Add aria-labels to interactive elements

Ensure sufficient color contrast (4.5:1 minimum)

Support keyboard navigation

8. Component Design Tips

Cards:

Subtle shadows, not heavy drop shadows

Consistent padding (p-4 to p-6)

Hover state: slight lift + shadow increase

Buttons:

Clear visual hierarchy (primary, secondary, ghost)

Adequate touch targets (min 44x44px)

Loading and disabled states

Forms:

Clear labels above inputs

Visible focus states

Inline validation feedback

Adequate spacing between fields

Navigation:

Sticky header for long pages

Clear active state indication

Mobile-friendly hamburger menu

---

Quick Reference

| Element | Recommendation | |---------|---------------| | Primary font | Inter, Outfit, DM Sans | | Code font | JetBrains Mono, Fira Code | | Border radius | 0.5rem - 1rem (modern), 0 (brutalist) | | Shadow | Subtle, 1-2 layers max | | Spacing | 4px base unit (0.25rem) | | Animation | 150-400ms, ease-out | | Colors | oklch() for modern, avoid generic blue |

---

*Based on SuperDesign patterns — https://superdesign.dev*