| 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
