design-system-adoption
This skill helps teams drive design system adoption by creating comprehensive strategies that span awareness, education, enablement, and incentives. It provides frameworks for measuring adoption success through production metrics and identifying common barriers like incomplete documentation or overly rigid components. Use it when launching a design system, struggling with team uptake, or needing to overcome resistance through data-driven approaches and community engagement.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/design-system-adoption && cp -r /tmp/design-system-adoption/designer-toolkit/skills/design-system-adoption ~/.claude/skills/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
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).