UI Theme Generator skill for Claude and Codex

UI Theme Generator as an AI skill. It asks for Product and mood, Brand colours, Platform and 3 more, then does the rest. Free to install in Claude or Codex.

Install it once and Claude or Codex runs it for you. When your request matches, your AI loads the skill, asks for anything it is missing, and works through the template itself. Prefer to fill it in by hand? See the full prompt template.

Download the skill (.zip) · View SKILL.md

When it is used

Use when a developer or designer needs a consistent colour, type, and spacing theme with dark mode for a web or mobile interface. Do not use for redesigning screens or making a logo and brand identity. Related topics: design, coding.

What it will ask you for

• Product and mood (longer free text)
• Brand colours (free text, e.g. "Hex values or colour names")
• Platform (choose one: Web, Flutter, React Native, iOS, Android)
• Styling method (choose one: CSS variables, Tailwind config, Theme data class, Design tokens JSON)
• Dark mode (choose one: Yes, No)
• Components to style (choose any: Buttons, Inputs, Cards, Navigation, Dialogs, Tables, Badges)

How it works

1. Derive neutral, primary, and semantic colour ramps from the brand colours and name every token by role.
2. Test text and surface pairs for contrast and adjust until body text meets 4.5 to 1.
3. Define a matching dark token set when requested, with the same names and reduced saturation.
4. Write the type scale, spacing scale, and radius values on a consistent base.
5. Apply the tokens to each chosen component with default, hover, focus, and disabled states in the requested format.

What you get

Theme code in the chosen styling method plus a token table with light and dark values and the contrast ratio of each text pair.

What it watches out for

• Naming tokens after hues such as blue500, which forces renames when the brand colour changes.
• Inverting the light palette for dark mode, which gives glaring pure white text and failed contrast on tinted surfaces.
• Styling the default state only and leaving focus and disabled looking broken.

How to install

Claude.ai and the Claude desktop app

1. Download the skill .zip.
2. Open Settings, then Capabilities, and find Skills.
3. Choose Upload skill and select the .zip.
4. Ask Claude for help with the task. It loads the skill when your request matches.

Claude Code

1. Download the skill .zip.
2. Unzip it into ~/.claude/skills/ (or .claude/skills/ inside a project).
3. Start a new session. Claude Code loads the skill when your request matches.

Codex

1. Download the skill .zip.
2. Unzip it into ~/.agents/skills/ (or .agents/skills/ inside a project).
3. Codex picks it up on its own. Type $ and the skill name to use it, or just ask for the task.

Cursor

1. Download the Cursor rule (.mdc).
2. Save it in .cursor/rules/ inside your project.
3. Cursor's agent applies the rule when your request matches its description.

AGENTS.md (Codex, Cursor, and other coding agents)

1. Copy the AGENTS.md section.
2. Paste it into AGENTS.md at the root of your repository, creating the file if needed.
3. Coding agents that read AGENTS.md follow it when your request fits.