Design Patterns Reference

This skill provides a curated library of proven design patterns that generate high-quality, non-vibe-coded UI.

Layout Patterns

Hero Sections

Pattern 1: Split Hero Best for: SaaS, product landing pages

┌─────────────────────────────────────────────┐
│  [Content]              [Media]             │
│  Headline               Image/Video/        │
│  Subhead                Illustration        │
│  CTA Buttons                                │
└─────────────────────────────────────────────┘