saas-ux-designer-2026

name

saas-ux-designer-2026

description

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.

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:

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 "<name>" 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 <name>

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 <path> 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.