design-systemsDeep design systems workflow—tokens, components, accessibility, documentation, governance, and adoption. Use when scaling UI consistency across teams or evol...
Install via ClawdBot CLI:
clawdbot install mikeclaw007/design-systemsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated May 6, 2026
A large organization with multiple product teams using disparate design patterns adopts a design system to unify visual language and component behavior. This reduces redundancy and ensures a cohesive user experience across all applications.
A company facing accessibility compliance issues (e.g., WCAG) uses the design system workflow to audit and remediate components systematically. Tokens and accessible patterns are integrated into the UI library.
A design team finds that Figma mockups and production code have diverged significantly. The workflow re-establishes synchronization by aligning tokens and component implementations, with a regular sync cadence.
A fast-growing startup launching multiple features simultaneously uses the workflow to bootstrap a lightweight design system starting with tokens and a few primitives, enabling rapid but consistent development.
A company undergoing a brand refresh leverages the design system workflow to update tokens (colors, typography, spacing) and propagate changes across all components and documentation, ensuring brand consistency.
An agency offers end-to-end design system creation and maintenance, including token definition, component library build, documentation, and governance setup. Clients pay a recurring fee for updates and support.
Consultants provide workshops and strategic guidance for in-house teams to build their own design systems. Revenue comes from project-based fees for assessments, training, and staged delivery.
A platform offering tools for token management, component documentation, and versioning, integrated with Figma and GitHub. Revenue through monthly or annual subscription tiers.
💬 Integration Tip
Start with small, high-impact tokens and a few primitive components to build momentum; establish a cross-functional team with a design system advocate early.
Scored May 6, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.