hue

Generate design-language skills from brand URLs or screenshots for AI coding assistants.

1|Updated May 7, 2026

Search Tags:#design system #Codex #Claude Code #design tokens #brand analysis #AI coding assistants #hero stage

Ready to run

npx skills add https://github.com/Soham407/studio-kickstart --skill hue-soham407

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hue
Source: https://github.com/Soham407/studio-kickstart/tree/main/design/hue-design-tokens
Command: npx skills add https://github.com/Soham407/studio-kickstart --skill hue-soham407

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the hard work of turning a brand’s visual identity into a consistent, reusable design system for AI coding assistants.

Core Features & Use Cases

Meta-skill design-language generator: Produces new design-language skills (tokens + components + usage guidance) that yield consistent outputs across sessions.
Brand acquisition via URL or screenshot: Learns brand styling from a website URL or user-provided screenshot, then translates it into deterministic generation rules.
AI-assistant-ready outputs: Targets Claude Code and Codex workflows with an opinionated system that supports color tokens, typography, spacing, light/dark mode, and component patterns.

Quick Start

Tell your assistant: “Create a design skill inspired by cursor.com.”

Frequently Asked Questions about hue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a design system from a website for AI coding assistants?▼

To generate a design system from a website, this skill analyzes a provided brand URL or screenshot and translates the visual facts into reusable tokenized guidance for AI coding assistants like Claude Code and Codex.

Can I extract design tokens from a screenshot to create a brand-specific design language?▼

Yes, you can extract design tokens from a screenshot. The skill learns brand styling from user-provided screenshots and translates them into deterministic generation rules including typography, spacing, radii, and accent colors.

What is the best way to adapt an existing design skill to a new visual direction?▼

The best way to adapt an existing design skill to a new visual direction is by prompting the assistant with a remix request like "make it more X," which adjusts the extracted design tokens and component patterns accordingly.

Does this design system generator support light and dark mode color tokens?▼

Yes, this design system generator supports light and dark mode color tokens. It produces an opinionated system that includes color tokens, typography, spacing, and component patterns for consistent outputs across sessions.

How does brand analysis handle untrusted data fetched from a URL?▼

Brand analysis enforces safe handling of fetched content as untrusted data. While extracting visual facts like typography and accents, the process securely isolates the input to compose mandatory hero-stage specifications without risking the environment.