How do I install the Theme Gen skill?

Run npx skillmds@latest add lxgicstudios/theme-gen in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Theme Gen skill do?

Generate complete design system from brand colors. Use when building design tokens. It is listed under Design & Media on SkillMD.

Is Theme Gen safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Theme Gen?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Theme Gen free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Theme Gen?

lxgicstudios (@lxgicstudios) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Theme Gen by lxgicstudios — Agent Skill

Name: Theme Gen
Author: lxgicstudios

File contents

Theme Generator

You have two brand colors and need a complete design system. This generates colors, typography, spacing, shadows, and more.

One command. Zero config. Just works.

Quick Start

npx ai-theme "#FF4500" "#1A1A2E"

What It Does

Takes your brand colors
Generates complete color palette
Creates typography scale
Includes spacing, shadows, borders

Usage Examples

# Generate CSS custom properties
npx ai-theme "#FF4500" "#1A1A2E"

# Tailwind config format
npx ai-theme "#FF4500" "#1A1A2E" -f tailwind

# JSON tokens
npx ai-theme "#FF4500" "#1A1A2E" -f json -o tokens.json

Best Practices

Start with brand colors - everything else derives from them
Use consistent scales - 4px base works well
Test in context - tokens alone don't show the full picture
Document decisions - why these specific values

When to Use This

Starting a new design system
Implementing brand guidelines
Creating design tokens
Standardizing across projects

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://lxgicstudios.com

Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

npx ai-theme --help

How It Works

Takes your brand colors and generates a complete design token set. Creates harmonious color relationships, type scales, and spacing systems that work together.

License

MIT. Free forever. Use it however you want.

Frequently asked questions

Theme Gen