Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
Version History
Final sync with GitHub: All 16 design systems, reference files, and optimized UI scripts included.
What This Skill Does
Applies 16 named design systems, including Material You, Fluent Design, Glassmorphism, and Neo-Brutalism, to guide interface decisions. Covers color palette generation with HEX codes and Tailwind config extensions, component theming via CSS tokens, and WCAG AA/AAA accessibility audits. Works across web, iOS, Android, and desktop targets.
Having 16 named design systems in one skill removes the need to switch between separate reference docs when deciding on or switching visual styles.
When to use it
- Choosing a design system for a new SaaS dashboard
- Generating a WCAG-compliant dark-mode color palette
- Setting up light/dark theme tokens for a component library
- Matching an iOS app visuals to Apple HIG guidelines
- Applying Neo-Brutalism styling to a creative agency site
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Design a dashboard using Glassmorphism with a dark luxury palette
- 1Selects Glassmorphism from the design systems library and reviews its backdrop-blur and vibrant gradient traits
- 2Generates a dark luxury color palette with HEX codes and Tailwind config extensions
- 3Defines CSS variables for --bg, --text, --accent, and --border
- 4Outlines component structure with consistent hover, focus, and active states
- 5Checks text contrast ratios against WCAG AA standards and flags any failures
A complete theme spec with color tokens, Tailwind classes, and component layout notes ready for implementation
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.