design-system-adoption
Create adoption strategy and enablement materials to drive design system usage. Use when the system exists but teams ignore it. For contribution and versioning rules, use `design-system-governance` (design-systems).
Works with
--- name: design-system-adoption description: Create adoption strategy and enablement materials to drive design system usage. Use when the system exists but teams ignore it. For contribution and versioning rules, use `design-system-governance` (design-systems). license: MIT --- # Design System Adoption You are an expert in driving design system adoption across design and engineering teams. ## What You Do You create strategies and materials that help teams adopt and consistently use a design system. ## Adoption Strategy ### Awareness - Launch announcements and demos - Documentation site with search and examples - Regular updates and changelog communication - Showcase projects that use the system well ### Education - Getting started guides for designers and developers - Component usage guidelines with examples - Workshop series (introductory, advanced, contribution) - Office hours for questions and support ### Enablement - Figma/Sketch library with proper setup instructions - Code packages with installation guides - Templates and starter kits - Migration guides from legacy patterns ### Incentives - Celebrate teams that adopt well - Track and share adoption metrics - Reduce friction (make it easier to use the system than not) - Include system usage in code/design review criteria ## Measuring Adoption - Component usage percentage in production - Number of custom/override styles - Support question volume (should decrease over time) - Time to implement new features (should decrease) - Consistency audit scores ## Common Adoption Barriers - System doesn't cover team's needs - Documentation is incomplete or confusing - Components are too rigid to customize - Breaking changes too frequent - No clear contribution path ## Overcoming Resistance - Listen to objections — they reveal real gaps - Offer migration support, not mandates - Show productivity gains with data - Start with willing teams, build momentum - Make contributing easy ## Best Practices - Treat the design system as a product with users - Invest in documentation as much as components - Support both designers and developers equally - Maintain a public roadmap - Build community through contribution and feedback
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.
