dominikmartn

Hue — Design skill for Claude Code

Design community

open-source skill that learns any brand and turns it into a complete design system.

How to install Hue

This entry records only its repository, not the path inside it, so there is no exact command to give. Open dominikmartn/hue and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Hue does

open-source skill that learns any brand and turns it into a complete design system. works on claude code and codex. install once, every UI your assistant builds matches your brand.

Alternatives in Design

Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
CloudCLI — 8,400+ Free open-source web/mobile UI for Claude Code, Cursor CLI, and Codex 8.7k ★
Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★

README

hue

an open-source skill that learns any brand from a url, name, or screenshot and turns it into a complete design system. works on claude code and codex. install it once, and every component your ai assistant builds after that matches your brand.

see it in action: **[hueapp.io](https://hueapp.io)**

what you get

a full design language as an ai coding skill — color tokens, typography, spacing, components, light + dark mode, hero stage recipes, icon kit selection. opinionated enough that two different sessions using the generated skill produce visually consistent output.

install

claude code

git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

codex

git clone https://github.com/dominikmartn/hue ~/.agents/skills/hue

alternative codex path (cli installer compatible):

git clone https://github.com/dominikmartn/hue "${CODEX_HOME:-$HOME/.codex}/skills/hue"

then in any session say something like:

"make a design skill from cursor.com"
"create a design language inspired by raycast"
"generate a hue skill from this screenshot"

the assistant picks up the trigger and walks through the analysis.

validation

every generated skill gets gated through `scripts/validate.mjs` before it ships:

node scripts/validate.mjs

it checks yaml syntax, orphan css selectors, undefined `var(--token)` usages, leftover placeholders, em-dashes, the SKILL.md frontmatter contract, wcag contrast on the core text/background pairs, and ai-default display fonts. exit code 1 on any error.

examples

seventeen brands live in `examples/` showing the range of output hue produces. sixteen are fictional one-shots, one is real (meadow ↦ the mymind-design skill).

brand	character
atlas	ivory engineering, classical maritime charts
auris	premium audio, monochrome dark
drift	hot pink fashion commerce
fizz	y2k pop photo-sharing, candy chrome
halcyon	cool teal