A powerful tool for building scalable design systems using token-first architecture and consistent component patterns.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install design-system
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 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?
The Design System skill is a comprehensive toolkit for developers and designers to build, maintain, and scale UI foundations. It emphasizes a token-first approach, ensuring that semantic naming and three-tier architectures are implemented correctly within Openclaw Skills. By automating the structure of your design language, it eliminates hardcoded values and ensures cross-platform consistency across web, mobile, and design tools.
This skill acts as a bridge between design intent and code implementation, helping teams maintain a single source of truth for their visual language. It manages everything from spacing scales to typography, all while storing decisions locally in a structured memory format to ensure privacy and version control. By using this within the ecosystem of Openclaw Skills, developers can ensure their UI remains maintainable even as products grow in complexity.
Design System Use Cases
- Initiating a new design system from scratch with a robust, three-tier token architecture.
- Refactoring legacy hardcoded CSS into a semantic, tokenized system.
- Creating platform-agnostic UI specifications that export to CSS, Tailwind, iOS, and Android.
- Documenting design decisions and component patterns to ensure team-wide consistency and reduce onboarding time.
- Managing complex UI migrations with built-in versioning and deprecation strategies.
How Design System Works
- Initialize the environment by setting up the local storage directory and memory files for persistent context.
- Define primitive tokens such as raw hex colors and base spacing multipliers to establish the foundational palette.
- Map primitive tokens to semantic tokens like primary, danger, or muted to provide functional meaning to values.
- Develop component-level tokens that consume semantic values for specific UI elements like buttons and cards.
- Generate and organize component patterns that follow a strict, predictable API naming convention.
- Export the finalized tokens to various formats including CSS custom properties, Tailwind configurations, and Figma variables.
Design System Setup
To get started, first ensure you have the core agent environment ready. Read the setup.md file for initial integration guidelines. All your preferences and context will be stored locally in your home directory to maintain privacy within Openclaw Skills.
# Install the skill using the command line
clawhub install design-system
# Review the memory structure and setup guidelines
cd ~/design-system/
cat memory.md
Design System Data Schema & Taxonomy
The skill organizes all data within a dedicated local directory to ensure that your design decisions remain private and accessible.
| Path | Description |
|---|---|
~/design-system/memory.md |
The primary store for status, context, and historical design decisions. |
~/design-system/tokens/ |
A dedicated directory containing exported token definitions and JSON schemas. |
setup.md |
Contains the essential configuration and integration steps for first-time use. |
memory-template.md |
The standard blueprint used to maintain a consistent architecture across projects. |
Design System Advanced Features
- Automated three-tier token architecture logic (Primitive to Semantic to Component) to ensure design scalability.
- Cross-platform export capabilities for Style Dictionary, Tailwind config, and native mobile styles.
- Built-in versioning and migration support for handling breaking UI changes without disrupting the workflow in Openclaw Skills.
- Semantic naming enforcement to prevent literal value sprawl and ensure the system survives rebranding.
- Integrated anti-pattern detection to avoid common pitfalls like token explosion or premature abstraction.
SKILL.md
Loading
Related Openclaw Skills
Dermatologist
A specialized tool for organizing skin health records, tracking lesion evolution, and preparing professional summaries for dermatology consultations.
Deploy
A comprehensive framework for shipping applications reliably using modern CI/CD, rollback strategies, and zero-downtime patterns.
Deno
A comprehensive agent skill for building secure TypeScript applications using the Deno runtime while avoiding common permission and dependency pitfalls.
Delegate
A strategic task orchestration skill that routes work to sub-agents using cost-benefit analysis and tiered model selection.
Diagram
An AI-powered visualization tool for generating technical diagrams, system architectures, and workflows using Mermaid, PlantUML, and ASCII.
Dietitian
A technical AI skill for structured meal planning, precise calorie targeting, and macro-nutrient optimization based on physiological data.
Featured*
