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

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 <path-to-generated-skill-folder>

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 sculptural glass
kiln	dark fired earth, molten terracotta
ledger	newsprint editorial, financial broadsheet
meadow	warm cream editorial (real, from mymind-design)
orivion	luminous red-violet glow
oxide	brutalist mono compute protocol
prism	cyberpunk holographic shader engine
relay	swiss transit, departure board precision
ridge	slate emerald dev platform
solvent	warm amber generative shader
stint	muted violet productivity
thrive	sage green wellness, light mode
velvet	noir editorial fragrance house

each has a design-model.yaml + landing-page.html. ridge and stint also ship an app-screen.html. halcyon ships a full component-library.html. open them in a browser to see the system rendered.

license

MIT. fork it, remix it, build your own.