From ux
Create visual designs, design systems, and UI specifications. Use for typography scales, color systems, layout grids, component design, and accessibility compliance. Covers OKLCH color spaces, variable fonts, fluid typography, design tokens (W3C DTCG), and Atomic Design methodology. Keywords: UI design, color palette, design tokens, WCAG contrast, component library.
npx claudepluginhub teslasoft-de/claude-skills-marketplace --plugin uxThis skill uses the workspace's default tool permissions.
Create systematic, accessible visual designs using modern color spaces, typography, and design token standards.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Create systematic, accessible visual designs using modern color spaces, typography, and design token standards.
Task: Create a basic design system foundation
Minimum deliverable: Token hierarchy + typography scale + color palette
inputs:
- Brand guidelines (if available)
- Target platforms (web, mobile, desktop)
- Accessibility requirements (AA or AAA)
- Existing design assets
Capture requirements in uncertainty ledger:
Typography Scale (Perfect Fourth 1.333 recommended):
| Token | Size | Use |
|---|---|---|
text-xs | 12px | Captions, labels |
text-sm | 14px | Secondary text |
text-base | 16px | Body text |
text-lg | 21px | Lead paragraphs |
text-xl | 28px | H4 headings |
text-2xl | 38px | H3 headings |
text-3xl | 50px | H2 headings |
text-4xl | 67px | H1 headings |
Spacing Scale (8pt grid):
| Token | Value | Use |
|---|---|---|
space-1 | 4px | Tight inline |
space-2 | 8px | Icon-text gap |
space-3 | 12px | Small padding |
space-4 | 16px | Default padding |
space-6 | 24px | Section padding |
space-8 | 32px | Large gaps |
space-12 | 48px | Section margins |
Use OKLCH for perceptually uniform palettes:
/* Primary palette - consistent perceived lightness */
--primary-50: oklch(97% 0.02 250);
--primary-100: oklch(94% 0.04 250);
--primary-200: oklch(88% 0.08 250);
--primary-300: oklch(78% 0.12 250);
--primary-400: oklch(68% 0.15 250);
--primary-500: oklch(58% 0.18 250); /* Base */
--primary-600: oklch(48% 0.16 250);
--primary-700: oklch(38% 0.14 250);
--primary-800: oklch(28% 0.10 250);
--primary-900: oklch(18% 0.06 250);
Checkpoint: Verify contrast ratios meet WCAG requirements.
Apply Atomic Design hierarchy:
For each component, document:
Create usage guidelines with:
Foundation Layer
├── Primitives (raw values)
│ ├── Colors (blue-500, gray-100)
│ ├── Typography (font families, weights)
│ ├── Spacing (4, 8, 16, 24, 32px)
│ └── Breakpoints (sm, md, lg, xl)
│
├── Semantic Layer
│ ├── Colors (primary, secondary, error)
│ ├── Text Styles (heading-lg, body-md)
│ ├── Spacing Tokens (gap-sm, padding-lg)
│ └── Elevation (shadow-sm, shadow-lg)
│
├── Component Layer
│ ├── Atoms (Button, Input, Icon)
│ ├── Molecules (Search Bar, Form Field)
│ ├── Organisms (Header, Data Table)
│ └── Templates (Dashboard, List Page)
│
└── Documentation Layer
├── Usage Guidelines
├── UI Patterns
├── Accessibility Docs
└── Changelog
Token flow: Primitives -> Semantic -> Component -> Output (CSS/SCSS/JS/Figma)
| Criterion | Level AA | Level AAA |
|---|---|---|
| Text Contrast | 4.5:1 | 7:1 |
| Large Text | 3:1 | 4.5:1 |
| UI Components | 3:1 | N/A |
| Focus Indicators | 3:1 | Enhanced |
| Target Size | 24x24px | 44x44px |
Always verify: Use contrast checker tools before finalizing colors.
trusted:
- Brand guidelines provided by user
- Platform design system references (Material, HIG)
untrusted:
- Generated color values (verify perceptually)
- AI-suggested type pairings (verify readability)
| Principle | Application |
|---|---|
| Proximity | Group related form fields |
| Similarity | Consistent button styles |
| Continuity | Navigation flows |
| Closure | Icon simplification |
| Figure-Ground | Modal overlays |
| Common Region | Cards, panels |
| Failure | Recovery |
|---|---|
| Colors fail contrast | Adjust lightness in OKLCH (L value) |
| Type scale feels off | Try different ratio (1.25, 1.333, 1.414) |
| Components inconsistent | Audit against token mapping |
| Dark mode broken | Design dark mode tokens separately |
Color:
Typography:
Design Systems: