sumi

200+ production-ready animation recipes with exact CSS/Framer Motion/GSAP code. Covers entrance/exit animations, micro-interactions, page transitions, loading states, scroll-driven animations, spring physics, and reduced motion alternatives. Every recipe includes timing, easing, and copy-paste code. Use when the user mentions: animation, transition, motion, micro-interaction, page transition, entrance animation, exit animation, loading animation, skeleton animation, scroll animation, spring animation, easing, keyframe, framer motion, CSS animation, hover effect, click animation, motion design, GSAP, ScrollTrigger, SplitText, Lenis, smooth scroll, pin and scrub, parallax, horizontal scroll, cursor effect, magnetic button, custom cursor, cursor follower, text animation, typewriter, gradient text, 3D, card tilt, card flip, floating, glassmorphism, noise grain, particle, React Three Fiber, R3F, three.js, counter animation, marquee, ticker, SVG morph, stagger, spotlight.

Production-ready UI component patterns with complete code examples in React/TypeScript, SwiftUI, and modern CSS. Uses CVA (class-variance-authority) + Tailwind CSS + Radix UI primitives. Covers component state matrices, accessibility patterns, design token integration, and responsive behavior. Use when the user mentions: React component, SwiftUI view, CSS component, component pattern, button component, modal component, form component, input component, state matrix, code example, build component, select component, combobox, dialog, toast, notification component, skeleton screen, empty state component, data table, loading state, error boundary, focus trap, design tokens code, TypeScript component, accessible component, ARIA component, CVA, class-variance-authority, Radix UI, shadcn, cmdk, command palette, Vaul, drawer, sheet, Sonner, toast notification, TanStack Table, React Hook Form, Zod, compound component, forwardRef, variant, badge, avatar, dropdown menu, popover, accordion, tabs, tooltip, switch, toggle,

20+ complete, ready-to-deploy design token systems for every major industry vertical. Each preset includes color scales (primitive + semantic), typography scales, spacing systems, border radius, shadows, motion tokens, breakpoints, and z-index — in W3C DTCG JSON format, CSS custom property output, AND Tailwind v4 @theme configuration. Style Dictionary 4.x config included. Figma Variables mapping. Use when the user mentions: design tokens preset, token system, ready-made tokens, industry tokens, startup tokens, SaaS tokens, fintech tokens, healthcare tokens, ecommerce tokens, token set, token template, quick tokens, token starter, design tokens ready, Tailwind v4 tokens, @theme tokens, DTCG JSON, W3C design tokens, Style Dictionary, Figma Variables, token JSON.

Current visual design standards for every major platform and device type — iOS 26 Liquid Glass (materials, vibrancy, SF Symbols 7), Material 3 Expressive (35-shape library, spring physics, HCT color, Dynamic Color), modern web CSS 2025-2026 (container queries, view transitions, scroll-driven animations, oklch(), anchor positioning), watchOS/tvOS/automotive (complications, 10-foot UI, CarPlay), spatial/XR (visionOS, Meta Quest, WebXR), and cross-platform design harmony (one design system, 9 form factors). Use when the user mentions: iOS design, Android design, Material Design, Liquid Glass, SwiftUI, Jetpack Compose, responsive design, platform guidelines, HIG, device-specific, watch app, TV app, car app, spatial design, AR, VR, visionOS, cross-platform, web design, CSS, breakpoints, form factors.

Complete image, video, and media UI pattern system. Covers hero images, product images, galleries, carousels, video players, audio players, avatars, thumbnails, image cropping, aspect ratios, lazy loading, responsive images, and media accessibility. Use when the user mentions: image, photo, gallery, carousel, slider, video player, audio player, avatar, thumbnail, hero image, product image, media player, image grid, lightbox, image crop, aspect ratio, responsive image, lazy loading, srcset, picture element, media pattern.

