Hueby dominikmartn

Hue Skill.

Create the rules that guide future interface work, not just one finished screen.

Design Systems
Skill Creation
Design Tokens

Source Review · HueSKILL.md

Task Design Systems Produces • A reusable design Skill with a design-model.yaml source of truth. • Token, component, and platform-mapping reference files. • Dashboard, component-library, landing-page, and app-screen HTML previews. Before You Start Needs file access, suitable reference-inspection tools, Node for validate.mjs, and browser review for visual confidence. Tool availability affects extraction fidelity.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Turn a Design Language Into a Reusable Skill

Generate a reusable design skill from reference analysis, a shared YAML model, documentation and four validated previews.

Source-based workflowNot an execution benchmark

The Working Approach

Hue is a meta-Skill that produces another design-language Skill. It can start from a brand, URL, codebase, screenshots, description, or an existing Skill to remix. It separates observed design facts from derived choices, records the decisions in design-model.yaml, and generates the downstream documentation and previews from that model.

Its output includes more than colors and fonts. The source covers component inventories, icon fallback reasoning, hero-stage composition, light and dark tokens, platform mappings, and four visual demonstrations. It also requires validation and visual review. The reviewed source contains some inconsistent font-source guidance, so exact font licensing and availability should be checked rather than treating every recommendation as compatible.

Expected Deliverables

A reusable design Skill with a design-model.yaml source of truth.
Token, component, and platform-mapping reference files.
Dashboard, component-library, landing-page, and app-screen HTML previews.

See the Example Brief

From Brief to Review

01
Analyze the Input
Gather real values from source or computed styles when possible, and label lower-confidence observations from screenshots or text fetching.
02
Confirm the Direction
Review the aesthetic interpretation and core tokens before generating a larger file set.
03
Build the Model First
Record primitives, semantic roles, components, icon fallbacks, and hero-stage decisions in YAML.
04
Generate and Validate
Produce references and previews from the model, run the supplied validator, and inspect the rendered outputs in both modes.

02 When to Use It

When to Use It

Needs file access, suitable reference-inspection tools, Node for validate.mjs, and browser review for visual confidence. Tool availability affects extraction fidelity.

A Good Fit

Reusable Brand GuidanceUseful when repeated assistant sessions need a more explicit visual language.
Design-Skill RemixesSupports changing selected dimensions while preserving the existing philosophy and unaffected rules.

Limits to Check

Not Asset OwnershipObserved proprietary fonts, icons, photography, and product renders are not automatically licensed for redistribution.
Not Exact Brand CloningFallback kits and derived components must be identified honestly.
Environment-Dependent AnalysisComputed-style inspection, browser screenshots, and local validation need available tooling; weaker inputs reduce confidence.

Bring These Inputs

Design ReferenceProvide a brand URL, codebase, screenshots, written direction, or existing Skill.
Scope and PlatformSpecify the product domain and whether CSS, Tailwind, or SwiftUI mappings are useful.
Asset and Brand ConstraintsIdentify proprietary material, approved fallbacks, and decisions that must remain unchanged.

03 Decisions That Matter

Decisions That Matter

Observed Versus Derived
A button found in the source and a newly inferred toggle should not be presented as equally verified.
One Model Limits Drift
Generating documents and previews from the same YAML reduces disagreement between stated tokens and rendered values.
Test on Application Screens
A design language that only works on a hero may fail on a dense application screen; the fourth preview tests that distinction.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the complete generator repository with its templates and validation script. Generated Skill folders have their own discovery naming and installation locations, which differ by agent.

Upstream Source File

https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md

Needs file access, suitable reference-inspection tools, Node for validate.mjs, and browser review for visual confidence. Tool availability affects extraction fidelity.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use hue to create a reusable design-language Skill from the supplied local UI code and screenshots. Distinguish observed components from derived ones, preserve our actual accent and corner treatment, and propose licensed font/icon fallbacks. Confirm the direction and core tokens, then generate the model, references, and four previews with validation evidence.

Inspect the Result

Check the actual output against these observable criteria.

Every rendered token traces to design-model.yaml.
Observed proprietary assets and fallback choices are clearly distinguished.
All generated HTML files pass structural validation and actual visual review.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: dominikmartn
Repository: dominikmartn/hue
Skill File: SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · a910e31cd24b

Editorial Source Summary

Generate a reusable design skill from reference analysis, a shared YAML model, documentation and four validated previews.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does Hue build only a landing page?

No. The landing preview is one demonstration of a generated design Skill, alongside a dashboard, component library, and app screen.

Can it revise an existing design Skill?

Yes. The source's remix path changes the model first and regenerates only affected files rather than replacing the whole system.

Does it claim the source brand uses the fallback icon kit?

It should not. The source explicitly separates observed icon style from the freely licensed kit chosen for previews.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills