hue
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Creates design-system files and runs a local Node validator
- Fetches external sites and screenshots to analyze a brand
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/hueDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add dominikmartn/hue --skill hue -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add dominikmartn/hue --skill hue -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add dominikmartn/hue --skill hue -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add dominikmartn/hue --skill hue -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add dominikmartn/hue --skill hue -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add dominikmartn/hue --skill hue -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add dominikmartn/hue --skill hue -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add dominikmartn/hue --skill hue -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Install the skill: git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue (for Codex ~/.agents/skills/hue). Then ask it to create a design language from a URL, name or screenshot.
Other ways from the author
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hueThis 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.
Security check
- Creates design-system files and runs a local Node validator
- Fetches external sites and screenshots to analyze a brand
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.
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.
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.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys