UI/UX Design
Create functional, accessible, visually distinctive interfaces. Output is working code.
When to Use
Activate automatically when:
- User requests UI components, pages, or applications
- User mentions forms, dashboards, landing pages, modals
- User asks to "design", "build", or "create" any interface
- User wants to improve existing UI/UX
Workflow
Step 1: Assess Context
Before coding, identify (internal reasoning):
- Problem being solved
- Target users
- Aesthetic direction (see REFERENCES.md)
- Constraints (framework, brand, accessibility level)
Step 2: Consult References
Fetch implementation values from REFERENCES.md:
- Color palette (with WCAG-compliant values)
- Font pairing
- Component patterns (button, input, card, etc.)
- Spacing and typography tokens
Step 3: Generate Code
Produce working implementation with:
- All interactive states (hover, focus, active, disabled, loading, error)
- Semantic HTML (button, nav, main—not div soup)
- Mobile-first responsive design
- CSS variables for maintainability
Step 4: Verify
Run through checklist before delivering.
Output Requirements
| Requirement |
Standard |
| Contrast |
4.5:1 text, 3:1 UI components |
| Focus states |
Visible outline on all interactive elements |
| Touch targets |
Minimum 44×44px |
| Reduced motion |
Respect prefers-reduced-motion |
| Labels |
All inputs have associated labels |
| Empty states |
Helpful message + clear action |
| Error states |
Explain what happened + how to fix |
Aesthetic Direction
Pick an extreme and commit. Indecision produces generic output. Pick a clear conceptual direction — brutally minimal, maximalist, retro-futuristic, editorial, neubrutalist, organic, luxury/refined, industrial — and execute it with precision. Bold maximalism and refined minimalism both work; the failure mode is timid middle-ground.
See REFERENCES.md for characteristics of each direction.
| Style |
Best For |
| Minimalism |
Productivity, professional, portfolios |
| Glassmorphism |
Dashboards, tech products |
| Neubrutalism |
Creative, startups, distinctive brands |
| Editorial |
Content sites, publications |
| Organic |
Consumer apps, wellness, community |
| Dark Mode |
User preference, low-light contexts |
Vary across generations. Never converge on the same display font (especially Inter, Space Grotesk, Roboto) or the same purple-on-white gradient that signals AI default output.
Anti-Patterns
Avoid these markers of generic AI output:
- Purple/blue gradients on white
- Inter/Roboto/system fonts everywhere
- Cookie-cutter card layouts
- Rounded rectangles with soft shadows on everything
- Color-only meaning (no icons/text backup)
- Removed focus outlines
- Error messages without solutions
Checklist
Copy and track:
- [ ] Context assessed (problem, users, aesthetic direction)
- [ ] REFERENCES.md consulted for palette + fonts
- [ ] All interactive states implemented
- [ ] Loading and error states included
- [ ] Contrast meets WCAG AA
- [ ] Semantic HTML used
- [ ] Focus states visible
- [ ] Form inputs labeled
- [ ] prefers-reduced-motion respected
- [ ] Responsive breakpoints tested
- [ ] Empty states handled
Recovery
| Issue |
Action |
| User dislikes direction |
Propose 2-3 alternatives from Aesthetic Directions |
| Looks too generic |
Check Anti-Patterns, apply distinctive typography |
| Accessibility concerns |
Verify contrast, focus states, semantic HTML |
| States incomplete |
Walk through checklist systematically |
License: MIT - See LICENSE for complete terms
Author: Arvind Menon
1---2name: ui-ux-design3description: Create production-grade frontend interfaces with strong UX and visual craft. Use when building web components, pages, dashboards, forms, landing pages, modals, or any UI. Use when user says 'build a form', 'create a dashboard', 'design a component', 'make a landing page', or asks for UI/UX work. Use even when the user just says 'make this look better' or pastes screenshots/mockups without explicitly naming a design task.4license: MIT5---67# UI/UX Design89Create functional, accessible, visually distinctive interfaces. Output is working code.1011## When to Use1213**Activate automatically when:**1415- User requests UI components, pages, or applications16- User mentions forms, dashboards, landing pages, modals17- User asks to "design", "build", or "create" any interface18- User wants to improve existing UI/UX1920## Workflow2122### Step 1: Assess Context2324Before coding, identify (internal reasoning):2526- Problem being solved27- Target users28- Aesthetic direction (see [REFERENCES.md](REFERENCES.md#aesthetic-directions))29- Constraints (framework, brand, accessibility level)3031### Step 2: Consult References3233Fetch implementation values from [REFERENCES.md](REFERENCES.md):3435- Color palette (with WCAG-compliant values)36- Font pairing37- Component patterns (button, input, card, etc.)38- Spacing and typography tokens3940### Step 3: Generate Code4142Produce working implementation with:4344- All interactive states (hover, focus, active, disabled, loading, error)45- Semantic HTML (button, nav, main—not div soup)46- Mobile-first responsive design47- CSS variables for maintainability4849### Step 4: Verify5051Run through checklist before delivering.5253## Output Requirements5455| Requirement | Standard |56|-------------|----------|57| Contrast | 4.5:1 text, 3:1 UI components |58| Focus states | Visible outline on all interactive elements |59| Touch targets | Minimum 44×44px |60| Reduced motion | Respect `prefers-reduced-motion` |61| Labels | All inputs have associated labels |62| Empty states | Helpful message + clear action |63| Error states | Explain what happened + how to fix |6465## Aesthetic Direction6667**Pick an extreme and commit.** Indecision produces generic output. Pick a clear conceptual direction — brutally minimal, maximalist, retro-futuristic, editorial, neubrutalist, organic, luxury/refined, industrial — and execute it with precision. Bold maximalism and refined minimalism both work; the failure mode is timid middle-ground.6869See [REFERENCES.md](REFERENCES.md#aesthetic-directions) for characteristics of each direction.7071| Style | Best For |72|-------|----------|73| Minimalism | Productivity, professional, portfolios |74| Glassmorphism | Dashboards, tech products |75| Neubrutalism | Creative, startups, distinctive brands |76| Editorial | Content sites, publications |77| Organic | Consumer apps, wellness, community |78| Dark Mode | User preference, low-light contexts |7980Vary across generations. Never converge on the same display font (especially Inter, Space Grotesk, Roboto) or the same purple-on-white gradient that signals AI default output.8182## Anti-Patterns8384Avoid these markers of generic AI output:8586- Purple/blue gradients on white87- Inter/Roboto/system fonts everywhere88- Cookie-cutter card layouts89- Rounded rectangles with soft shadows on everything90- Color-only meaning (no icons/text backup)91- Removed focus outlines92- Error messages without solutions9394## Checklist9596Copy and track:9798```99- [ ] Context assessed (problem, users, aesthetic direction)100- [ ] REFERENCES.md consulted for palette + fonts101- [ ] All interactive states implemented102- [ ] Loading and error states included103- [ ] Contrast meets WCAG AA104- [ ] Semantic HTML used105- [ ] Focus states visible106- [ ] Form inputs labeled107- [ ] prefers-reduced-motion respected108- [ ] Responsive breakpoints tested109- [ ] Empty states handled110```111112## Recovery113114| Issue | Action |115|-------|--------|116| User dislikes direction | Propose 2-3 alternatives from Aesthetic Directions |117| Looks too generic | Check Anti-Patterns, apply distinctive typography |118| Accessibility concerns | Verify contrast, focus states, semantic HTML |119| States incomplete | Walk through checklist systematically |120121---122123> **License:** MIT - See LICENSE for complete terms124> **Author:** Arvind Menon
arvindand