| 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
python scripts/token_generator.py --aesthetic "warm editorial"
python scripts/design_audit.py ./src
python scripts/component_scaffold.py --component button
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:
- What does this product need users to feel in 5 seconds? (Trust, power, warmth, precision, creativity?)
- Who are the users? (Developers? Executives? Creatives? Analysts?)
- 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.
