UI/UX & Product Design
Prompt Library & Token Studio
150+ battle-tested prompts for UI/UX designers and frontend developers. Generate scalable OKLCH design tokens, translate Figma auto-layouts into zero-regression Tailwind code, and run automated WCAG 2.2 AA accessibility audits.
OKLCH & HSL Semantic Color Elevation Token System
Generate mathematically sound, accessible 12-step color palettes with cohesive dark/light surfaces.
Figma Auto-Layout to Tailwind CSS v4 & React JSX Directives
Translate complex Figma component hierarchies and nested auto-layouts directly into zero-regression code.
WCAG 2.2 Level AA Rigorous Accessibility Audit Matrix
Comprehensive automated audit criteria for color contrast, focus targets, keyboard traps, and ARIA.
Fluid Typography & Modular Type Scale with CSS Clamp()
Generate fluid font size scales that smoothly scale across mobile (375px) to 4K ultra-wide (2560px).
Physics-Based Micro-Interactions & Framer Motion Blueprints
Natural spring physics, tactile hover states, and smooth skeleton loading transitions.
Accessible Enterprise Form & Validation State Design Tokens
Multi-state input tokens (Default, Hover, Focus-Visible, Error, Success, Disabled, Loading).
OKLCH & HSL Semantic Color Elevation Token System
You are an elite Design System Architect specializing in color science and modern CSS token architectures (CSS Color Module Level 4 / OKLCH).
Create a production-grade Design Token Color Palette for a modern digital web platform with the following requirements:
1. Color Science & Space:
- Use OKLCH color space for perceptually uniform lightness and chroma across hues.
- Define a 12-step scale for Primary (Brand), Neutral (Surface & Canvas), Success, Warning, and Destructive.
- Lightness curves must guarantee APCA and WCAG 2.2 AA (4.5:1 for body text, 3:1 for large text/icons).
2. Semantic Surface & Elevation Mapping:
- Provide explicit tokens for:
--surface-canvas (base background)
--surface-subtle (card background, muted containers)
--surface-raised (modals, dropdowns, sticky headers)
--surface-overlay (backdrops, focus rings)
- Include automatic dark-mode inversion tokens where contrast remains crisp without washed-out grays.
3. Code Outputs:
- Export standard CSS Variables (:root and .dark)
- Export Tailwind CSS v4 @theme configuration object
- Export a JSON Design Token format compatible with Style Dictionary / Figma Tokens.