design-system-generator
Generate design systems and theme variations. Creates cohesive visual systems with color schemes, typography, and component styling.
Works with
--- name: design-system-generator description: Generate design systems and theme variations. Creates cohesive visual systems with color schemes, typography, and component styling. license: Apache-2.0 --- # Theme Factory Skill This skill provides a curated collection of professional font and color themes themes, each with carefully selected color palettes and font pairings. Once a theme is chosen, it can be applied to any artifact. ## Purpose To apply consistent, professional styling to presentation slide decks, use this skill. Each theme includes: - A cohesive color palette with hex codes - Complementary font pairings for headers and body text - A distinct visual identity suitable for different contexts and audiences ## Usage Instructions To apply styling to a slide deck or other artifact: 1. **Show the theme showcase**: Display the `theme-showcase.pdf` file to allow users to see all available themes visually. Do not make any modifications to it; simply show the file for viewing. 2. **Ask for their choice**: Ask which theme to apply to the deck 3. **Wait for selection**: Get explicit confirmation about the chosen theme 4. **Apply the theme**: Once a theme has been chosen, apply the selected theme's colors and fonts to the deck/artifact ## Themes Available The following 10 themes are available, each showcased in `theme-showcase.pdf`: 1. **Ocean Depths** - Professional and calming maritime theme 2. **Sunset Boulevard** - Warm and vibrant sunset colors 3. **Forest Canopy** - Natural and grounded earth tones 4. **Modern Minimalist** - Clean and contemporary grayscale 5. **Golden Hour** - Rich and warm autumnal palette 6. **Arctic Frost** - Cool and crisp winter-inspired theme 7. **Desert Rose** - Soft and sophisticated dusty tones 8. **Tech Innovation** - Bold and modern tech aesthetic 9. **Botanical Garden** - Fresh and organic garden colors 10. **Midnight Galaxy** - Dramatic and cosmic deep tones ## Theme Details Each theme is defined in the `themes/` directory with complete specifications including: - Cohesive color palette with hex codes - Complementary font pairings for headers and body text - Distinct visual identity suitable for different contexts and audiences ## Application Process After a preferred theme is selected: 1. Read the corresponding theme file from the `themes/` directory 2. Apply the specified colors and fonts consistently throughout the deck 3. Ensure proper contrast and readability 4. Maintain the theme's visual identity across all slides ## Create your Own Theme To handle cases where none of the existing themes work for an artifact, create a custom theme. Based on provided inputs, generate a new theme similar to the ones above. Give the theme a similar name describing what the font/color combinations represent. Use any basic description provided to choose appropriate colors/fonts. After generating the theme, show it for review and verification. Following that, apply the theme as described above.
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.

