Design System

What This Skill Does

The Design System skill is a powerful framework for engineers and designers to build, scale, and maintain cohesive design systems. It acts as an expert architect that manages the entire lifecycle of design tokens, component patterns, and documentation. By centralizing logic in ~/design-system/, the agent ensures that every component is built on top of a robust, semantic foundation rather than ad-hoc, hardcoded values. This skill enforces the 'Tokens First, Components Second' mantra, providing a structured approach to building platform-agnostic design systems that integrate seamlessly across web, iOS, and Android.

Installation

To integrate this skill into your environment, use the OpenClaw command line interface: clawhub install openclaw/skills/skills/ivangdavila/design-system Once installed, ensure you initialize your environment by reading the provided setup.md and setting up your local ~/design-system/ directory using the memory-template.md as your starting point.

Use Cases

• Establishing a new multi-platform design system from scratch.
• Migrating existing disjointed UI codebases into a semantic token-based architecture.
• Creating documentation for existing design patterns to prevent 're-invention' of UI elements.
• Standardizing component props and design tokens across large engineering teams.
• Managing dark mode and theme transitions through unified semantic aliases.

Example Prompts

1. "Initialize a new design system structure in my ~/design-system/ directory and help me define a base 4px spacing scale."
2. "Review my current color palette and help me convert these raw hex values into a three-tier token architecture (Primitive -> Semantic -> Component)."
3. "Create a documentation template for a new Button component that includes variants, sizes, and a 'When NOT to use' section."

Tips & Limitations

• Follow the Three-Tier Architecture: Never reference raw primitive values directly in components; always bridge them through semantic tokens to ensure your system survives future rebrands.
• Avoid premature abstraction: Only extract a component when you have at least three instances of a pattern.
• Always document the 'Why': The context behind a design decision is as important as the code itself.
• Limit token explosion: Keep your grayscale and spacing scales tight to avoid maintenance overhead.
• Use consistent prop naming: Stick to the standard size (sm, md, lg) and variant (primary, secondary, ghost) nomenclature to reduce team friction.