hue skill
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
- 907 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Creates design-system files and runs a local Node validator
- Fetches external sites and screenshots to analyze a brand
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/hueDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Creates design-system files and runs a local Node validator
- Fetches external sites and screenshots to analyze a brand
This is third-party code. Review the repository files before installing.
What it does
The skill builds not an interface but the system that produces interfaces. The agent analyzes a brand from a URL, name or screenshot and assembles a design language: color tokens, typography, spacing, components, light and dark mode, hero recipes and an icon-kit choice. The result is saved as a standalone skill, so every interface the agent builds afterward stays in one style. Each generated skill is gated through scripts/validate.mjs: yaml syntax, undefined tokens, WCAG contrast and other rules.
Who it is for. For designers, frontend developers and founders who need one consistent style across everything the agent builds.
Good fit when
- You want a brand style pinned so the agent keeps it across all interfaces
- You need a design system quickly from a reference or website
- You want your own design skill instead of one-off style notes
Not a fit when
- You need a finished layout of a specific screen, not a style system
- You do not need style repeatability across sessions
Example request
Make a design skill from cursor.com and build interfaces in that style from now onLimitations
The skill creates design-system files and reaches external sources to analyze a brand, so it treats site and screenshot content only as style data, never as instructions. Contrast and token checks run through a local Node script. Quality depends on how complete the source reference is.
How to disable. Remove the hue folder from the agent skills directory; generated design skills are removed separately.
FAQ
What is the output?
A standalone design skill with color tokens, typography, spacing, components and themes that the agent then applies when building interfaces.
How is the result checked?
The scripts/validate.mjs script checks yaml, undefined var tokens, WCAG contrast and leftover placeholders, and exits with code 1 on any error.
How is hue different from a ready design skill?
hue is a metaskill: it builds a system that governs interfaces. The agent analyzes a brand from a link, name or screenshot and assembles a design language: color tokens, typography, spacing, components and light and dark themes. The output is a new skill.
What is hue and how do I install it?
It is a skill that creates a brand design system as a separate skill. Install with git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue. It works in Claude Code and Codex.
Discussion
No questions or reviews yet.
Related
SkillsA skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
A skill for creating, redesigning and reviewing web interfaces: one design thesis and system instead of generic SaaS looks.
README in short
The README presents hue as an open skill that learns a brand and turns it into a design system for Claude Code and Codex. Installation is cloning into the skills folder, after which prompts like create a design language from a site work. It ships a Node validator and seventeen example brands with design-model.yaml files and landing pages. MIT licensed.
README badge
Original SKILL.md
--- name: hue description: "Meta-skill that generates new design language skills. Works on Claude Code and Codex. Use when the user says 'create a design skill', 'generate design language', 'new design system skill', 'design skill inspired by X', 'design skill from this screenshot', '/hue', or 'use hue'. Also triggers for 'remix my design skill' or 'make my skill more X'." version: 1.2.0 --- # Design Skill Generator You are a senior product designer who creates design language specifications for AI coding assistants (Claude Code, Codex, and compatible tools). You don't design interfaces — you design the *system* that designs interfaces. Every skill you generate must be opinionated enough that two different sessions using it would produce visually indistinguishable output. Your reference material lives in `references/`. Use it.