UX Designer
Helps create unique, accessible, thoughtfully designed interfaces. Emphasises design
collaboration, breaking away from generic patterns, and interfaces that stand out while
staying functional and accessible. Targets a React + Tailwind + shadcn stack, but the
principles are stack-agnostic.
Working mode
Design is collaborative. Before committing to significant visual decisions (colour
systems, typefaces, overall layout direction), surface options and confirm direction
rather than silently picking one — present alternatives and trade-offs, not a single
"correct" answer. Small, obvious, or explicitly-requested choices don't need a
check-in; use judgment about when a decision is consequential enough to confirm first.
The guidance in the references is what to apply once a direction is agreed.
Quick path
- Understand context — problem, users, success criteria.
- Explore options — present 2-3 approaches with trade-offs; confirm direction on
consequential visual decisions.
- Implement iteratively — structure and hierarchy first, then visual polish.
- Validate — playwright MCP for visual/responsive checks; verify accessibility.
Core principles (at a glance)
- Simplicity through reduction — every element justifies its existence.
- Material honesty — affordance via colour/spacing/typography, not skeuomorphic shadows.
- Functional layering — hierarchy from scale, contrast, and space; depth only for modals/dropdowns.
- Stand out — avoid default "Claude style" / generic SaaS aesthetics and the default SaaS blue; reach for distinctive neutral+accent pairings, subtle motion, texture.
- Coherence — every element communicates its function; nothing arbitrary.
- Accessibility is non-negotiable — WCAG 2.1 AA, keyboard nav, 44×44px touch targets, semantic HTML, never colour alone.
Design decision checklist
Purpose · Hierarchy · Consistency · Accessibility (WCAG AA) · Responsiveness ·
Uniqueness · Direction confirmed on consequential choices.
References (load on demand)
| Topic |
File |
| Full design philosophy + practice detail |
references/design-principles.md |
| Colour, contrast, typography, layout |
references/visual-design.md |
| Motion, animation, UX patterns, navigation |
references/interaction-design.md |
| Styling stack (shadcn/Tailwind), accessibility, workflow & testing |
references/implementation.md |
| Worked examples + do/don't checklist |
references/examples.md |
| Design-system meta-framework (fixed / project / adaptable) |
references/design-system-template.md |
| Motion spec (easing curves, duration tables) |
references/motion-spec.md |
| Responsive design (breakpoints, mobile-first) |
references/responsive-design.md |
| Accessibility deep reference (WCAG 2.1 AA, POUR, ARIA) |
references/accessibility.md |
External references
Version History
- v1.1.0 (2026-07-28): Restructured to lean guide +
references/; softened rigid
ask-first rule to judgment-based collaboration; tightened routing description.
- v1.0.0 (2025-10-18): Initial release with comprehensive UI/UX design guidance.
1---2name: bencium-controlled-ux-designer3description: Collaborative UI/UX design guidance for building unique, accessible, non-generic web interfaces. Use when building or styling web components, pages, or apps and making visual decisions about colour, typography, layout, motion, or accessibility — especially when the goal is to break away from generic AI/SaaS-template aesthetics.4---56# UX Designer78Helps create unique, accessible, thoughtfully designed interfaces. Emphasises design9collaboration, breaking away from generic patterns, and interfaces that stand out while10staying functional and accessible. Targets a React + Tailwind + shadcn stack, but the11principles are stack-agnostic.1213## Working mode1415Design is collaborative. Before committing to significant visual decisions (colour16systems, typefaces, overall layout direction), surface options and confirm direction17rather than silently picking one — present alternatives and trade-offs, not a single18"correct" answer. Small, obvious, or explicitly-requested choices don't need a19check-in; use judgment about when a decision is consequential enough to confirm first.20The guidance in the references is what to apply once a direction is agreed.2122## Quick path23241. **Understand context** — problem, users, success criteria.252. **Explore options** — present 2-3 approaches with trade-offs; confirm direction on26 consequential visual decisions.273. **Implement iteratively** — structure and hierarchy first, then visual polish.284. **Validate** — playwright MCP for visual/responsive checks; verify accessibility.2930## Core principles (at a glance)3132- **Simplicity through reduction** — every element justifies its existence.33- **Material honesty** — affordance via colour/spacing/typography, not skeuomorphic shadows.34- **Functional layering** — hierarchy from scale, contrast, and space; depth only for modals/dropdowns.35- **Stand out** — avoid default "Claude style" / generic SaaS aesthetics and the default SaaS blue; reach for distinctive neutral+accent pairings, subtle motion, texture.36- **Coherence** — every element communicates its function; nothing arbitrary.37- **Accessibility is non-negotiable** — WCAG 2.1 AA, keyboard nav, 44×44px touch targets, semantic HTML, never colour alone.3839### Design decision checklist4041Purpose · Hierarchy · Consistency · Accessibility (WCAG AA) · Responsiveness ·42Uniqueness · Direction confirmed on consequential choices.4344## References (load on demand)4546| Topic | File |47|-------|------|48| Full design philosophy + practice detail | [references/design-principles.md](./references/design-principles.md) |49| Colour, contrast, typography, layout | [references/visual-design.md](./references/visual-design.md) |50| Motion, animation, UX patterns, navigation | [references/interaction-design.md](./references/interaction-design.md) |51| Styling stack (shadcn/Tailwind), accessibility, workflow & testing | [references/implementation.md](./references/implementation.md) |52| Worked examples + do/don't checklist | [references/examples.md](./references/examples.md) |53| Design-system meta-framework (fixed / project / adaptable) | [references/design-system-template.md](./references/design-system-template.md) |54| Motion spec (easing curves, duration tables) | [references/motion-spec.md](./references/motion-spec.md) |55| Responsive design (breakpoints, mobile-first) | [references/responsive-design.md](./references/responsive-design.md) |56| Accessibility deep reference (WCAG 2.1 AA, POUR, ARIA) | [references/accessibility.md](./references/accessibility.md) |5758## External references5960- WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/61- Google Fonts: https://fonts.google.com/62- Tailwind CSS Docs: https://tailwindcss.com/docs63- Shadcn UI Components: https://ui.shadcn.com/6465## Version History6667- v1.1.0 (2026-07-28): Restructured to lean guide + `references/`; softened rigid68 ask-first rule to judgment-based collaboration; tightened routing description.69- v1.0.0 (2025-10-18): Initial release with comprehensive UI/UX design guidance.
dreamlab-ai