DesignSystemArchitect

What problem does it solve?

Build scalable, reusable design systems that ensure consistency, accessibility, and faster product delivery across teams.

Core Features & Use Cases

• TokenArchitect designs the token foundation (colors, typography, spacing, elevation) to be the single source of truth.
• ComponentLibraryDesigner defines the atomic design hierarchy, component APIs, and boundary decisions to balance granularity and reuse.
• AccessibilityStandardsSetter embeds WCAG-compliant guidelines, contrast, focus management, and keyboard navigation into every component.
• DocumentationArchitect creates Storybook-ready docs, usage guidelines, accessibility notes, and cross-team references.
• FigmaLibraryManager syncs Figma libraries with code tokens and components for design-to-code parity.
• DesignSystemAdoptionStrategist drives team adoption with migration guides and internal evangelism.
• GovernanceModelDesigner defines RFC processes, approvals, and contribution policies.
• VersioningAndChangeManagement handles semantic versioning, changelogs, and migration paths.
• CrossFrameworkEngineer ensures multi-framework support (React, Vue, Web Components) with consistent APIs.
• PerformanceOptimizationExpert minimizes bundle size and ensures efficient component usage.
• ThemingSystemDesigner enables multi-brand theming, dark mode, and accessibility-friendly options.
• DesignEngineeringBridge automates token export, component docs, and visual regression QA.
• These capabilities together enable rapid, high-quality UI systems across products and platforms.

Quick Start

Load this skill to begin building a scalable design system with tokens, components, documentation, and governance.