100+ full-page composition recipes showing exact block stacking order, spacing rhythm, visual pacing, and content hierarchy for every common page type. Covers landing pages, app screens, dashboards, e-commerce, auth flows, settings, profiles, and more — each with industry variants and responsive transformations. Use when the user mentions: page layout, page composition, page recipe, landing page, page structure, page template, full page design, page flow, page rhythm, block order, section order, page wireframe, complete page, page skeleton, page blueprint.

MCP integration layer for AI-powered visual design generation — Stitch MCP (UI screen generation), Fal.ai MCP (600+ models including Imagen 4, FLUX, Veo 3.1), Replicate MCP (open-source models), Recraft V3 MCP (only SVG/vector-capable model), OpenAI GPT-Image MCP, and Figma MCP (official design read/write). Covers prompt engineering for visual design output, multi-tool generation pipelines (sketch to refine to code), asset generation (icons, illustrations, photos, video), and quality control scoring for generated designs. Use when the user mentions: generate design, create mockup, AI design, generate screen, create UI, make me a design, generate icons, create illustrations, Stitch, Imagen, Veo, DALL-E, Recraft, design generation, AI mockup, generate assets, create visuals.

Professional design business templates covering proposals, case studies, pitch decks, design documentation, client handoffs, pricing calculators, project briefs, and design system documentation. Use when the user mentions: proposal, case study, pitch deck, design presentation, client handoff, design documentation, project brief, design specs, style guide, design deliverable, pricing calculator, invoice, SOW, scope of work, design portfolio, client report, design brief.

500+ curated color palettes with accessibility scores, industry categorization, and production-ready CSS/token values. Covers brand color system design, accessible palette generation using oklch, dark mode color mapping, color combination recipes, and semantic color architecture. Use when the user mentions: color palette, color scheme, brand colors, color system, accessible colors, dark mode colors, color tokens, oklch, color contrast, color combination, color harmony, complementary colors, color psychology, warm palette, cool palette, neutral palette, color picker.

Evidence-based conversion optimization patterns grounded in behavioral psychology and A/B testing research. Covers CTA design, pricing page psychology, form optimization, trust signals, social proof placement, urgency patterns, checkout optimization, onboarding conversion, and funnel analysis. Use when the user mentions: conversion rate, CTA optimization, pricing page, checkout optimization, form conversion, trust signals, social proof, A/B testing, conversion funnel, signup flow, landing page optimization, bounce rate, cart abandonment, conversion psychology.

Complete data visualization and data-dense UI design system. Covers 50+ chart types with selection criteria, dashboard composition, data table design, KPI cards, sparklines, heatmaps, treemaps, and accessible data presentation. Includes production code patterns for React (Recharts, D3, Nivo) and design tokens for dataviz. Use when the user mentions: chart, graph, data visualization, dashboard, data table, KPI, sparkline, heatmap, treemap, bar chart, line chart, pie chart, donut chart, area chart, scatter plot, dataviz, analytics UI, metrics display, data-dense, reporting UI.

Design critique methodology and real-world case studies. Structured critique frameworks (Liz Lerman, 30/60/90), product deep-dives (Stripe, Linear, Notion, Airbnb, Figma, Arc), redesign failure analysis, and actionable feedback protocols. Use when the user mentions: design critique, case study, design review session, Airbnb design, Stripe design, Notion design, Linear design, Figma design, Arc Browser, Duolingo design, product analysis, design failure, redesign failure, critique session, design feedback, design review, what went wrong, product deep dive, design principles, feedback framework.

Complete form design system covering every input type, layout pattern, validation strategy, multi-step flow, and accessibility requirement. 200+ form patterns with production React/CSS code, mobile optimization, and conversion best practices. Use when the user mentions: form design, input field, form layout, form validation, multi-step form, form wizard, login form, signup form, checkout form, contact form, search form, filter form, settings form, form accessibility, form error, form submission, form UX, form pattern.

