UI UX Pro Max — Design Intelligence Skill¶
STATUS: active OWNER: floris (frontend lead, auto-activates) ALSO_USED_BY: floor, martijn, alexander CATEGORY: local-skill COST: free (embedded knowledge, no API calls) ADDED: 2026-04-01 UPDATED: 2026-04-01
WHAT IS UI UX PRO MAX¶
UI UX Pro Max is a Claude Code skill that injects design intelligence into every UI and frontend task. It runs locally as embedded knowledge — no external API calls, no cost per invocation. When any agent works on a UI/frontend task, the skill automatically generates a tailored design system with optimal patterns, styles, colors, typography, and stack-specific implementation guidelines.
INSTALLATION¶
Already installed at .claude/skills/ui-ux-pro-max/.
Auto-activates when a UI or frontend task is detected. No manual trigger required.
No API key needed.
CAPABILITIES¶
Knowledge Base¶
| Category | Count | Examples |
|---|---|---|
| UI styles | 67 | Glassmorphism, Neobrutalism, Scandinavian Minimal, Enterprise Clean, etc. |
| Color palettes | 161 | Industry-specific, mood-based, accessibility-compliant |
| Typography pairings | 57 | Heading + body font combinations with scale ratios |
| UX guidelines | 99 | Navigation patterns, form design, feedback states, loading, error handling |
| Industry reasoning rules | 161 | SaaS, e-commerce, healthcare, fintech, education, hospitality, etc. |
Stack Support¶
| Stack | Coverage |
|---|---|
| Next.js + React | Full (App Router, Server Components, Client Components) |
| SwiftUI | Full (iOS/macOS native patterns, Apple HIG compliance) |
| Tailwind CSS | Full (utility classes, custom config, design tokens) |
| shadcn/ui | Full (component customization, theme overrides) |
| Flutter | Full (Material Design 3, Cupertino) |
| Vue 3 | Full (Composition API, component patterns) |
| React Native | Full (cross-platform patterns) |
| HTML/CSS | Full (semantic markup, CSS custom properties) |
What It Generates¶
When activated, UI UX Pro Max produces:
- Style selection — picks the optimal UI style based on industry, target audience, and project goals
- Color system — primary, secondary, accent, semantic colors, dark mode variants
- Typography scale — heading/body font pairing, size scale, line heights, letter spacing
- Spacing system — base unit, scale progression, component spacing rules
- Component guidelines — buttons, cards, inputs, tables, navigation, modals
- Layout patterns — grid system, breakpoints, responsive behavior
- UX patterns — loading states, error handling, empty states, transitions
- Stack-specific code — implementation in the target framework/language
AGENT USAGE¶
| Agent | Role | How They Use It |
|---|---|---|
| Floris | Frontend Lead (Web) | Automatic activation on all web UI tasks. Generates Tailwind + shadcn/ui code. |
| Floor | Frontend Developer | Automatic activation. Component implementation with design tokens. |
| Martijn | iOS Developer | Automatic activation on SwiftUI tasks. Apple HIG-compliant patterns. |
| Alexander | Design System Engineer | Design system architecture. Exports tokens for cross-platform consistency. |
Automatic Activation¶
The skill detects UI tasks by analyzing the work item description and type. No agent needs to explicitly invoke it. When a task involves creating or modifying UI components, pages, or layouts, the skill injects its design reasoning into the agent's context automatically.
DESIGN SYSTEM PERSISTENCE¶
Design decisions can be persisted to maintain consistency across sessions and agents.
Master File¶
design-system/MASTER.md — project-level design system definition.
Contains the canonical color palette, typography, spacing, and component rules.
All agents reference this file when working on UI tasks for the same project.
Page-Specific Overrides¶
design-system/pages/{page-name}.md — per-page design overrides.
Used when a specific page needs to deviate from the master system (e.g., a landing page with a different color scheme than the app dashboard).
Persistence Flow¶
1. First UI task for a project:
→ UI UX Pro Max generates full design system
→ Saved to design-system/MASTER.md
2. Subsequent UI tasks:
→ Skill reads existing MASTER.md
→ Applies consistent tokens
→ Generates page override only if needed
3. Design system update:
→ Alexander updates MASTER.md
→ All agents pick up changes on next task
INTEGRATION WITH OTHER TOOLS¶
UI UX Pro Max provides the design reasoning layer. Other tools provide the visual output.
| Tool | Role | Interaction |
|---|---|---|
| Google Stitch | Structured UI screen generation | UI UX Pro Max defines the design system, Stitch generates screens that follow it |
| Nano Banana 2 | Visual mockups and assets | UI UX Pro Max defines the visual direction, NB2 generates matching imagery |
| shadcn/ui | Component library | UI UX Pro Max configures the theme, agents implement with shadcn components |
| Figma MCP | Design file access | UI UX Pro Max can interpret Figma tokens and adapt its recommendations |
Typical Workflow¶
Client brief arrives
↓
UI UX Pro Max analyzes requirements → generates design system (MASTER.md)
↓
Alexander validates and refines design system
↓
Stitch generates screen designs using the design system
Nano Banana 2 generates visual assets matching the design system
↓
Floris/Floor implement with Tailwind + shadcn/ui, guided by MASTER.md
Martijn implements iOS screens with SwiftUI, guided by MASTER.md
LIMITATIONS¶
- Does not generate images or visual mockups (use Nano Banana 2 or Stitch for that)
- Does not replace human design review for client-facing work
- Industry reasoning rules are generalized — client-specific brand guidelines take precedence
- Cannot read or interpret existing design files (Figma, Sketch) without MCP bridge
RELATED WIKI PAGES¶
READ_ALSO: domains/design/design-tool-workflow.md (design tool selection decision tree) READ_ALSO: domains/design/design-system-engineering.md (design system architecture) READ_ALSO: domains/design/design-tokens.md (token format and usage) READ_ALSO: development/integrations/google-stitch.md (Stitch for structured UI design) READ_ALSO: development/integrations/nano-banana-2.md (Gemini image generation)