# Saas UX Designer 2026 > Expert Clean SaaS UI/UX Designer for 2026. Use this skill whenever the user asks to design, build, review, critique, or improve any SaaS interface, dashboard, landing page, onboarding flow, component, design system, or any web UI. Triggers on requests like "design a dashboard", "make this UI better", "create a settings page", "build an onboarding flow", "review my design", "make this look more professional", "design a SaaS app", "create UI components", "generate design tokens", "audit my design for issues", or any time the user shares a screenshot or description of a UI they want improved. Also triggers for design system questions, aesthetic direction, typography choices, color palette creation, or component pattern questions. This skill produces distinctive, aesthetically strong, human-centered designs that avoid AI slop patterns — works across all frontend frameworks and libraries. - Skill: `jshearin01/saas-ux-designer-2026` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add jshearin01/saas-ux-designer-2026` - Raw SKILL.md: https://api.skillmd.com/api/skills/jshearin01/saas-ux-designer-2026/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: jshearin01 (https://skillmd.com/u/jshearin01) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/jshearin01/saas-ux-designer-2026 --- # Clean SaaS UI/UX Designer — 2026 ## Bundled Resources Read these files when you need deeper guidance: | File | When to Read | |------|-------------| | `references/aesthetic-systems.md` | Choosing or implementing a visual aesthetic/personality direction | | `references/design-tokens.md` | Building a token system, generating CSS variables, dark mode | | `references/component-patterns.md` | Implementing specific components with all their states | | `scripts/design_audit.py` | Run to scan HTML/CSS/JSX files for AI slop and UX anti-patterns | | `scripts/token_generator.py` | Run to generate a complete CSS token system for any aesthetic | | `scripts/component_scaffold.py` | Run to scaffold a component with all states (button, input, etc.) | **Quick start commands:** ```bash python scripts/token_generator.py --list # see aesthetic presets python scripts/token_generator.py --aesthetic "warm editorial" # generate tokens python scripts/design_audit.py ./src # audit a codebase python scripts/component_scaffold.py --component button # scaffold component ``` --- ## Overview & Modes This skill operates in two modes: **Design Mode** — When asked to build, create, or implement UI: - Produce complete, working implementations — never stubs or placeholders - Use realistic data (no "Lorem ipsum" or "User Name") - Show ALL states: default, hover, focus, error, loading, empty, disabled - Document design decisions inline with comments - Read `references/aesthetic-systems.md` to choose or match an aesthetic **Critique Mode** — When asked to review, audit, or improve existing UI: - Structure feedback: Critical → High → Medium → Low - Pair every problem with a specific, actionable fix - Note genuine strengths — honest praise builds trust - Run `scripts/design_audit.py` on code files for automated pattern detection --- ## Core Design Philosophy Great SaaS UI is **invisible infrastructure** — users accomplish goals without noticing the interface. Three pillars: **1. Clarity First** — Every element earns its place. Whitespace is active, not leftover. Hierarchy is obvious at a glance — users scan before they read. If removing something does not break comprehension or workflow, remove it. **2. Functional Aesthetics** — Beauty in SaaS is not decoration. It is the feeling that the product is trustworthy, competent, and made by people who care. Typography, color, and spacing choices communicate brand personality and build user confidence simultaneously. **Aesthetic IS a functional decision.** **3. Progressive Complexity** — Surface the 20% of features that handle 80% of tasks. Hide power-user depth behind natural discovery. Never expose complexity to users who do not need it yet. --- ## The Anti-AI-Slop Manifesto LLMs default to the statistical average of training data — distributional convergence. In UI, this produces an immediately recognizable aesthetic that communicates cheap and untrustworthy. Fight these defaults on every project. ### The Blacklist **Typography Offenders** — never use without justification: - Inter as sole typeface (ubiquitous, personality-free) - Font weights only in 400-600 range (flat hierarchy, timid) - All-caps labels everywhere **Color Offenders:** - Purple-to-blue gradient as hero/brand color - Pure white (#ffffff) background with no depth - 5+ accent colors distributed equally (no dominant hue) **Layout Offenders:** - 3-column feature grids with icon + title + 2-line description - Symmetrical hero: heading left, illustration right - Navigation: logo left, links center, CTA right — every time - Cards with identical radius, padding, shadow everywhere **UX Pattern Offenders:** - Modals for every secondary action - Hamburger menu on desktop - Toast stacking for every action - Stepper wizard for simple forms ### What to Do Instead Read `references/aesthetic-systems.md` for 8 complete aesthetic systems with specific palettes, font pairings, layout signatures, and motion guidance. Key replacements: - **Typography**: Choose fonts with personality. Use extreme weight contrasts (200 vs 800). 3x+ size ratios between headings and body. - **Color**: Commit to a dominant palette with 1-2 sharp accents. CSS custom properties throughout. Warm off-whites beat pure white. - **Layout**: Break symmetry intentionally. Vary card sizes for visual rhythm. Use borders, not just shadows. - **Motion**: One well-orchestrated entrance sequence beats a dozen micro-animations. Stagger reveals. CSS transitions on all interactive states. - **UX**: Command palettes beat cluttered navbars. Inline editing beats modal forms. Contextual empty states beat generic "no data." --- ## Aesthetic Direction Process When starting any design, establish aesthetic direction first. Ask: 1. What does this product need users to feel in 5 seconds? (Trust, power, warmth, precision, creativity?) 2. Who are the users? (Developers? Executives? Creatives? Analysts?) 3. What is the brand positioning? (Anti-corporate? Premium? Approachable? Clinical?) Then select from the 8 systems in `references/aesthetic-systems.md`: - **Warm Editorial** — approachable expertise, content/creator platforms - **Dark Terminal** — developer tools, CLI products, infrastructure SaaS - **Neo-Brutalist** — confident, anti-corporate, memorable, indie/maker products - **Refined Minimal** — quiet confidence, Japanese-influenced, productivity apps - **Clinical Precision** — fintech, healthcare, compliance, analytics platforms - **Bold Brand-Led** — personality-forward, consumer-adjacent SaaS - **Soft Computational** — AI-native, data-rich, glass morphism done right - **Premium Enterprise** — dark luxe, serious money, C-suite audience Run `scripts/token_generator.py --aesthetic ""` to instantly generate a full CSS token system for the chosen aesthetic. --- ## Visual Foundation Quick Reference ### Typography - Modular scale: 1.25-1.333 ratio - Minimum body size: 15px (14px for dense data tables only) - Line height: 1.5-1.6 body, 1.1-1.2 headings - Letter spacing: -0.01 to -0.03em large headings; +0.03 to +0.08em labels - All financial/metric numbers: `font-variant-numeric: tabular-nums` - Full font pairing strategies: `references/aesthetic-systems.md` - Font scale tokens: `references/design-tokens.md` ### Color - Always use CSS custom properties — never hardcode hex in components - Light mode: off-white base (#fafaf9) → warm grays → near-black (#111) - Dark mode: true near-black (#0c0c0c) → layered dark grays → warm/cool whites - WCAG AA minimum: 4.5:1 for text, 3:1 for UI components - Complete token architecture: `references/design-tokens.md` - Token generation: `scripts/token_generator.py` ### Spacing - 8px base grid. All values multiples of 4px (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80...) - Related elements: 4-8px. Within component: 12-16px. Between components: 24-32px. Sections: 48-80px. ### Motion - Animate only `transform` and `opacity` (GPU compositing, no layout thrashing) - Hover states: 80-120ms. Open/close: 150-250ms. Entrances: 200-350ms - Enter faster than exit. Stagger list items 30-50ms apart - Always add `@media (prefers-reduced-motion: reduce)` override - Full timing and easing tokens: `references/design-tokens.md` --- ## SaaS Component Patterns For full component specs with all states, accessibility, and complete CSS: **read `references/component-patterns.md`** For a working scaffold with all states: **run `scripts/component_scaffold.py --component `** Available scaffolds: button, input, form-field, stat-card, data-table, empty-state, toast, badge, nav-item, modal, skeleton, command-palette **Dashboard KPIs**: value + label + trend delta (color AND icon — never color alone). Right-align numbers. `tabular-nums`. **Data tables**: Right-align numbers, left-align text, center status. Sticky header. Row actions on hover. Bulk action bar replaces header on selection. **Navigation sidebar**: Max 7 top-level items. Active = left-border accent + background fill. Settings/Help/Profile at bottom. Collapse to 64px. **Forms**: Single column 95% of time. Label above input always. Validate on blur. Design all 7 input states. **Empty states**: First-run (create CTA), zero-result (escape hatch), error (retry action). Never an empty chart frame. **Modals**: scale(0.95)+fade entrance. Escape key always. Max 480-560px. Never stack modals. **Toasts**: Auto-dismiss success/info (4-5s). Manual dismiss for errors. Max 3 visible. --- ## Accessibility Non-Negotiables - All interactive elements keyboard-reachable - Never remove focus indicators — customize but never hide - Color is never the sole carrier of meaning (always icon+color or text+color) - `alt` on all images; `aria-label` on icon-only buttons - Focus trapped in modals/drawers, returned to trigger on close - Touch targets: minimum 44x44px - Semantic HTML first: button, nav, main, section — not div everything - ARIA only when HTML semantics are insufficient --- ## Design Critique Framework When auditing, structure output as: **1. First impression** — What does the interface communicate in 5 seconds? **2. Visual assessment** — Typography hierarchy, color coherence, spacing consistency, aesthetic distinctiveness **3. UX assessment** — Navigation discoverability, primary flow efficiency, feedback/states, cognitive load **4. Prioritized issues:** | Priority | Issue | Why It Matters | Fix | |----------|-------|----------------|-----| | Critical | accessibility failure or broken flow | user cannot complete core task | specific fix | | High | hierarchy problem or confusing pattern | significant friction | specific fix | | Medium | inconsistency or suboptimal pattern | reduces polish and trust | specific fix | | Low | minor aesthetic improvement | small quality gain | specific fix | **5. What is working well** — Always include genuine strengths. Automated audit: `python scripts/design_audit.py ` detects AI slop, accessibility failures, and UX anti-patterns. --- ## Common Mistakes **Design**: Placeholder-as-label · Removing focus rings · Color-only status indicators · Tiny touch targets (<44px) · Centered text blocks >2 lines · Hover-triggered dropdowns on desktop **Pattern**: Modals for multi-step flows · Disabled buttons without explanation · Success states with no next action · No fuzzy search on long select lists **Content**: "Something went wrong" errors · Raw ISO timestamps · CTAs describing mechanism not benefit **Calm Design (2026)** — Hide everything non-essential by default. Let users focus. The best SaaS interfaces feel like they are working for the user, not demanding attention from them.