Agent skill · design visual · sundial-org
theme-gen
Generate a complete design system from brand colors using AI. Use when starting a new project or standardizing colors.
Why this skill is useful
Generates a complete design system with semantic tokens and shade scales that the AI wouldn't reliably create on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
Theme Generator Give it your brand colors. Get back a complete design system with semantic tokens, shade scales, and ready-to-use CSS variables or Tailwind config. Stop manually picking 9 shades of blue. One command. Zero config. Just works. Quick Start What It Does Generates full color shade scales from your base colors (50 through 950) Creates semantic tokens like success, warning, error, info Outputs CSS custom properties, Tailwind config, or both Ensures accessible contrast ratios between foreground and background Builds consistent spacing and typography scales Usage Examples Best Practices Start with your hero color - The primary color sets the tone. Get that right first Don't fight the generated scales - They're mathematically balanced. Trust the output Test in context - Paste the variables into your project and see how they look on real UI Customize after generating - Use this as a starting point, then tweak individual shades When to Use This Starting a new project and need a color system fast Client gave you one brand color and expects a full palette Converting a messy codebase to consistent design tokens Exploring color options during early design phases Part of the LXGIC Dev Toolkit This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work. Find more: GitHub: https://github.com/LXGIC-Studios Twitter: https://x.com/lxgicstudios Substack: https://lxgicstudios.substack.com Website: https://lxgic.dev Requirements No install needed. Just run with npx. Node.js 18+ recommended. How It Works The tool takes your base colors and uses color theory principles to generate harmonious shade scales. It calculates luminance values to ensure each step in the scale has proper contrast, then maps these to semantic purposes like backgrounds, text, and interactive states. License MIT. Free forever. Use it however you want.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/theme-gen