design-system-creation
Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Why use this skill?
Orchestrate professional design systems with the OpenClaw design-system-creation skill. Manage color tokens, typography, and component libraries with ease.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/design-system-creationWhat This Skill Does
The design-system-creation skill provides an end-to-end framework for establishing professional-grade design systems. It acts as an orchestrator, guiding you through the critical phases of aesthetic documentation, token architecture, component structuring, and motion logic. Unlike generic UI kits, this skill emphasizes building systems with a unique 'vibe,' allowing you to move beyond standard Tailwind or Bootstrap templates. It standardizes your project by ensuring your visual identity—from the color palette and font scales to surface primitives and loading skeletons—remains consistent, scalable, and maintainable via CSS variables, TypeScript tokens, and CVA-based component development.
Installation
To integrate this tool into your workflow, run the following command in your terminal:
npx clawhub@latest install design-system-creation
Ensure you have the latest version of ClawHub installed to access the most recent architectural patterns.
Use Cases
- Establishing a new brand identity for a SaaS product from the ground up.
- Performing a comprehensive refactor of fragmented CSS/design systems in an existing codebase.
- Developing a robust component library where design tokens act as the single source of truth.
- Creating highly specialized visual themes that require bespoke typography and motion profiles.
Example Prompts
- "I'm starting a new fintech project and want a 'Magazine Financial' aesthetic. Can you help me set up the initial color tokens and typographic scale?"
- "We have a messy design system. Use the design-system-creation skill to refactor our existing button and card primitives using CVA."
- "Define a new 'Cyberpunk' theme for our dashboard including specific motion tokens for transitions and a secondary font stack for headers."
Tips & Limitations
- Documentation First: Always define the 'Vibe' and 'Emotions to Evoke' before writing code. This ensures the output reflects the intended brand.
- Consistency: Use the three-layer token system (CSS vars, Tailwind config, and TS types) to prevent 'magic values' from creeping into your components.
- Scalability: The system encourages the use of CSS variables for theming, which simplifies future changes like adding a 'dark mode' variant.
- Limitations: This skill focuses on the structural and foundational setup. It does not replace creative UI design decisions but provides the engine to implement them effectively.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-wpank-design-system-creation": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read, file-write
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.