theme-gen

What This Skill Does

The theme-gen skill is an intelligent design system generator that automates the tedious process of crafting color palettes and semantic tokens. Instead of manually tweaking hexadecimal codes to achieve accessible contrast, theme-gen analyzes your base brand colors to construct mathematically balanced shade scales (50-950). It automatically handles the generation of semantic tokens for success, error, warning, and info states, ensuring that your UI remains accessible and consistent. Whether you are building from scratch or refactoring a legacy codebase, this tool transforms a single primary color into a full design system. It supports direct output for CSS custom properties or Tailwind configuration files, streamlining the transition from design intent to code.

Installation

To integrate this skill into your environment, use the OpenClaw CLI to install the package from the official source repository:

clawhub install openclaw/skills/skills/lxgicstudios/theme-gen

Ensure you have Node.js 18 or higher installed on your system. No further global installation or complex configuration is required, as the skill utilizes npx for seamless execution.

Use Cases

This tool is ideal for developers who need to rapidly prototype new projects or standardize disparate styles in an existing application. It is particularly valuable when a client provides only a single brand color, as it removes the "guesswork" of creating a full palette. Furthermore, it acts as a perfect migration assistant when converting messy, hard-coded color styles into a centralized design token system. It also serves as an excellent exploration tool during early design phases, allowing for quick iterations on theme variations, including automatic generation of dark mode alternatives.

Example Prompts

1. "Generate a full design system for my new app using primary color #6366F1 and export it to tailwind.config.js."
2. "Create a professional color palette using #3B82F6 as the primary and #10B981 as the secondary, including dark mode variants."
3. "Refactor my current theme; generate a complete color scale based on primary color #8B5CF6 and save the output as theme.css in my project root."

Tips & Limitations

To get the best results, start by selecting your hero color carefully, as it will anchor the entire scale. While the generated scales are mathematically sound, treat the output as a starting point. Feel free to manually adjust individual shades to better match your specific brand identity if the automatic contrast ratios feel too clinical. Remember that while this tool provides structural consistency, it does not replace the need for human UI/UX review of the final layout. Trust the underlying logic of the generated tokens, but always test them in your actual UI components to ensure they harmonize with your specific font choices and spacing requirements.