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

• Analyze: Check existing patterns and constraints.

• Propose: Ask the user for direction on mood, color, and layout.

• Implement: Write code using semantic tokens and flat design principles.

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