hue
Agent skill that turns any brand URL or screenshot into a design system
Tier A · StrongAgent SkillGeneratorDesign Mdgithub.com
hue is an MIT-licensed skill for Claude Code and Codex that reads a brand from a URL, a name, or a screenshot and writes out a complete design language as a second, generated skill: color tokens, typography, spacing, light and dark mode, hero-stage recipes, icon-kit selection, and a component library. You clone it into ~/.claude/skills or ~/.agents/skills once, then say 'make a design skill from cursor.com' in any session. Every generated skill is gated through scripts/validate.mjs, which checks YAML syntax, orphan CSS selectors, undefined var(--token) usages, leftover placeholders, em-dashes, the SKILL.md frontmatter contract, WCAG contrast on core text/background pairs, and AI-default display fonts. Seventeen worked examples ship in examples/, each with design-model.yaml and landing-page.html.
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hueFor an agent
Reach for hue when the target brand is NOT in awesome-design-md's 73 and you need a system invented from a URL or screenshot - it is a generator, where DESIGN.md collections are a lookup. Install path matters: ~/.claude/skills/hue for Claude Code, ~/.agents/skills/hue (or $CODEX_HOME/skills/hue) for Codex, and after generating always run `node scripts/validate.mjs <generated-skill-folder>` because it exits 1 on undefined var(--token) usages and failed WCAG contrast, which is the single most common way a generated system silently breaks. It composes cleanly with Impeccable - hue defines the identity, Impeccable enforces craft - but note the output is vanilla CSS custom properties and HTML, not React or Tailwind, so you translate before dropping it into a component framework.
Why it is here. Most design-for-agents tooling hands you a fixed style; hue is one of the few that derives a validated, self-consistent system from an arbitrary brand and then hard-fails on its own mistakes.
Facts
- License
- MIT
- Pricing
- Free, Open source, Sponsor or ad supported
- Framework
- Vanilla JS
- Styling
- CSS custom properties, Vanilla CSS
- Distribution
- Agent skill / rules pack, GitHub repository, Direct download / asset pack
- Platform
- Web
- Content type
- Prompts, Design tokens / theme files, Code, Prose / writing
- Agent readiness
- Agent skill or rules pack, Readable open source, Structured documentation, Copy-paste ready code
- Accessibility
- Contrast checked, WCAG 2.x AA
- Maturity
- Actively maintained
- Pricing detail
- Free, MIT, no account or API key. GitHub Sponsors link only.
- GitHub stars
- 798
Components it ships
40 totalHelps you build
5Templates
28- landing-page template · Recipe the skill follows to render a full branded landing page from the generated design model
- app-screen template · Recipe for a product/app screen in the generated design language
- component-library template · Sticky-TOC HTML component library with light/dark toggle and spec tables
- components template · 26 numbered component specs (buttons through accordion) the generated system must define
- tokens template · Color, type, spacing and elevation token contract
- hero-stage recipes · Hero composition patterns per brand character
- background shaders / graphics · Background treatment recipes for the generated system
- icon kits · Rules for picking an icon set that matches the brand character
- platform mapping template · Maps the design model onto target platforms
- preview template · Renders a visual preview of the generated system
- skill template · SKILL.md frontmatter and structure contract for the generated skill
- atlas (example) · Ivory engineering, classical maritime charts
- auris (example) · Premium audio, monochrome dark
- drift (example) · Hot pink fashion commerce
- fizz (example) · Y2K pop photo-sharing, candy chrome
- halcyon (example) · Cool teal sculptural glass; ships the full component-library.html
- kiln (example) · Dark fired earth, molten terracotta
- ledger (example) · Newsprint editorial, financial broadsheet
- meadow (example) · Warm cream editorial; the one real brand, from mymind-design
- orivion (example) · Luminous red-violet glow
- oxide (example) · Brutalist mono compute protocol
- prism (example) · Cyberpunk holographic shader engine
- relay (example) · Swiss transit, departure-board precision
- ridge (example) · Slate emerald dev platform; also ships app-screen.html
- solvent (example) · Warm amber generative shader
- stint (example) · Muted violet productivity; also ships app-screen.html
- thrive (example) · Sage green wellness, light mode
- velvet (example) · Noir editorial fragrance house
Notable for
- generates a skill from a URL or screenshot
- validate.mjs gates WCAG contrast and orphan tokens
- 17 worked example brands
- 26-component spec template
- works on Claude Code and Codex
Provenance
Verified 2026-08-15. HTTP 200. https://github.com/dominikmartn/hue, https://raw.githubusercontent.com/dominikmartn/hue/main/README.md, https://raw.githubusercontent.com/dominikmartn/hue/main/references/components-template.md, https://raw.githubusercontent.com/dominikmartn/hue/main/references/component-library-template.md, https://api.github.com/repos/dominikmartn/hue (+ git/trees)
Also in Agent Design Tooling
6- Awesome DESIGN.md · 73 MIT-licensed DESIGN.md brand analyses you drop into a project root
- Impeccable · Design vocabulary and anti-slop detector for AI coding agents
- Impeccable · Design skill for AI coding agents: 23 slash commands and 59 detector rules
- Loora · Canvas design tool with a remote MCP server your coding agent edits live
- Mobbin MCP · MCP server that gives coding agents 621,500+ real shipped app screens
- Open Design · Local-first desktop app that turns your coding agent into a design engine