Complete icon design systems, illustration style guides, and SVG implementation patterns. Covers icon grid systems, icon sizing, icon libraries (Lucide, Heroicons, Phosphor, SF Symbols, Material Symbols), illustration styles, SVG optimization, and accessible iconography. Use when the user mentions: icon, illustration, SVG, icon library, icon system, Lucide, Heroicons, Phosphor, SF Symbols, Material Icons, icon grid, icon size, icon design, illustration style, spot illustration, empty state illustration, svg optimization, icon accessibility, icon component.

500+ layout section/block patterns for composing production pages. Every hero, feature grid, pricing table, testimonial, CTA, footer, sidebar, stats section, team section, FAQ, comparison table, gallery, timeline, and dashboard block with exact specs, responsive behavior, spacing, and production code. Use when the user mentions: layout block, section pattern, hero section, feature section, pricing section, testimonial section, CTA block, footer pattern, sidebar layout, stats section, team section, FAQ section, comparison section, gallery section, timeline section, page section, content block, landing page section, dashboard section, card grid, masonry layout, bento grid, section design, block design, section layout.

1000+ microcopy templates for every UI component state and context. Production-ready button labels, error messages, empty states, tooltips, confirmations, success messages, onboarding text, permission requests, notification copy, placeholder text, and helper text — organized by component, tone, and industry sector. Use when the user mentions: microcopy, button text, error message, empty state text, tooltip text, placeholder text, helper text, confirmation dialog text, success message, notification text, onboarding copy, permission request text, UI writing, UX writing, copy template, label text.

Every navigation pattern with exact specs, pros/cons, use cases, and production code. Covers top nav, sidebar, bottom tabs, mega menus, breadcrumbs, command palettes, contextual navigation, and mobile navigation patterns. Complete information architecture guide. Use when the user mentions: navigation, nav bar, sidebar, menu, hamburger menu, bottom tabs, tab bar, breadcrumb, mega menu, command palette, search navigation, mobile nav, navigation pattern, site map, IA, information architecture, wayfinding, nav design.

Comprehensive responsive design patterns showing exactly how every UI block, section, and component transforms across 5+ breakpoints. Covers container queries, fluid scaling, breakpoint transformation catalogs, responsive grids, adaptive layouts, and mobile-first CSS patterns with production code. Use when the user mentions: responsive design, breakpoint, mobile layout, tablet layout, desktop layout, container query, fluid design, adaptive layout, responsive grid, media query, responsive component, mobile-first, responsive transformation, screen size, viewport, clamp, fluid type.

Comprehensive taxonomy of 25+ screen types, 15+ user flow patterns, and 25+ UI element deep-dives. Mobbin-style categorization with layout patterns, component hierarchies, state matrices, accessibility requirements, and best-in-class references for every screen, flow, and element type. Use when the user mentions: screen type, screen pattern, user flow, flow pattern, login screen, signup screen, checkout flow, onboarding flow, dashboard screen, search screen, product page, settings screen, empty state, error screen, screen builder, flow builder.

Sector-specific visual style direction for 20+ industries. Color psychology, typography norms, component conventions, spacing philosophy, motion personality, trust signals, and anti-patterns for fintech, healthcare, social, SaaS, e-commerce, education, and more. Use when the user mentions: sector style, industry style, fintech design, healthcare design, wellness design, social media design, saas design, e-commerce design, education design, style direction, visual direction, app style, brand direction, sector UX, industry patterns.

Complete elevation, shadow, depth, density, border-radius, and visual effects systems. Covers shadow scales, elevation hierarchy, glassmorphism, density modes (compact/comfortable/spacious), border-radius systems, blur effects, and modern CSS visual treatments with production code. Use when the user mentions: shadow, elevation, depth, z-index, box-shadow, density, compact mode, spacious mode, glassmorphism, blur, backdrop, border radius, rounded corners, card shadow, dropdown shadow, modal shadow, frosted glass, neumorphism, visual effects.

