An AI-driven CLI tool that transforms brand colors into fully functional, accessible design systems and CSS variables.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install theme-gen
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 theme-gen 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 Theme Generator?
Theme Generator is a high-performance utility designed to eliminate the manual labor of color scale creation within the Openclaw Skills ecosystem. By providing just a primary brand color, developers can instantly generate a complete design system featuring semantic tokens, 50-950 shade scales, and mathematically balanced palettes. This tool ensures that every generated color maintains accessibility and visual harmony across modern web applications.
Built for developers who value speed and consistency, this skill bridges the gap between raw brand assets and production-ready code. It automates the tedious process of picking nine shades for every color, allowing teams to focus on building features rather than tweaking HEX codes. As part of the Openclaw Skills collection, it provides a seamless workflow for standardizing design tokens across any project architecture.
Theme Generator Use Cases
- Starting a new web project and requiring an immediate, robust color system.
- Expanding a single client-provided brand color into a full, production-ready design palette.
- Standardizing legacy codebases by migrating inconsistent colors to unified design tokens.
- Rapidly prototyping UI variations during early design and discovery phases.
How Theme Generator Works
- The user provides base HEX colors via the CLI interface supported by Openclaw Skills.
- The engine applies advanced color theory and luminance calculations to generate harmonious shade scales from 50 to 950.
- Semantic roles such as success, warning, error, and info are automatically mapped based on the provided primary and secondary inputs.
- The system validates contrast ratios to ensure all color combinations meet modern accessibility standards.
- The finalized design system is exported as CSS custom properties, a Tailwind configuration, or a standalone file.
Theme Generator Setup
Theme Generator requires Node.js 18 or higher. You can execute the tool directly without a global installation using the following command within the Openclaw Skills environment:
npx ai-theme --primary "#3B82F6" --secondary "#10B981"
To see all available flags for customization, run:
npx ai-theme --help
Theme Generator Data Schema & Taxonomy
| Component | Details | Output Format |
|---|---|---|
| Shade Scales | 10-step scales (50-950) | CSS Variables / Tailwind |
| Semantic Tokens | Mapping for success, error, warning, info | CSS Properties |
| Design Tokens | Spacing and typography scale definitions | JSON / CSS |
| Accessibility | Contrast-compliant foreground/background pairs | Metadata / Code |
Theme Generator Advanced Features
- Multi-format support allowing simultaneous export to CSS and Tailwind CSS configurations.
- Automated dark mode variant generation for all semantic tokens and shade scales.
- Custom file output paths for direct integration into existing asset pipelines using Openclaw Skills.
- Precise luminance-based scaling to ensure consistent visual weight across different hues.
SKILL.md
Loading
Related Openclaw Skills
Test Writer
Automatically generate production-ready unit tests with real assertions by analyzing your source code logic.
test-gen
An AI-driven CLI tool that automatically generates comprehensive unit tests for your source code to improve coverage and reliability.
Terraform Generator
An AI-powered CLI tool that converts natural language infrastructure descriptions into structured Terraform configuration files.
Tailwind Config Generator
Automatically transform your brand hex codes into a fully-featured Tailwind CSS configuration file including full shade ranges and semantic colors.
TSConfig Generator
An intelligent CLI tool that generates perfectly tailored tsconfig.json files based on your specific project description.
JSON to TypeScript
A streamlined developer tool that instantly converts JSON objects and API payloads into clean, production-ready TypeScript interfaces.
Featured*
