Hue

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'.

855 stars 68 forksSoftware Development

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add dominikmartn/hue --skill hue
Manual install
git clone --depth 1 https://github.com/dominikmartn/hue.git /tmp/hue
mkdir -p ~/.claude/skills
cp -r /tmp/hue/. ~/.claude/skills/hue

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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.

## Platform Tools

This skill runs on multiple AI coding assistants. Use whichever tool exists in your session — prefer the left column when available.

| Capability | Claude Code | Codex / other |
|---|---|---|
| Read file | `Read` | shell: `cat -n`, `sed -n` |
| Write new file | `Write` | `apply_patch` or shell |
| Edit existing file | `Edit` | `apply_patch` |
| Find files by pattern | `Glob` | shell: `find`, `rg --files` |
| Search file contents | `Grep` | shell: `rg` |
| Fetch a URL | `WebFetch` | shell: `curl` (returns raw HTML, not summaries — parse with `rg`) |
| Web search | `WebSearch` | web search tool or shell |
| Open in browser | `open file.html` | `open file.html` (macOS) or print the absolute path for the user |
| Browser DevTools | `mcp__chrome-devtools__*` | MCP if configured, else skip — fall back to URL fetch |

When this skill says "fetch the URL", "search the web", or "read the file", use whatever tool from this table is available. Don't fail because a specific tool name doesn't exist — use the equivalent.

---
Read the full skill on GitHub

Details

Skill name
hue
License
MIT
Repo updated
11 June 2026

FAQ

What does the Hue skill do?

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'.

How do I install the Hue skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add dominikmartn/hue --skill hue. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Hue popular?

It lives in dominikmartn/hue, which has 855 GitHub stars and 68 forks.

Related skills

Beautiful Feishu Whiteboard

780

zarazhangrui/beautiful-feishu-whiteboard

A library of 35 curated colour palette styles for building beautiful, editable Feishu / Lark (飞书) whiteboards from SVG. Use this whenever the user wants to create or draw a Feishu whiteboard, infographic, diagram, poster, or visual explainer and wants it to look polished, on brand, or in a particular aesthetic, or when they name a style. The agent figures out what board the user wants, asks about the visual vibe, picks a fitting style from the catalogue, generates an editable Feishu whiteboard, returns the doc link and the rendered image, and offers to switch styles. Requires lark-cli (npm @la

Software Development52

Regenerative Project Design Orchestrator

932

GarethManning/education-agent-skills

Present project-design pathway options and orchestrate regenerative projects using backwards design, PBL, SEEDS, compassionate systems action, or civic/service pathways.

Software DevelopmentIn 1 list131

Jules

448

sanjay3290/ai-skills

Delegate coding tasks to Google Jules AI agent for asynchronous execution. Use when user says: 'have Jules fix', 'delegate to Jules', 'send to Jules', 'ask Jules to', 'check Jules sessions', 'pull Jules results', 'jules add tests', 'jules add docs', 'jules review pr'. Handles: bug fixes, documentation, features, tests, refactoring, code reviews. Works with GitHub repos, creates PRs.

Software DevelopmentIn 4 lists49

Easyeda API

1k

easyeda/easyeda-api-skill

EasyEDA Pro API skill for AI agents. Use when working with EasyEDA Pro EDA software, including PCB design, schematic editing, footprint/symbol management, and project operations. Supports live debugging in EasyEDA and EasyEDA extension development. Provides complete API reference (120+ classes, 62 enums, 70 interfaces), extension-development documentation, and a WebSocket bridge server to execute code in the running EasyEDA Pro client. Trigger on: "嘉立创EDA,启动!", "立创EDA,启动!", "EDA,启动!", "EasyEDA", "PCB", "schematic", "footprint", "EDA", "circuit board", "嘉立创EDA", "原理图", "PCB设计". **IMPORTANT**: 嘉

Software Development79

Threejs Architecture Effects

670

lhlGitHub/threejs-architecture-effects

Build or refine real Three.js architectural construction animations, especially Chinese pavilions, pagodas and clock towers with brick-by-brick growth, timber framing, layered eaves, procedural PBR materials and interactive detail cameras. Use for 3D建筑生长、古建搭建特效、楼台逐层建造、建筑动态组装 or similar architectural miniatures; not for flat image reveals or generic website styling.

Software Development71

Lanshu Animated Architecture Diagram

1k

cclank/lanshu-animated-architecture-diagram

Create premium hand-drawn architecture and process diagrams in the Lanshu animated GIF style, with editable .excalidraw files, static PNG previews, and genuinely animated GIFs with moving flow highlights. Use this skill whenever the user asks for 岚叔动态架构图, Excalidraw-like diagrams, DailyDoseOfDS-style black-background sketches, animated architecture/process GIFs, polished flowcharts, visual explanations of articles or system designs, or asks to replicate or improve a reference diagram with hand-drawn animated effects.

Software Development124

Browse the most popular Claude skills, all software development skills, or write your own with the skills generator.