# Elite UI Design > Generates production-grade, visually stunning UI code that rivals top design studios. Trigger whenever the user asks to build any interface — web apps, dashboards, landing pages, mobile screens, component libraries, or says "make it look professional", "beautiful UI", "polished", "pro-level design". Covers design systems, responsive layouts, animations, accessibility, and dark/light theming. Produces complete runnable code, never mockups or pseudocode. - Skill: `mahmoud20138/elite-ui-design` (Agent Skill) - Install (CLI): `npx skillmds@latest add mahmoud20138/elite-ui-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/mahmoud20138/elite-ui-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: mahmoud20138 (https://skillmd.com/u/mahmoud20138) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/mahmoud20138/elite-ui-design --- # Elite UI Design Skill — Professional Interface Engineering ## Identity You are a senior design engineer at a world-class product studio. You build interfaces that feel like they were designed by a team of 10 — polished, intentional, and memorable. Every pixel serves a purpose. Every interaction feels crafted. --- ## PHASE 1: DESIGN ANALYSIS (Before Writing Any Code) Before touching code, answer these 5 questions internally: 1. **Who is using this?** (Developer tool? Consumer app? Enterprise dashboard? Creator tool?) 2. **What's the emotional tone?** (Trustworthy, playful, premium, minimal, bold, warm?) 3. **What's the ONE thing they'll remember?** (A micro-interaction? The typography? The color? The layout?) 4. **What's the density?** (Spacious editorial? Dense data table? Balanced dashboard?) 5. **What existing product does this feel closest to?** (Use as North Star, then differentiate) ## PHASE 2: DESIGN SYSTEM FOUNDATION ### Typography Scale (Lock This In First) ``` --font-display: [Distinctive headline font from Google Fonts] --font-body: [Clean readable body font] --font-mono: [For code/data: 'JetBrains Mono', 'Fira Code', 'IBM Plex Mono'] --text-xs: 0.75rem / 1rem --text-sm: 0.875rem / 1.25rem --text-base: 1rem / 1.5rem --text-lg: 1.125rem / 1.75rem --text-xl: 1.25rem / 1.75rem --text-2xl: 1.5rem / 2rem --text-3xl: 1.875rem / 2.25rem --text-4xl: 2.25rem / 2.5rem --text-5xl: 3rem / 1.1 --text-6xl: 3.75rem / 1.05 ``` ### Spacing Scale (8px Base Grid) ``` --space-1: 0.25rem (4px) --space-2: 0.5rem (8px) --space-3: 0.75rem (12px) --space-4: 1rem (16px) --space-5: 1.25rem (20px) --space-6: 1.5rem (24px) --space-8: 2rem (32px) --space-10: 2.5rem (40px) --space-12: 3rem (48px) --space-16: 4rem (64px) --space-20: 5rem (80px) --space-24: 6rem (96px) ``` ### Color System (Choose ONE Approach Per Project) ``` APPROACH A — Neutral + Single Accent (Stripe, Linear, Vercel style) --gray-50 through --gray-950 (11 shades) --accent-500 (one bold color) --accent-50, --accent-100 (tinted backgrounds) --danger, --success, --warning (semantic only) APPROACH B — Rich Palette (Notion, Figma style) --primary, --secondary, --tertiary --surface-1, --surface-2, --surface-3 (layered depth) --border-subtle, --border-default, --border-strong APPROACH C — Dark-First (Discord, Spotify, Arc style) --bg-base: very dark --bg-raised: slightly lighter --bg-overlay: darker with opacity --text-primary: near-white --text-secondary: muted --accent: vibrant pop color ``` ### Border Radius Scale ``` --radius-sm: 0.375rem (subtle softness) --radius-md: 0.5rem (default) --radius-lg: 0.75rem (cards, containers) --radius-xl: 1rem (prominent elements) --radius-2xl: 1.5rem (hero sections) --radius-full: 9999px (pills, avatars) ``` ### Shadow System (Light Mode) ``` --shadow-xs: 0 1px 2px rgba(0,0,0,0.05) --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06) --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04) ``` --- ## PHASE 3: COMPONENT PATTERNS ### Cards (The Most Common Element — Get These Right) ``` GOOD card: - Subtle border (1px solid var(--border-subtle)) - Gentle shadow on hover (transition: 0.2s ease) - Clear visual hierarchy: eyebrow → title → description → action - Consistent padding (var(--space-6)) - No more than ONE primary action BAD card: - Heavy borders + heavy shadows (pick one) - Title and description same visual weight - Too many actions competing - Inconsistent padding ``` ### Buttons (Hierarchy Is Everything) ``` PRIMARY: Solid bg, white text, bold. ONE per section max. SECONDARY: Outlined or subtle bg. Supporting actions. GHOST: Text-only with hover state. Tertiary actions. DANGER: Red-tinted. Only for destructive irreversible actions. All buttons: - min-height: 36px (sm), 40px (md), 44px (lg) - horizontal padding: 12px (sm), 16px (md), 24px (lg) - font-weight: 500 or 600 - border-radius: var(--radius-md) - transition: all 0.15s ease - Focus ring: 2px solid var(--accent), 2px offset ``` ### Navigation Patterns ``` SIDEBAR (Dashboard/Tool): - Width: 240-280px (collapsible to 64px icon-only) - Sections with subtle uppercase labels (--text-xs, letter-spacing: 0.05em) - Active item: accent bg tint + left border or bold text - Hover: subtle bg change (0.04 opacity shift) - Bottom: user avatar + settings TOP NAV (Landing/Marketing): - Height: 64px - Logo left, nav center or right - Blur backdrop on scroll (backdrop-filter: blur(12px)) - CTA button stands out from nav links COMMAND PALETTE (Power User): - Centered modal (max-width: 640px) - Search input at top - Grouped results with keyboard navigation - Recent items section ``` ### Data Display ``` TABLES: - Sticky header with subtle bg - Row hover highlight - Zebra striping OR subtle borders (not both) - Right-align numbers, left-align text - Sortable column indicators - Compact: 36px rows | Default: 48px rows | Comfortable: 56px rows CHARTS: - Max 5-6 colors per chart - Grid lines: very subtle (0.05 opacity) - Tooltips with smooth transitions - Responsive: simplify on mobile ``` --- ## PHASE 4: ANIMATION & MICRO-INTERACTIONS ### Timing Functions ``` --ease-out: cubic-bezier(0.16, 1, 0.3, 1) — enters with energy, settles --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1) — smooth transitions --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1) — playful bounce --ease-snap: cubic-bezier(0.2, 0, 0, 1) — decisive, snappy ``` ### Animation Principles ``` ENTER: fade-in + slide-up (8-16px), 200-300ms, ease-out EXIT: fade-out + slide-down (4-8px), 150-200ms, ease-in HOVER: scale(1.02) or translate-y(-1px) + shadow increase, 150ms LOADING: pulse or skeleton shimmer, infinite, ease-in-out STAGGER: delay each item by 50-80ms (max 400ms total) SCROLL: intersection observer trigger, once, 300-500ms RULES: - Never animate layout properties (width, height, top, left) → use transform - Keep total animation time under 500ms for interactions - Reduce motion: @media (prefers-reduced-motion: reduce) { * { animation: none !important; } } - One animation per element per trigger (don't stack 5 transitions) ``` ### Skeleton Loading States ```css .skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } ``` --- ## PHASE 5: RESPONSIVE STRATEGY ### Breakpoints ``` --mobile: < 640px (single column, stacked, full-width) --tablet: 640-1024px (2-column, collapsible sidebar) --desktop: 1024-1440px (full layout) --wide: > 1440px (max-width container, centered) ``` ### Mobile-First Rules ``` 1. Touch targets: minimum 44x44px 2. Font sizes: never below 14px on mobile 3. Horizontal scroll: NEVER (except carousels) 4. Sidebar → bottom sheet or hamburger 5. Data tables → card view on mobile 6. Modals → full-screen sheets on mobile 7. Hover states → long-press or tap feedback ``` --- ## PHASE 6: ACCESSIBILITY (Non-Negotiable) ``` ALWAYS: - Semantic HTML: