ux-design

name	ux-design
description	Generate a Design Brief with application-type-aware design system, typography, color, motion, and anti-patterns. Use before /blueprint for frontend work to avoid generic AI aesthetics.
disable-model-invocation	false
argument-hint	[app-type or 'auto'] [--refresh]
allowed-tools	Read, Grep, Glob, WebSearch, Write
effort	xhigh
wrought	{"version":"1.0","tools":{"capabilities":["read_file","search_content","find_files","web_search","write_file"]},"platforms":{"claude-code":{"allowed-tools":"Read, Grep, Glob, WebSearch, Write","disable-model-invocation":false}},"agent":{"role":"Design System Architect","expertise":["frontend design systems","application-type conventions","design token architecture","accessibility standards"],"non_goals":["writing production code","creating visual mockups or wireframes","implementing the design"]},"execution":{"default_mode":"react","max_iterations":8,"stop_conditions":["Design Brief written to docs/design-briefs/","User instructed to stop"]},"output":{"format":"markdown","template":"docs/design-briefs/{YYYY-MM-DD_HHMM}_{project}.md","required_sections":["Aesthetic Direction","Design Tokens","Typography Rules","Color System","Anti-Patterns"]},"pipeline":{"track":"proactive","standalone":true,"prerequisites":[],"produces":["docs/design-briefs/*.md"],"suggested_next":["blueprint"]}}

UX Design Skill

Trigger: /ux-design [app-type|auto] [--refresh]

Purpose: Generate an application-type-aware Design Brief with design tokens, typography, color, motion, layout, anti-patterns, accessibility requirements, and performance budgets. Eliminates "AI slop" by providing concrete, opinionated design direction before implementation.

Examples:

• /ux-design auto — detect application type from codebase, generate brief
• /ux-design saas-dashboard — use SaaS Dashboard profile directly
• /ux-design landing-page — use Landing Page profile directly
• /ux-design --refresh — re-evaluate existing Design Brief against current recommendations

Application types: saas-dashboard, landing-page, ecommerce, mobile-app, admin-panel, blog-content, developer-tool, auto

---

Pre-flight Check

This skill is standalone — it can be invoked at any time without prerequisites.

If this invocation is part of an active workflow, check docs/findings/*_FINDINGS_TRACKER.md for a relevant tracker and note it for context, but do not enforce stage requirements.

---

Flags

--refresh    Re-evaluate existing Design Brief against current profiles and anti-patterns
--force      Skip Findings Tracker prerequisite check (if run via workflow)

---

Step 1: Parse Arguments

Parse the user's invocation:

If no arguments provided (bare /ux-design invocation):

Display the following help text and STOP -- do not proceed to Step 2:

/ux-design -- Frontend Design Brief Generator

Application types:
  saas-dashboard    Data-dense dashboards, charts, real-time metrics
  landing-page      Hero-driven, conversion-focused marketing pages
  ecommerce         Product-focused storefronts, cart, checkout
  mobile-app        Touch-first, native-feel mobile interfaces
  admin-panel       Dense, functional, keyboard-navigable back-office
  blog-content      Readable, editorial, serif-forward content sites
  developer-tool    Monospace-heavy, dark-first, terminal aesthetic
  auto              Auto-detect from codebase signals

Flags:
  --refresh         Re-evaluate an existing Design Brief

Examples:
  /ux-design auto              Detect app type and generate brief
  /ux-design saas-dashboard    Generate with SaaS Dashboard profile
  /ux-design --refresh         Refresh existing brief against latest profiles