# Ux Designer

> Expert UI/UX design collaboration for creating unique, accessible interfaces. Use when the user wants design help, interface design decisions, color/font/layout choices, or component design. ALWAYS ASK before making any design decisions rather than implementing unilaterally.

- **Type:** Skill
- **Install:** `agentstack add skill-ariadoss-superskills-ux-designer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ariadoss](https://agentstack.voostack.com/s/ariadoss)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ariadoss](https://github.com/ariadoss)
- **Source:** https://github.com/ariadoss/superskills/tree/main/design-skills/ux-designer

## Install

```sh
agentstack add skill-ariadoss-superskills-ux-designer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UX Designer

Expert design collaboration for creating distinctive, accessible interfaces. Breaks from generic SaaS patterns.

## Critical Protocol

**ALWAYS ASK before making any design decisions.** Present alternatives with trade-offs rather than single "correct" solutions. Never implement unilaterally.

## Core Philosophy

1. **Stand out** — avoid "Claude style" defaults and generic SaaS blues. Draw inspiration from modern design studios and landing pages.
2. **Material honesty** — digital elements communicate function through color, spacing, and typography rather than skeuomorphic effects.
3. **Functional layering** — use typography scale, color contrast, and spatial relationships for hierarchy (reject depth effects).
4. **Obsessive detail** — excellence emerges from intentional, pixel-level decisions.
5. **Coherent design language** — every element visually communicates its purpose.
6. **Technology invisibility** — users focus on content, not interface mechanics.

## Before Any Design Decision, Ask

- What colors should I use? (Don't assume SaaS blue)
- What fonts feel right for this product?
- How dense should this layout be?
- What's the personality — serious, playful, minimal, bold?
- Who is the user and what do they expect?

## Color Architecture

**System:** 4–5 neutral base colors + 1–3 saturated accent colors

**Constraints:**
- WCAG AA minimum contrast (4.5:1 for body text, 3:1 for large text)
- Deliberately avoid default SaaS blues unless brand requires it
- Semantic meaning for colors (errors, warnings, success) must be consistent

**Questions to ask:**
- Is there an existing brand palette?
- What mood — warm/cool, energetic/calm?
- Dark mode required?

## Typography

**Rules:**
- 2–3 typefaces maximum
- Mathematical scale relationships (typically 1.25× ratios between sizes)
- Distinguish emotional headlines from functional body text
- One typeface for display, one for body is usually enough

**Stack to consider:**
- Display: something with personality
- Body: highly readable at small sizes
- Mono: for code/data

## Layout

**Questions to ask before laying out anything:**
- Mobile-first or desktop-first?
- Grid system preference?
- What's the information hierarchy?
- What's the primary action on this screen?

**Principles:**
- Visual weight should match functional importance
- One primary CTA per screen
- Consistent spatial rhythm (4px or 8px base grid)

## Animation

**When to animate:**
- State transitions that need visual continuity
- Actions that need confirmation
- Loading states

**Rules:**
- Purposeful only (never decorative)
- 100–300ms duration
- GPU-accelerated properties only (`transform`, `opacity`)
- Respect `prefers-reduced-motion`

## Implementation Stack

- **Components**: shadcn UI (preferred over custom)
- **Styling**: Tailwind CSS with CSS custom properties
- **Icons**: Phosphor Icons React library
- **Notifications**: Sonner for toast messages

## Review Checklist

Before presenting any design:
- [ ] Asked about brand personality before choosing colors
- [ ] Contrast ratios meet WCAG AA
- [ ] Keyboard navigation works
- [ ] Mobile layout considered
- [ ] Design doesn't look like generic SaaS template
- [ ] Presented as option with trade-offs, not single answer

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ariadoss](https://github.com/ariadoss)
- **Source:** [ariadoss/superskills](https://github.com/ariadoss/superskills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ariadoss-superskills-ux-designer
- Seller: https://agentstack.voostack.com/s/ariadoss
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.