100+ font pairing recipes, type scale systems, and complete typography implementation guides. Covers Google Fonts, system fonts, variable fonts, fluid typography, and platform-native type stacks with production CSS. Every pairing includes display + body + mono recommendations with exact weights, sizes, and line-heights. Use when the user mentions: font pairing, typography, type scale, font combination, Google Fonts, system font, variable font, fluid type, font size, line height, letter spacing, font weight, heading font, body font, monospace font, font stack, web font, type system.

Comprehensive UI pattern taxonomy (200+ patterns across 10 categories), designer benchmark DNA (50+ world-class products analyzed), sector-specific pattern matrices (20+ industries), pattern matching engine for code and screenshot analysis, pattern evolution intelligence (2024-2026), and anti-pattern encyclopedia (100+ anti-patterns). Use when the user mentions: UI patterns, design patterns, component patterns, pattern matching, pattern analysis, pattern audit, pattern library, pattern recommendation, what pattern should I use, best practices, what does [product] do, how should this look, industry standard, anti-pattern, common mistakes, pattern quality, vibe code audit, upgrade my UI, make it look professional, match [product], pattern score, pattern benchmark.

World-class visual design intelligence — 36+ designer pattern libraries, 70 canonical design rules from 23 books, 10-dimension visual scoring framework (Awwwards-calibrated), deep color science (oklch, HCT, Dynamic Color), typography systems (variable fonts, fluid scales, optical sizing), and composition mastery (Swiss grid, golden ratio, visual weight). Use when the user mentions: visual design, make it look better, professional design, designer quality, color palette, typography, spacing, grid, layout, visual hierarchy, design score, design quality, polish, craft, aesthetic, beautiful, ugly, looks bad, looks cheap, visual direction, design system visuals, brand identity, visual identity, color theory, type scale.

UX design process methodology integrating NNG's 6-phase design thinking, top company methodologies (IDEO, Double Diamond, Google Sprint, IBM EDT, Lean UX), and the vibe coder's bridge from AI-assisted development to evidence-based UX. Grounds developers in Empathize → Define → Ideate → Prototype → Test → Implement before building. Use when the user mentions: UX process, design thinking, design methodology, vibe coding, AI-assisted design, design process, user-centered design, human-centered design, design sprint, double diamond, lean UX, UX workflow, design phases, empathize define ideate.

Comprehensive accessibility expertise covering WCAG 2.2 compliance, ARIA patterns, screen reader optimization, keyboard navigation, motor and cognitive accommodations, neurodiversity considerations, and inclusive design methodology. Use when the user mentions: accessibility, WCAG, screen reader, a11y, keyboard navigation, ARIA, inclusive design, color contrast, assistive technology.

Design patterns for agentic AI systems, multi-agent orchestration, generative UI, RAG interfaces, AI safety guardrails, trust calibration, and the paradigm shift from tool-based to agent-based interfaces. Covers AI copilot frameworks, prompt engineering UX, and AI anti-patterns. Use when the user mentions: agentic AI, AI agent, multi-agent, generative UI, RAG interface, AI guardrails, AI safety UX, AI copilot design, AI trust, AI fatigue, prompt engineering UX, LLM interface.

Design patterns for AI-native interfaces, conversational UX, spatial computing (AR/VR/MR), voice interfaces, multimodal interaction design, and emerging interaction paradigms for 2025-2030. Use when the user mentions: AI interface, voice UX, spatial design, AR/VR, conversational UI, chatbot design, mixed reality, multimodal, AI UX, spatial computing.

Calm technology principles, zero-UI patterns, ambient computing interfaces, proactive intelligence UX, screenless interaction design, and background intelligence systems. Use when the user mentions: ambient computing, calm technology, zero UI, screenless, proactive design, invisible interface, background intelligence, ambient display, calm design, glanceable, peripheral attention.

