A comprehensive workflow for architecting distinctive, token-driven design systems from aesthetic foundation to component implementation.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install design-system-creation
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install design-system-creation using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Design System Creation?
This skill orchestrates the entire lifecycle of building a professional-grade UI framework. By using this Openclaw Skills module, developers can move beyond generic templates to create highly customized visual identities. The workflow emphasizes vibes before code, ensuring that the aesthetic foundation is documented before generating CSS variables, Tailwind configurations, and TypeScript tokens. It provides a robust architecture for surfaces, typography, and motion, ensuring visual consistency across the entire application while maintaining high performance and developer experience.
Design System Creation Use Cases
- Starting a new digital product that requires a unique and distinctive brand identity.
- Refactoring legacy CSS or scattered styles into a centralized, modern design token system.
- Building a scalable component library using React, Tailwind, and Class Variance Authority (CVA).
- Establishing consistent motion, animation, and loading patterns across a large-scale project.
How Design System Creation Works
- Document the Aesthetic Foundation to define the visual feel, inspirations, and emotional goals before writing any code.
- Architect a three-layer Color Token System involving CSS variables as the source of truth, Tailwind configuration for utilities, and optional TypeScript tokens.
- Define the Typography System, including font stacks, fluid scales, and specific utility patterns for labels and metrics.
- Build Surface Components using layered primitives and variant systems to handle complex UI states like glass panels and tiles.
- Integrate Motion Tokens to define consistent animation timings, keyframes, and transitions.
- Create Loading States and skeleton patterns that perfectly match the established aesthetic to ensure a polished user experience.
Design System Creation Setup
Install the skill using the following command:
npx clawhub@latest install design-system-creation
Design System Creation Data Schema & Taxonomy
The skill organizes design assets and code into a structured directory for maximum maintainability:
| Path | Description |
|---|---|
styles/globals.css |
Core CSS variables, root tokens, and base styles |
styles/design-tokens.ts |
TypeScript exports for type-safe theme consumption |
styles/theme.css |
Specialized component patterns and custom utilities |
tailwind.config.ts |
Main integration point for design tokens and animation keyframes |
components/ui/ |
Directory containing primitive components like Surface and Skeleton |
Design System Creation Advanced Features
- Multi-layer token architecture that synchronizes CSS variables with Tailwind and TypeScript.
- Variant-based component orchestration using CVA (Class Variance Authority) for clean, scalable code.
- Pre-defined aesthetic directions such as Retro-futuristic, Warm Cyberpunk, and Magazine Financial themes.
- Integrated motion system for unified animation behaviors like pulse-glow and shimmer effects.
- Robust anti-pattern protection to ensure design consistency and prevent common UI mistakes.
SKILL.md
Loading
Related Openclaw Skills
Design System Components
A standardized framework for building reusable, type-safe UI components using Surface primitives and class-variance-authority.
Design Integration (Uniswap)
An AI-driven architectural designer that generates comprehensive blueprints for Uniswap protocol integrations.
Design Hook (Uniswap V4)
A specialized skill for architecting Uniswap V4 hooks, focusing on callback logic, state management, and security design without generating code.
Deploy Agent Token
Automate the end-to-end lifecycle of launching ERC-20 tokens on Uniswap V4 with enterprise-grade security hooks and liquidity management.
Design System Patterns
A foundational skill for architecting scalable design systems through multi-layer token hierarchies, automated pipelines, and robust theming infrastructure.
Distinctive Design Systems
A specialized skill for engineering design systems that prioritize unique brand personality through structured tokens, layered surfaces, and evocative aesthetics.
Featured*
