design-system-architect
CommunityBuild scalable design systems with Atomic Design.
Authoranton-abyzov
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill simplifies the complex process of creating a consistent and reusable design system from scratch, ensuring proper definition of design tokens, component hierarchy, and accessibility standards.
Core Features & Use Cases
- Design Token Definition: Guides the creation of comprehensive design tokens for colors, typography, spacing, shadows, and borders.
- Atomic Design Hierarchy: Structures components into atoms, molecules, and organisms for maximum reusability and scalability.
- Accessibility Checklist: Ensures all components meet WCAG 2.1 AA compliance, including ARIA labels, keyboard navigation, and color contrast.
- Use Case: Define your brand's visual language by generating a structured design token system and a component library that adheres to Atomic Design principles, ready for seamless frontend development.
Quick Start
Define a design system for my new web application, focusing on colors and typography
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-system-architect Download link: https://github.com/anton-abyzov/specweave/archive/main.zip#design-system-architect Please download this .zip file, extract it, and install it in the .claude/skills/ directory.