hue: Generate a Brand Design System from a URL or Screenshot Inside Claude Code

Brand Consistency in AI-Generated UIs

When a coding assistant like Claude Code or Codex builds a UI component without brand instructions, it draws on defaults from its training data. Two sessions on the same codebase can produce components with different font choices, mismatched color scales, and inconsistent spacing. For an individual developer shipping a product with a specific visual identity, that inconsistency accumulates into a maintenance problem.

hue addresses this by packaging brand analysis as a skill file that the assistant reads at the start of each session. You install the skill once, then tell the assistant your brand source. From that point, component output respects the brand's color tokens, typography scale, spacing, and mode variants. The README describes this as the design language being "opinionated enough that two different sessions using the generated skill produce visually consistent output."

The primary audience is frontend developers and designers working primarily through an AI assistant who want brand coherence without a dedicated design system team.

Prompt-Driven Analysis: How hue Extracts a Brand

hue does not run a headless browser or scrape a website at install time. According to the README, the analysis happens at prompt time: you tell the assistant the brand source in natural language, the SKILL.md file provides the extraction protocol and output contract, and the assistant performs the analysis during that session.

The inputs are a URL (such as a product's homepage), a company or brand name, or a screenshot. The output is a folder containing a design-model.yaml and one or more HTML demonstration files. The design model captures the palette, type scale, spacing decisions, hero stage configurations, and icon kit selection. It does not capture live page markup or CSS; it captures the abstract visual decisions the assistant infers from the source material.

This architecture means the output quality depends on how much brand signal the assistant can extract from the input. A well-developed brand with a publicly accessible website gives more material to work with than a brand with no web presence. The README does not document an intermediate quality tier or what to do when the source material is sparse.

Installing hue on Claude Code or Codex

Installation is a single git clone command. For Claude Code, the target is the skills subdirectory of the Claude configuration folder:

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

For Codex, the target is the agents skills directory:

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

If you use the Codex CLI installer, an alternative path handles the CODEX_HOME environment variable:

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

After cloning, open a new session in your assistant. No configuration file changes are needed. To generate a design skill, describe the brand source in the session. The README gives three example prompts: "make a design skill from cursor.com", "create a design language inspired by raycast", and "generate a hue skill from this screenshot". The assistant picks up the trigger phrase and walks through the analysis, producing a skill folder you can load in subsequent sessions.

The only runtime dependency the README mentions for the validation step is Node.js, required by scripts/validate.mjs.

What a Generated Skill Contains

Each skill folder the assistant produces covers color tokens, typography, spacing, component definitions, light and dark mode support, hero stage recipes, and an icon kit selection. These are encoded in a design-model.yaml that serves as the source of truth for the HTML demonstration files.

The repository ships seventeen example skills in examples/, sixteen fictional and one real. The real one is meadow, built from the mymind-design project. The range of fictional examples illustrates what hue can produce from different aesthetic directions: atlas is ivory engineering with a classical maritime character, oxide takes a brutalist mono compute protocol direction, prism covers a cyberpunk holographic shader engine aesthetic, and relay follows Swiss transit and departure-board precision.

Each example includes a design-model.yaml and a landing-page.html you can open directly in a browser. ridge and stint also include an app-screen.html. halcyon ships a full component-library.html, which is the most complete demonstration of what a generated design system looks like applied to real interface elements. Reviewing these files before generating your own skill gives a concrete baseline for what to expect.

The repository's top-level layout also includes a docs/ and references/ directory alongside SKILL.md. The README does not describe their contents, so what guidance they provide beyond the README itself is not documented.

The Validation Gate: What scripts/validate.mjs Catches

hue includes a Node.js validator at scripts/validate.mjs that checks a generated skill folder before it ships:

node scripts/validate.mjs <path-to-generated-skill-folder>

The validator checks YAML syntax, orphan CSS selectors, undefined var(--token) usages, leftover placeholder text, em-dashes, the SKILL.md frontmatter contract, WCAG contrast ratios on core text-background pairs, and AI-default display fonts. It exits with code 1 on any error.

The WCAG contrast check is the most consequential step. An AI assistant extracting colors from a brand source can produce low-contrast pairs that look plausible on some screens but fail accessibility standards. Without a validator, those errors pass silently. The exit code 1 behavior makes it straightforward to use as a CI gate on a repository that stores generated brand skills, or as a pre-commit hook.

The validator does not check whether the brand analysis is accurate to the source material, only that the output is structurally and technically valid.

Where hue Falls Short

The most significant limitation is the absence of an update workflow. The README documents how to generate a skill from a brand source, but it does not describe how to refresh a skill when a brand's visual identity changes. There is no diff mode, no incremental update, and no way to see what changed between two versions of a generated skill. You regenerate from scratch and revalidate.

The tool is also scoped to brands with accessible visual material. A brand with no web presence and no reference screenshot gives the AI assistant little to extract. The README names URL, name, and screenshot as inputs, but it does not document what the assistant does when those inputs are ambiguous or low-quality.

A traditional alternative for design token management is Style Dictionary, an open-source tool from Amazon. Style Dictionary compiles a designer-authored token source in JSON or YAML to CSS custom properties, Swift, Kotlin, and other platform targets. It requires a human to author and maintain the token file; hue generates the equivalent from brand analysis. If your workflow involves a design team publishing token files and multiple platform targets, Style Dictionary fits that pipeline better. If you have no design team and need brand guidance for an AI assistant, hue addresses that gap.

hue does not publish GitHub releases. The README is the only versioned documentation available. The last push to the repository was on 2026-06-11. The project is not archived. The MIT license permits commercial use, modification, and redistribution without restriction.

Editorial conclusion

hue is a practical choice for solo developers and small teams building products through Claude Code or Codex who need visual consistency across AI-generated UIs without maintaining a design token file by hand. It is a poor fit for projects that need compiled tokens targeting multiple platforms (web, iOS, Android, email), where a tool like Style Dictionary with explicit designer-authored input is more appropriate. Before adopting it, open examples/halcyon/component-library.html in a browser to judge the output quality against your brand's requirements.

Frequently asked questions

Official sources

1. dominikmartn/hue on GitHub
2. Issues
3. License: MIT
4. Project website
5. README