Hue
Open-source skill that turns any brand into a design system Claude Code and Codex can build with
If generic AI-generated UI is your daily irritation and you already live in Claude Code or Codex, Hue is a clone-and-go install that pays off immediately — MIT-licensed, free, and it ships a real 40-component, 156-variant, 95-token library instead of vibes. Treat it as a token-and-component generator wired into your agent, not a Figma replacement: it produces six static files per brand rather than a live visual editor, and it only makes sense if Claude Code or Codex is already in your loop. If you need drag-and-drop design tooling or cloud collaboration, look elsewhere.
Verified 1d ago · liveness 63/100 · cite: rightaichoice.com/tools/hue
- Solo developers building frontend UI with Claude Code or Codex
- Designers needing fast brand-to-token translation for AI coding agents
- Small teams standardizing AI-generated UI against a shared design system
- Developers who want a free, MIT-licensed, self-hosted design system generator
- Non-developers without Claude Code or Codex installed
- Teams needing a full visual editor with drag-and-drop
- Users expecting a hosted dashboard or cloud-based collaboration
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Hue if your team doesn't work inside Claude Code or Codex, or if you need a hosted visual editor with drag-and-drop and cloud collaboration rather than static token files written to disk.
Hue itself is free and open source, but you still pay for whatever Claude Code or Codex plan you already run, so the real line item is your existing assistant subscription.
Hue is MIT-licensed and free to clone, with no account, API key, subscription, or per-seat cost — the only spend is the Claude Code or Codex plan you already pay for. That puts it well below paid design-system or token tooling, and below any hosted design platform, at the cost of no support contract, SLA, or cloud collaboration. Optional GitHub Sponsors support goes to the solo maintainer, not to a support tier.
In short
Hue — Open-source skill that turns any brand into a design system Claude Code and Codex can build with. Best for Solo developers building frontend UI with Claude Code or Codex, Designers needing fast brand-to-token translation for AI coding agents, Small teams standardizing AI-generated UI against a shared design system. Free to use.
What's new in Hue
Checked 7 days agoAcross the latest 1 update: 1 changelog entry.
What people actually say about Hue — is it worth it?
We ran a structured research pass across product reviews, community discussions, and post-purchase forum threads to surface the patterns vendors won't publish themselves. Below: the recurring strengths, the hidden costs people mention most, and the cohort that consistently regrets adopting this tool.
65 mentions across 4 sources (Hacker News, App Store, GitHub, Lemmy) · researched Jul 3, 2026.
Average across the 4 sources that answered — each source counts once, not each post.
- +Completely free and open-source under MIT license.
- +Works offline against your own model, no API key required.
- +Learns brand from a URL or single screenshot.
- +Generates 40+ components with 156+ variants and 95+ tokens.
- +Includes both dark and light mode in the output.
- −No user testimonials or community validation exists yet.
- −Solo developer may not provide timely support or updates.
- −Only compatible with Claude Code and Codex, limited scope.
- −Generated design system may still require manual refinement.
- −Undocumented real-world performance with large or complex brands.
- • Requires Claude Code or Codex subscription to use
- • May consume AI API credits if using cloud model
Viability Score
How well maintained and how widely used is Hue? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: October 2026
How we score →Key Features
- Capture a brand from a live URL, Figma screenshot, moodboard, or written brief
- Three-step pipeline: drop a source, capture it as a system, have every UI match
- Extracts colors, type, radii, motion, and voice into a structured design language
- Generates semantic tokens the model can reason about, stored in design-model.yaml
- Writes six files per brand: SKILL.md, design-model.yaml, tokens.md, component-library.html, landing-page.html, preview.html
- Browseable HTML component library with 40 components and 156 variants
- 95 tokens covering typography, radii, elevation, buttons, inputs, cards, and 30 more components
- Dark and light mode output included
- Runs as a skill inside Claude Code
- Runs as a skill inside Codex
- Install by git cloning the repo into ~/.claude/skills/hue or ~/.agents/skills/hue
- No account, API key, or subscription required
- Runs against your own model
- All output is static, version-controllable files on disk
- Ships with 17 example skills, including the Halcyon brand page
About Hue
Hue is an open-source skill for Claude Code and Codex that learns a brand and generates a complete design system your AI coding agent then follows. You point it at a live URL, a Figma screenshot, a moodboard, or a written brand brief, and the three-step pipeline takes over: drop the source, hue captures the visible identity (colors, type, radii, motion, voice) and resolves it into a structured design language with semantic tokens, then every UI your assistant builds uses that generated skill as its design context. The output is concrete, not a vibe. Hue writes six files per brand into the skill folder: SKILL.md (the entry point the assistant reads), design-model.yaml (structured semantic tokens for colors, type, radii, spacing, motion), tokens.md (human-readable token reference), component-library.html (a browseable component library with 40 components, 156 variants and 95 tokens in dark and light mode), landing-page.html (a marketing landing in the brand language), and preview.html (a visual cheat sheet). All six are static files, version-controllable, and re-runnable. Install is a git clone into ~/.claude/skills/hue or ~/.agents/skills/hue with no account, no API key, and no subscription — it runs against your own model. Seventeen example skills ship with it, the Halcyon brand page among them. It is for developers who already work inside Claude Code or Codex and want generated UI to stop looking generic; it slots into an existing agent setup rather than replacing it with a visual editor.
Behind the Verdict
Hue solves a narrow, painful problem well: AI coding agents default to generic, off-brand UI, and there is no lightweight way to hand them your brand's design language. Hue's answer is a structured one rather than a prompt trick. You give it a live URL, a Figma screenshot, a moodboard, or a written brief; it captures the visible identity — colors, type, radii, motion, voice — and resolves that into semantic tokens stored in design-model.yaml, which the model can reason about. That distinction matters: it's a system, not a snapshot, so the same brand input stays consistent across generations. The output is deliberately inspectable rather than a black box. Six files land on disk per brand — SKILL.md, design-model.yaml, tokens.md, component-library.html, landing-page.html, preview.html — all version-controllable, all static. The component library is the showpiece: 40 components, 156 variants, 95 tokens across buttons, inputs, cards, typography, radii and elevation, in dark and light mode, browseable as HTML. Seventeen example skills ship with it so you can see the output shape before spending an afternoon on your own brand. The pipeline is three steps and documented: drop a source, capture it as a system, then every UI your assistant builds matches. Strengths: no account, no API key, no subscription; it runs against your own model; it slots into an existing Claude Code or Codex setup rather than forcing a new tool into your stack. Weaknesses are structural, not bugs. It works specifically with Claude Code and Codex, so teams on other assistants get nothing from it. Output is static files plus manual re-runs when the brand changes — there is no dynamic sync, no installer, no GUI, no hosted dashboard, no cloud collaboration. And it is a solo side project maintained through sponsorship, with no team, dedicated support, or SLA behind it. Where it fits: solo developers and small teams who already build frontend inside Claude Code or Codex and want generated components to match a shared brand. Where it doesn't: anyone needing drag-and-drop design tooling, cloud-based collaboration, or enterprise support and compliance commitments.
Researching Hue? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Real-world workflow fit
Concrete scenarios for the personas Hue actually fits — and what changes day-one when you adopt it.
Clone the repo into ~/.claude/skills/hue, point it at the company homepage URL, and let it generate the six files for that brand.
Outcome: Your assistant now has design-model.yaml and SKILL.md as context, so the settings page and dashboard components it builds come out in your actual brand colors and typography instead of generic defaults.
Drop a Figma screenshot or moodboard into Hue, then hand the generated component-library.html to the developers working in Codex.
Outcome: You get a browseable library of 40 components and 156 variants in dark and light mode that the team can inspect and reference, without hand-writing a token spec.
Generate a shared brand skill once, version-control the six output files, and use the same skill across multiple projects and both Claude Code and Codex.
Outcome: Every UI the team's agents produce matches one shared visual language, and brand changes are handled by re-running the pipeline and committing the updated files.
Use Cases
- Generate a complete design system from your company's homepage URL
- Ensure every AI-generated component matches your brand's color palette and typography
- Prototype UI in Claude Code or Codex without manually defining design tokens
- Maintain consistent brand identity across multiple AI-assisted projects
- Share a branded component library with teammates across Claude Code and Codex
- Customize an existing design system by uploading a screenshot of your current app
Models Under the Hood
as of 2026-10-15
Limitations
- Hue works specifically with Claude Code and Codex, so teams using other AI assistants cannot plug into it.
- It generates a design system as static files on disk — six per brand — which you version-control and re-run manually when the brand changes, rather than syncing dynamically.
- Installation is a git clone into ~/.claude/skills/hue or ~/.agents/skills/hue, so there is no installer, GUI, hosted dashboard, or cloud collaboration.
- It is a solo side project maintained through sponsorship, with no team, dedicated support, or SLA.
- All generations are one-shot, which keeps output consistent but means regeneration is a manual re-run rather than a live sync.
as of 2026-10-10
Verification history
We have re-verified Hue 10 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — re-checked, vendor evidence unchanged
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-checked, vendor evidence unchanged
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
Showing the 6 most recent of 10 verification passes.
Free to cite with attribution — this page re-verifies continuously.
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Plans compared
For each published Hue tier: who it actually fits, and what it adds vs. the previous tier. Cross-reference the cost calculator above for projected annual outlay.
Free
$0
Ideal for
Solo developers and small teams already running Claude Code or Codex who want branded UI output without adding a subscription
What this tier adds
Starting tier: MIT-licensed and free to clone, with no account, API key, or subscription; GitHub Sponsors support is optional
Where the pricing makes sense
The company stage and team size where Hue's pricing actually pencils out — and where peers do it cheaper.
Hue is MIT-licensed and free to clone, with no account, API key, subscription, or per-seat cost — the only spend is the Claude Code or Codex plan you already pay for. That puts it well below paid design-system or token tooling, and below any hosted design platform, at the cost of no support contract, SLA, or cloud collaboration. Optional GitHub Sponsors support goes to the solo maintainer, not to a support tier.
Setup time & first value
How long it actually takes to get something useful out of Hue — broken out by persona, not the marketing-page minute.
Solo developer: roughly five minutes to clone the repo into ~/.claude/skills/hue, then about one minute to run it against a brand. Designer: similar, assuming Claude Code or Codex is already installed — the bottleneck is picking the source URL or screenshot, not the install. Small team: allow a short session to agree on a source of truth (live URL vs screenshot), generate the skill, and commit
Switching to or from Hue
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From a hand-written token file: point Hue at your live URL or a screenshot of the current product and let it produce design-model.yaml and tokens.md in its own structure.
- →From a Figma design system: export a screenshot of the current system, feed it to Hue, and use the generated component library as the agent-readable counterpart.
- →From prompt-only brand instructions: replace ad-hoc brand prompts in your agent with the generated SKILL.md and design-model.yaml so consistency comes from tokens rather than repeated instructions.
- ↗To a visual design tool with drag-and-drop: export the generated component-library.html and tokens.md as the reference for rebuilding in an editor that supports collaboration.
Integrations
Resources & Guides
Tutorials & Learning
YouTube returned 6 videos for “Hue”, and we withheld 6: 6 could not be judged, because “Hue” is a single word that other videos use for other things. We are showing none, because we could not prove any of them are about Hue.
Official links
Tools that pair well with Hue
Common stack mates teams adopt alongside Hue, with the specific reason each pairing earns its keep.
Ui Ux Pro Max Skill
Free open-source design-intelligence skill that feeds UI styles, palettes, fonts, and chart rules into Claude Code, Cursor, and other AI coding assistants.
Anima
Anima turns Figma files, screenshots, and live URLs into editable HTML or React code — design-to-code, not prompt-to-code.
Open Design
Open Design turns the coding agent you already run into a local-first design engine for prototypes, slides and HTML video
Featured Head-to-Head Comparisons
Hue vs Cognition Ai
If you're an enterprise team shipping production code across platforms, Devin's autonomous multi-step capabilities and integrations win. But for frontend developers using Claude Code or Codex who want instant, brand-consistent UI components, Hue is a brilliant free add-on. Choose based on whether you need to build whole systems (Devin) or design quickly (Hue).
Hue vs Polycam
Polycam and Hue solve completely different problems. Polycam is an advanced 3D scanning platform for professionals needing accurate reality capture; Hue is a free open-source skill for AI coding assistants to generate brand-consistent UI. Choose based on your workflow: if you scan physical spaces or objects, go Polycam; if you build interfaces with Claude or Codex, go Hue.
Hue vs Bito
Bito and Hue serve entirely different needs. Bito is a heavy-duty enterprise platform for teams that need AI coding agents to understand complex, multi-repo codebases; it's about context and architecture. Hue is a lightweight, free open-source tool for developers using Claude Code or Codex to generate consistent branded UI components. Choose Bito if you need system-wide code context and architectural analysis; choose Hue if you need quick, on-brand design tokens and components for frontend work.
Alternatives to Hue
View allUi Ux Pro Max Skill
Free open-source design-intelligence skill that feeds UI styles, palettes, fonts, and chart rules into Claude Code, Cursor, and other AI coding assistants.
Anima
Anima turns Figma files, screenshots, and live URLs into editable HTML or React code — design-to-code, not prompt-to-code.
Open Design
Open Design turns the coding agent you already run into a local-first design engine for prototypes, slides and HTML video
Frequently Asked Questions
Categories
Best-of guides
Topics
Used Hue? Help shape our editorial sentiment research.