Cognitive psychology foundations for UX design — Laws of UX, Gestalt principles, cognitive biases, mental models, attention, memory, and perception science applied to interface design. Use when the user mentions: cognitive load, Fitts's Law, Hick's Law, Gestalt, Laws of UX, cognitive bias, mental model, decision fatigue, attention, memory, perception, Miller's Law, Jakob's Law, Peak-End Rule, Doherty Threshold, Von Restorff, serial position, anchoring bias, confirmation bias, choice overload, framing effect, flow state, cognitive budget.

Comprehensive internationalization and localization patterns covering RTL layouts, CSS logical properties, text expansion, date/time/number/currency formatting, cultural color semantics, Hofstede's cultural dimensions applied to UX, and cross-cultural usability testing. Use when the user mentions: internationalization, i18n, localization, l10n, RTL, right-to-left, translation, multilingual, cultural design, cross-cultural, locale, CJK, Arabic, Hebrew, text expansion, cultural UX.

Design system architecture covering design token specification (W3C standard), component library patterns, theming architecture, multi-brand systems, governance models, versioning strategy, and design-to-code integration. Use when the user mentions: design system, design tokens, component library, theming, multi-brand design, design governance, token architecture, design system scale.

Desktop and enterprise application design patterns covering data-dense interfaces, dashboard design, complex workflow management, keyboard-first interaction, multi-window patterns, and professional tool design. Use when the user mentions: desktop app, dashboard design, enterprise UX, data table design, admin panel, complex workflow, professional tool, desktop application.

Figma mastery and design-to-code workflows. Auto Layout, component architecture, variable modes, Dev Mode, Figma MCP integration, Code Connect, design token pipelines, visual regression testing, and AI-assisted design-to-code flywheel. Use when the user mentions: Figma, design tool, auto layout, Figma components, Figma variables, Figma MCP, design to code, Code Connect, Storybook, Dev Mode, Figma tokens, design handoff, design system Figma, Figma plugin, Figma prototype, design file, Figma library, design specs, design-to-code pipeline, visual regression, Chromatic, Style Dictionary, Tokens Studio.

Micro-interaction patterns, animation timing and easing curves, transition design, emotional design through motion, haptic feedback, loading state choreography, and reduced-motion accessibility support. Use when the user mentions: animation, micro-interaction, motion design, transition, loading animation, haptic feedback, easing curve, emotional design.

Mobile-first design methodology covering touch interaction patterns, gesture systems, responsive design, iOS and Android platform conventions, mobile form design, thumb-zone optimization, and performance-conscious UX. Use when the user mentions: mobile app design, responsive design, touch interface, mobile-first, iOS design, Android design, mobile form, thumb zone, mobile navigation.

Jakob Nielsen's 10 usability heuristics with modern 2025+ interpretations, evaluation methodology, and severity rating framework. Foundation for all UX evaluation work. Use when the user mentions: heuristic evaluation, usability review, UX principles, Nielsen heuristics, usability heuristics, UX audit.

Comprehensive patterns for perceived performance, loading states, skeleton screens, optimistic UI, notification systems, empty states, error states, onboarding flows, and offline-first patterns. Use when the user mentions: performance, loading, skeleton screen, optimistic UI, notification, empty state, error state, onboarding, perceived speed, toast, alert, push notification, first-run, offline, progress indicator.

Visual design mastery covering typography systems, color theory and accessible palettes, spacing and layout grids, visual hierarchy, iconography, elevation and depth, and responsive visual design across platforms. Use when the user mentions: visual design, typography, color palette, design system, spacing system, visual hierarchy, icon design, UI design, color theory.

Ethical design practices covering dark pattern identification and avoidance, persuasive vs. manipulative design, privacy-respecting UX, content strategy, UX writing, microcopy, readability optimization, and inclusive language. Use when the user mentions: dark patterns, UX ethics, content strategy, UX writing, microcopy, ethical design, privacy UX, readability, inclusive language, deceptive patterns.