skills.rest
Soham407
Soham407COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Soham407/studio-kickstart --skill hue-soham407
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
kristovatlaskristovatlas

input-validation-audit

Trace untrusted inputs to security sinks in web applications.

Community
Intermediate
ZESCODEZESCODE

designmd

Apply external design systems to AI-generated UI code.

Community
Intermediate
K9i-0K9i-0
1

ui-theming

Extract design tokens from reference images and apply them to Flutter ThemeData.

Community
Intermediate
windyskywindysky

agency-design-system

Generate a design-spec.md with color tokens, typography scales, spacing, and layout specs.

Community
Advanced