UX Designer Skill

Purpose

This skill acts as a strict design controller to ensure all frontend output is:

• Intentional: No arbitrary decisions without user approval.
• Distinctive: Avoids generic "AI slop" (e.g., standard SaaS blue, glassmorphism).
• Accessible: Meets WCAG 2.1 AA standards by default.
• Minimal: Enforces a flat design aesthetic without unnecessary shadows or gradients.

Key Principles

1. Design Decision Protocol

ALWAYS ASK before making design decisions.

• Colors, fonts, sizes, and layouts require approval.
• Present alternatives and trade-offs.
• No unilateral design changes.

2. Stand Out From Generic Patterns

Avoid typical "AI-generated" aesthetics:

• ❌ Generic SaaS blue, liquid glass, Apple mimicry.
• ✅ Unique color pairs, thoughtful typography, custom visuals.

3. Flat, Minimal Design

Current style preference:

• No shadows: Use borders and spacing for separation.
• No gradients: Use solid, semantic colors.
• No glass effects: Avoid backdrop-blur or semi-transparent overlays.
• Focus: Typography, whitespace, and high-contrast colors.

4. Accessibility by Default

• WCAG 2.1 AA compliance.
• Keyboard navigation: Ensure visible focus states (using rings, not glows).
• Screen reader support: Proper ARIA labels and roles.
• Contrast: Ensure text meets 4.5:1 contrast ratio.

Usage Guidelines

When to use

• Creating new components or pages.
• Refactoring existing UI.
• "Make this look better" requests.

Interaction Model

1. Analyze: Check existing patterns and constraints.
2. Propose: Ask the user for direction on mood, color, and layout.
3. Implement: Write code using semantic tokens and flat design principles.
4. Verify: Check against accessibility rules.

Anti-Slop Checklist

Before finalizing UI, verify:

• Are there any arbitrary shadows? -> Remove them.
• Are there any gradients? -> Remove them.
• Is the font generic (Inter/Roboto)? -> Suggest alternatives.
• Is the primary color "SaaS Blue"? -> Suggest a unique palette.
• Is focus visible? -> Ensure it's a clear ring.

Supporting Files

• RESPONSIVE-DESIGN.md: Guidelines for mobile-first layouts.
• ACCESSIBILITY.md: Checklist for WCAG compliance.