design-system-generator
Design system generator that matches natural language descriptions to design trends. Expert in Swiss Modern, Neobrutalism, Glassmorphism, and 20+ other design trends. Includes trend matching
Works with
--- name: design-system-generator description: Design system generator that matches natural language descriptions to design trends. Expert in Swiss Modern, Neobrutalism, Glassmorphism, and 20+ other design trends. Includes trend matching license: MIT --- # Design System Generator Design system generator that matches natural language descriptions to design trends. Expert in Swiss Modern, Neobrutalism, Glassmorphism, and 20+ other design trends. Includes trend matching scripts and comprehensive design pattern library. ## When to Use This Skill **Activate on:** - "design system", "design trends", "trend matcher" - "Swiss Modern", "Neobrutalism", "Glassmorphism" - "match design style", "design trend recommendation" - "component library trends", "modern design patterns" **NOT for:** - Implementing individual components → `design-system-creator` - Dark mode specifically → `dark-mode-design-expert` - Typography only → `typography-expert` - Accessibility auditing → `color-contrast-auditor` ## Core Capabilities This skill provides a trend matching script that maps natural language descriptions to specific design trends including: - Swiss Modern (clean, minimal, professional) - Neobrutalism (bold, stark, dramatic) - Glassmorphism (transparent, frosted glass) - Neumorphism (soft, tactile, raised) - Dark Mode (night mode, OLED optimized) - Hyperminimalism (essential, calm, zen) - Maximalism (vibrant, colorful, rich) - Cyberpunk (neon, futuristic, gaming) - Retrofuturism (vintage sci-fi, arcade) - 3D Immersive (WebGL, AR, interactive) - Motion Design (animated, micro-interactions) - Bold Typography (oversized, kinetic) - Collage (scrapbook, artistic) - Sustainable Design (ethical, accessible) - Claymorphism (soft, rounded, playful) - Terminal Aesthetic (monospace, CLI) - Web3/Crypto (gradient, blockchain) - Botanical/Organic (natural, earthy) ## Usage Run the trend matcher script: ```bash npx ts-node scripts/match-trend.ts "description of desired design" ``` The script will analyze the description and return the best matching design trend with a score and matched keywords.
More Design Systems skills
stitch-design-taste
leonxlnx/taste-skill
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
figma
heygen-com/hyperframes
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
image
coreyhaines31/marketingskills
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
