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).
Install
npx skills add https://github.com/owl-listener/designer-skills --skill design-system-adoptionSKILL.md
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
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.