STT,Style Category,AI Prompt Keywords (Copy-Paste Ready),CSS/Technical Keywords,Implementation Checklist,Design System Variables
1,Minimalism & Swiss Style,"Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality.","display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary","☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid","--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only"
2,Neumorphism,"Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.","border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press","☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms","--border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel"
3,Glassmorphism,"Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.","backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth","☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked","--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG"
4,Brutalism,"Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.","border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF","☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional","--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true"
5,3D & Hyperrealism,"Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.","transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()","☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms","--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms"
6,Vibrant & Block-based,"Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes.","display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement","☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+)","--block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+"
7,Dark Mode (OLED),"Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.","background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark","☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background","--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true"
8,Accessible & Ethical,"Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.","color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer","☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px","--contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true"
9,Claymorphism,"Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.","border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)","☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions","--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce"
10,Aurora UI,"Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.","background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply","☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified","--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true"
11,Retro-Futurism,"Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.","color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate","☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present","--neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true"
12,Flat Design,"Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation.","box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG","☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified","--shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms"
13,Skeuomorphism,"Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.","background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)","☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced","--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true"
14,Liquid Glass,"Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing for shape changes, dynamic blur, smooth color transitions creating a fluid, premium feel.","animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient","☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved","--morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true"
15,Motion-Driven,"Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.","animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms","☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected","--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth"
16,Micro-interactions,"Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.","animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop","☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle","--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error"
17,Inclusive Design,"Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA compliance, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.","aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated","☐ WCAG AAA verified, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback","--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled"
18,Zero Interface,"Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed.","voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible","☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual","--voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true"
19,Soft UI Evolution,"Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations.","box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+","☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear","--shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+"
20,Bento Grids,"Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic.","display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle","☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic","--grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft"
21,Neubrutalism,"Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.","border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients","☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look","--border-width: 3px, --shadow-offset: 4px, --shadow-color: #000, --colors: high saturation, --font: bold sans"
22,HUD / Sci-Fi FUI,"Design a futuristic HUD (Heads Up Display) or FUI. Use: thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced tech fonts, glowing elements, transparency.","border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyan","☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel","--hud-color: #00FFFF, --bg-color: rgba(0,10,20,0.9), --line-width: 1px, --glow: 0 0 5px, --font: monospace"
23,Pixel Art,"Design a pixel art inspired interface. Use: pixelated fonts, 8-bit or 16-bit aesthetic, sharp edges (image-rendering: pixelated), limited color palette, blocky UI elements, retro gaming feel.","font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing","☐ Pixelated fonts loaded, ☐ Images sharp (no blur), ☐ CSS box-shadow for pixel borders, ☐ Retro palette, ☐ Blocky layout","--pixel-size: 4px, --font: pixel font, --border-style: pixel-shadow, --anti-alias: none"
24,Midjourney Dashboard,"Create a professional SaaS dashboard UI mockup. Style: modern glassmorphism with subtle blur. Colors: dark mode with #0F172A background, #6366F1 primary accent, white text. Layout: sidebar navigation, header with user avatar, main content area with data cards and charts. Include: KPI cards with sparklines, data table, chart widgets. Lighting: soft ambient glow on interactive elements. Quality: ultra detailed, 4K, professional UI/UX design.","--prompt: Midjourney v6+, --ar 16:9, --style raw, --quality 2","☐ Specify exact colors with hex, ☐ Describe layout structure, ☐ Include UI component names, ☐ Add quality/style modifiers, ☐ Specify aspect ratio","--platform: Midjourney, --version: v6+, --aspect: 16:9, --style: raw, --output: UI mockup"
25,DALL-E Mobile Mockup,"Design a modern mobile app interface mockup. App type: [specify]. Style: clean iOS-style with rounded corners and system fonts. Screen: iPhone 15 Pro frame. Include: status bar, navigation, main content, bottom tab bar. Colors: [specify palette]. Show: realistic device mockup with subtle shadow. High quality product design render.","DALL-E 3, detailed UI design, mobile app mockup, realistic device render","☐ Specify app type and purpose, ☐ Include device frame type, ☐ List all UI components needed, ☐ Specify color palette, ☐ Request realistic render quality","--platform: DALL-E 3, --type: mobile mockup, --device: iPhone 15 Pro, --style: realistic render"
26,SD Gradient Background,"Generate abstract gradient background for web design. Style: smooth flowing gradients, aurora-like colors. Colors: [primary] transitioning to [secondary] with [accent] highlights. Mood: [specify - calm/energetic/professional]. Include: subtle noise texture, soft light effects. Resolution: 4K, seamless tile option. Use for: hero background, card backgrounds, ambient UI elements.","Stable Diffusion XL, abstract gradient, flowing colors, noise texture, 4K resolution, seamless","☐ Specify 2-3 gradient colors, ☐ Define mood/energy level, ☐ Request noise texture if needed, ☐ Specify resolution, ☐ Note if seamless tiling required","--platform: Stable Diffusion XL, --type: gradient background, --resolution: 4K, --tiling: seamless optional"
27,LLM Design Tokens,"Generate a complete design token system for [project type]. Include: color palette (primary, secondary, accent, semantic colors), typography scale (font sizes, line heights, font weights), spacing scale (4px base), border radius scale, shadow definitions, and transition timing. Output format: JSON or CSS custom properties. Follow naming convention: category-property-variant. Include dark mode variants.","/* Design Tokens JSON/CSS output */, semantic naming, scale-based values, dark mode support","☐ Specify project type and brand, ☐ Define base unit (4px/8px), ☐ List color categories needed, ☐ Specify output format preference, ☐ Request dark mode variants","--llm: Claude/GPT-4, --output: JSON or CSS variables, --includes: colors typography spacing shadows"
28,LLM Component Variants,"Generate all variants for [component name] component. Include: sizes (sm, md, lg, xl), states (default, hover, active, disabled, loading), visual variants (solid, outline, ghost, link). For each variant provide: Tailwind classes, accessibility attributes, and usage example. Follow shadcn/ui patterns. Include TypeScript interface for props.","Component variant system, Tailwind CSS classes, TypeScript interface, accessibility","☐ Name component type, ☐ List all size variants needed, ☐ Specify state variations, ☐ Request accessibility attributes, ☐ Ask for TypeScript types","--llm: Claude/GPT-4, --framework: React + Tailwind, --pattern: shadcn/ui style, --output: component code"
29,AI UI Screenshot Workflow,"Step 1: Generate UI mockup with Midjourney/DALL-E using detailed prompt. Step 2: Use screenshot as reference in Claude/GPT-4 with vision. Step 3: Prompt: 'Recreate this UI using React and Tailwind CSS. Match layout, colors, typography, and spacing exactly. Use semantic HTML and include accessibility attributes.' Step 4: Iterate on component structure and styling.","Vision model + code generation workflow, reference-based implementation","☐ Generate high-quality mockup first, ☐ Use vision-capable model, ☐ Specify framework stack, ☐ Request accessibility compliance, ☐ Iterate on details","--workflow: Image-to-code, --models: Midjourney + Claude Vision, --output: React + Tailwind"
30,AI Component Library Workflow,"Workflow for AI-assisted component library creation: 1. Define design tokens with LLM (colors, typography, spacing). 2. Generate base components (Button, Input, Card, etc.) with variants. 3. Create composite components (Forms, Modals, Tables). 4. Generate documentation with usage examples. 5. Add Storybook stories. Prompt pattern: 'Create [component] following [design system]. Include: TypeScript types, all variants, accessibility, and usage examples.'","LLM component generation, design system, documentation","☐ Start with design tokens, ☐ Build base components first, ☐ Progress to composite components, ☐ Generate documentation, ☐ Add stories/examples","--workflow: Component library, --approach: bottom-up, --includes: tokens components docs stories"
31,Interactive Particle Background,"Create interactive particle background with connected nodes, floating particles, mouse interaction, subtle movement, dark mode friendly, glowing particles, canvas-based animation, requestAnimationFrame loop, performance optimized. Particles should connect with lines when nearby, respond to mouse movement, and have subtle floating animation. Include reduced motion support.","canvas absolute positioned, z-index behind content, pointer-events none, requestAnimationFrame, particle array, distance calculation, line opacity based on distance, mouse position tracking","☐ Canvas initialized with resize handler, ☐ Particles array created with position/velocity, ☐ Animation loop using requestAnimationFrame, ☐ Mouse position tracking for interaction, ☐ Connection lines between nearby particles, ☐ Reduced motion media query respected, ☐ Performance throttling for many particles, ☐ Canvas behind content with pointer-events: none","--particle-count: 50-100, --particle-color: rgba(255,255,255,0.5), --line-color: rgba(255,255,255,0.1), --max-distance: 150px, --particle-speed: 0.5-1, --canvas-z-index: -1"
32,Voice-First Interface Design,"Design a voice-first interface with hybrid interaction. Use: voice UI, on-device processing, low-latency response, spatial audio feedback, fallback touch controls, multi-speaker recognition, wake word detection, waveform visualization for voice activity. Include privacy mode toggle and noise cancellation indicator.",".voice-indicator, .waveform, .transcript-panel, pulse animation, speech-to-text display, voice-button, listening-state, microphone-icon animated","☐ Voice activation indicator visible, ☐ Waveform visualization active, ☐ Real-time transcript display, ☐ Touch fallback controls present, ☐ Multi-speaker support enabled, ☐ Noise cancellation indicator shown, ☐ Privacy mode toggle accessible","--voice-primary: #4F46E5, --waveform-color: #22C55E, --listening-pulse: 1.5s ease-in-out, --transcript-bg: rgba(0,0,0,0.8), --indicator-size: 48px, --audio-feedback: spatial"
33,VisionOS Spatial UI Design,"Create a spatial computing interface for Vision Pro. Use: 3D UI elements, depth layers, eye-tracking feedback, hand gesture interaction zones, volumetric elements, environment anchoring, glass materials with transparency. Design for comfortable viewing distance with proper depth hierarchy and ambient lighting response.","perspective, transform-style: preserve-3d, depth-shadow, glass-layer, .spatial-panel, z-depth variables, backdrop-filter, environment-lighting, gesture-zone","☐ 3D element positioning with depth, ☐ Depth-based visual hierarchy, ☐ Eye-tracking hover feedback, ☐ Hand gesture interaction zones defined, ☐ Ambient lighting response active, ☐ Environment pass-through integrated, ☐ Glass material effects applied","--depth-near: 100px, --depth-mid: 300px, --depth-far: 600px, --glass-blur: 40px, --glass-opacity: 0.6, --eye-hover-scale: 1.02, --gesture-zone-size: 80px"
34,AI Agent Task Orchestration,"Design an agentic workflow interface with transparent AI reasoning. Use: ReAct pattern visualization, reasoning panels, action cards, transparency dashboard, multi-step progress, autonomous task indicators, guardrail warnings, human-in-the-loop approval gates. Show AI decision-making process clearly.",".workflow-step, .action-card, .reasoning-panel, .guardrail-indicator, .approval-gate, status-pipeline, thought-bubble, decision-tree, progress-chain","☐ Workflow step visualization complete, ☐ Action card components styled, ☐ Reasoning transparency panel visible, ☐ Guardrail indicators active, ☐ Human approval gates functional, ☐ Progress pipeline displayed, ☐ Error recovery UI implemented","--step-complete: #22C55E, --step-active: #3B82F6, --step-pending: #6B7280, --guardrail-warning: #F59E0B, --approval-required: #8B5CF6, --reasoning-bg: #1E293B, --pipeline-gap: 24px"
35,Multi-Modal Conversational UI,"Create a multi-modal chat interface supporting voice, text, image, and video. Use: mode-switching controls, file upload with preview, streaming text display, context preservation, session continuity indicators, drag-drop attachments. Enable seamless transitions between input modes.",".chat-bubble, .mode-switcher, .file-preview, .streaming-text, .voice-toggle, attachment-grid, input-mode-indicator, context-badge, media-preview","☐ Text input with voice toggle ready, ☐ Image/file upload with preview working, ☐ Mode switching indicator visible, ☐ Streaming text display smooth, ☐ Context continuity maintained, ☐ Session summary accessible, ☐ Drag-drop attachments functional","--chat-bubble-user: #3B82F6, --chat-bubble-ai: #1E293B, --mode-active: #22C55E, --upload-zone-border: dashed 2px #6B7280, --streaming-cursor: #FFFFFF, --attachment-grid-gap: 8px"
36,Real-Time AI Streaming UI,"Design a real-time AI streaming response interface. Use: typewriter effect, token-by-token reveal, streaming cursor animation, loading indicators, cancel/stop button, regenerate option. Optimize for perceived performance with smooth text appearance and clear loading states.",".streaming-cursor, typewriter-animation, .token-reveal, .cancel-btn, .regenerate-btn, loading-dots, response-container, stream-indicator","☐ Streaming text container styled, ☐ Blinking cursor indicator visible, ☐ Token-by-token reveal smooth, ☐ Cancel/stop button accessible, ☐ Regenerate option available, ☐ Loading state clear, ☐ Error handling implemented","--cursor-blink: 1s step-end infinite, --token-fade-in: 50ms ease-out, --loading-dot-size: 8px, --cancel-btn-color: #EF4444, --regenerate-btn-color: #6B7280, --stream-bg: #0F172A"
37,AI Confidence and Uncertainty UI,"Design an AI confidence visualization interface. Use: confidence score display, uncertainty visualization bars, probability meters, hallucination warnings, source citations, verification badges, trust level indicators. Make AI limitations transparent to users.",".confidence-meter, .uncertainty-bar, .citation-badge, .hallucination-alert, .trust-indicator, semantic-colors, probability-display, source-panel, verification-icon","☐ Confidence percentage display visible, ☐ Uncertainty visualization bar styled, ☐ Source citations panel complete, ☐ Hallucination warning implemented, ☐ Verification badges designed, ☐ Trust level indicators clear, ☐ Explanation accordion functional","--confidence-high: #22C55E, --confidence-medium: #F59E0B, --confidence-low: #EF4444, --uncertainty-bg: #374151, --citation-badge-bg: #1E40AF, --hallucination-border: 2px solid #EF4444, --trust-gradient: linear-gradient(90deg, #EF4444, #F59E0B, #22C55E)"
38,Apple-Style Bento Grid,"Design an Apple-style Bento Grid layout for feature showcase. Use: modular grid with variable-size cards, responsive reflow, feature highlights with icons and text, content blocks, image/video integration. Create visual hierarchy through card sizing and positioning.","grid-template-areas, .bento-card, .feature-highlight, auto-fit minmax, gap, responsive-grid, card-span-2, card-span-3, hover-lift, content-block","☐ Variable-size grid modules defined, ☐ Feature highlight cards styled, ☐ Icon + text blocks aligned, ☐ Responsive reflow working, ☐ Hover interactions smooth, ☐ Content hierarchy clear, ☐ Image/video integration complete","--bento-gap: 16px, --card-radius: 24px, --card-bg: #FFFFFF, --card-shadow: 0 4px 6px rgba(0,0,0,0.05), --hover-lift: translateY(-4px), --grid-cols-lg: 4, --grid-cols-md: 2, --grid-cols-sm: 1"
39,Neubrutalist UI Components,"Design neubrutalist UI components with bold aesthetic. Use: thick black borders (4px+), hard offset shadows, high-contrast colors, saturated color blocks, bold typography, chunky buttons, accessible despite raw aesthetic. Balance brutalist style with usability.","border: 4px solid black, box-shadow: 4px 4px 0 black, .brutal-btn, .brutal-card, saturated-bg, no-radius, bold-font, hard-shadow, high-contrast","☐ Thick black borders applied (4px), ☐ Hard offset shadows consistent, ☐ Saturated color blocks used, ☐ Bold typography throughout, ☐ High-contrast states clear, ☐ Chunky buttons designed, ☐ Card components complete","--brutal-border: 4px solid #000000, --brutal-shadow: 4px 4px 0 #000000, --brutal-yellow: #FFDB58, --brutal-pink: #FF6B6B, --brutal-blue: #4ECDC4, --brutal-font-weight: 800, --brutal-radius: 0px"
