Run any Skill in Manus with one click

saas-ux-designer-2026

Stars16

Forks3

UpdatedMarch 14, 2026 at 15:36

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

jshearin01

jshearin01/agent-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

File Explorer

7 files

SKILL.md

readonly

More from this repository

same repository

task-as-code

jshearin01/agent-skills

Generate a reusable, platform-agnostic Python SDK for any task domain using the Task as Code (TaC) pattern — the generalized form of Perplexity's Search as Code architecture. Use this skill whenever someone wants to make a complex multi-step task reusable and programmable: building an SDK for a domain (design systems, data analysis, document processing, code review, market research, competitive intelligence), creating a workflow that benefits from parallelism and composable primitives, or packaging agentic task logic so any LLM can orchestrate it via generated code. Trigger on: build me an SDK for X, make X programmatic, create a reusable workflow for X, turn X into code, generate a design system SDK, I want to automate X with an LLM, package this as a reusable skill, or any request to structure a complex domain task as composable Python building blocks.

2026-06-0316

ai-slop-detector

jshearin01/agent-skills

Detect and remediate AI-generated slop in copywriting/text, frontend UI/design, React components, and backend/architecture code. Use this skill whenever reviewing code before shipping, auditing AI-generated content, doing code reviews, evaluating copywriting, or when asked to improve text/UI/code that looks or feels AI-generated. Trigger on phrases like: does this look AI-generated, clean up this copy, this looks like AI slop, review this code for quality, make this less AI, improve this UI, audit for vibe coding anti-patterns, this copy sounds robotic, or any request to review or improve AI-assisted output across text, UI, or code.

2026-05-2416

senior-software-engineer

jshearin01/agent-skills

Embodies the accumulated wisdom of a 20+ year career at high-performing software companies. Use this skill whenever the user asks for engineering guidance, code review feedback, architecture decisions, system design critique, or help avoiding common engineering mistakes. Also trigger when users ask "how should I approach X", "is this a good pattern", "what would a senior engineer do here", "how do I influence without authority", "how should I structure this system", or any question about engineering best practices, technical decision-making, code quality, or working effectively in engineering teams. This skill encodes hard-won lessons that take decades to learn — apply it liberally to elevate the quality of any engineering work. When orchestrating subagents, use Part 6 for delegation patterns and Part 8 for coordination protocols.

2026-05-2416

llm-agent-architect

jshearin01/agent-skills

Expert LLM workflow and agent platform architect skill for designing scalable, production-grade agentic AI systems using API-based LLMs. Use this skill whenever you are designing, building, or reviewing any LLM agent system, workflow platform, or multi-agent architecture. Trigger on requests involving agent system design, multi-agent coordination, orchestrator/worker patterns, RAG pipeline architecture, tool/function calling design, agent memory and state management, LLM observability and evaluation pipelines, context window management, agentic workflow decomposition, or any system where LLMs call other LLMs. Also trigger when asked to build a copilot, assistant, agent, pipeline, or workflow of any kind. This skill encodes 2025-era best practices distilled from Anthropic, OpenAI, Microsoft, AWS, and Google engineering teams.

2026-03-2216

chrome-developer

jshearin01/agent-skills

Expert Chrome developer skill covering advanced browser APIs and capabilities. Use this skill whenever working on Chrome extensions (Manifest V3), WebAssembly (Wasm 3.0), WebGPU (graphics and compute), WebNN (neural network inference), Chrome Built-in AI (Gemini Nano Prompt API, Summarizer, Translator), local ML model inference in the browser, IndexedDB (as SQL/NoSQL/vector/graph database), downloading and running HuggingFace models locally with WebGPU, or any advanced Chrome platform feature. Trigger this skill for requests about: building Chrome extensions, MV3 service workers, offscreen documents, declarativeNetRequest, running LLMs or ML models client-side (Qwen3, Llama, Phi, Gemma, Mistral, SmolLM), GPU compute shaders, WGSL shader language, WebAssembly SIMD/threads/GC, on-device AI without server infrastructure, browser performance optimization with WASM/GPU, WebGPU for machine learning, ONNX Runtime Web, Transformers.js v3, WebLLM, model quantization (q4/q4f16/fp16), IndexedDB as a database (key-value,

2026-03-1416

machine-learning-engineer

jshearin01/agent-skills

Expert ML engineering skill covering the full lifecycle — data ingestion, feature engineering, model training, evaluation, MLOps, and production deployment. Covers classical ML (scikit-learn, XGBoost) AND deep learning (PyTorch, CNNs, transformers, LoRA/QLoRA, LLMs). Trigger on building ML pipelines, training/evaluating models, experiment tracking, model versioning/deployment, drift detection, hyperparameter tuning, PyTorch training loops, fine-tuning BERT or LLMs, building CNNs, LoRA fine-tuning, MLflow setup, DVC, BentoML, FastAPI serving, or any MLOps question. Use for architecture decisions around PyTorch, scikit-learn, XGBoost, Hugging Face Transformers, PEFT, TRL, Kubeflow, or any ML framework.

2026-03-1416

name

saas-ux-designer-2026

description

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:

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.