design-systemBuild design systems with tokens, components, and documentation that scale across teams and products.
Install via ClawdBot CLI:
clawdbot install ivangdavila/design-systemOn first use, read setup.md for integration guidelines. All preferences are stored in ~/design-system/memory.md.
User needs to create, maintain, or extend a design system. Agent handles token architecture, component patterns, documentation structure, and cross-platform consistency.
Memory lives in ~/design-system/. See memory-template.md for structure.
~/design-system/
├── memory.md # Status + context + decisions
└── tokens/ # Token definitions if exported| Topic | File |
|-------|------|
| Setup process | setup.md |
| Memory template | memory-template.md |
Design tokens are the foundation. Before building any component:
Components consume tokens. Never hardcode values.
| Bad | Good |
|-----|------|
| blue-500 | primary |
| 14px | text-sm |
| 8px | space-2 |
Semantic names survive rebrand. Literal names break everything.
Primitive → Semantic → Component
↓ ↓ ↓
gray-900 text-primary button-textEvery token and component needs:
Design tokens should export to:
One source, many outputs. Use Style Dictionary or similar.
All components follow the same patterns:
variant, size, disabled)sm, md, lg)primary, secondary, ghost)Predictability beats cleverness.
Breaking changes need:
Data that stays local:
This skill does NOT:
Install with clawhub install if user confirms:
css — Styling fundamentalstailwindcss — Utility-first CSSfrontend — Frontend developmentui — User interface patternsdesign — Design principlesclawhub star design-systemclawhub syncGenerated Mar 1, 2026
A tech startup is rebranding and needs to update its design system across web and mobile apps. The skill helps define semantic tokens for new colors and typography, ensuring consistency and easy future updates without hardcoded values.
A large enterprise is migrating from legacy design patterns to a unified system. The skill assists in creating a three-tier token architecture and documentation to guide multiple teams, preventing fragmentation and reducing maintenance costs.
An e-commerce company is adding new product lines and needs to extend its design system with new components like product cards and buttons. The skill enforces API consistency and token-first principles to scale efficiently across marketing sites and apps.
A design agency is building a custom design system for a client in the healthcare sector. The skill helps document decisions and export tokens to multiple platforms (CSS, iOS, Android), ensuring compliance and cross-team collaboration.
A developer community is creating an open-source UI library. The skill guides versioning, migration strategies, and component patterns to maintain quality and avoid prop sprawl as the library grows.
Companies building software-as-a-service products use this skill to maintain consistent user interfaces across features and updates. It reduces design debt and speeds up development, leading to higher customer retention and lower support costs.
Design and development agencies leverage this skill to deliver scalable design systems for clients. It standardizes workflows, improves project efficiency, and allows for reusable assets across multiple client engagements.
Large organizations adopt this skill internally to unify design across departments and products. It cuts down on redundant work, ensures brand compliance, and facilitates training for new teams, optimizing operational costs.
💬 Integration Tip
Start by reading setup.md and use the memory template to document decisions early; this ensures token architecture is solid before component development.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptional—portfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.