🔓 unclaimed — this page was auto-generated from GitHub. Are you the creator?
Claim this page →
hue
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 bui…
git clone https://github.com/dominikmartn/hue
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.
// compatibility
| Platforms | cli, web |
|---|---|
| Operating systems | — |
| AI compatibility | claude |
| License | MIT |
| Pricing | open-source |
| Language | JavaScript |
// faq
What is hue?
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.. It is open-source on GitHub.
Is hue free to use?
hue is open-source under the MIT license, so it is free to use.
What category does hue belong to?
hue is listed under skills in the Claudeers registry of Claude-compatible tools.
// embed badge
[](https://claudeers.com/hue)
// retro hit counter
[](https://claudeers.com/hue)
// reviews
// guestbook
// related in Claude Skills
🔓An agentic skills framework & software development methodology that works.
🔓
🔓💫 Toolkit to help you get started with Spec-Driven Development
🔓AI coding assistant skill (Claude Code, Codex, OpenCode, Cursor, Gemini CLI, and more). Turn any folder of code, SQL schemas, R scripts, shell scripts, docs,…