New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Design Token Generator

by dylanfeltus in dylanfeltus/skills

Generates type scales, color palettes, spacing systems, WCAG contrast checks and dark mode palettes from formulas, as CSS custom properties, a Tailwind config or JSON tokens.

MITAuto-check passedFrontend & Design

Install Design Token Generator

skills CLI
$ npx skills add dylanfeltus/skills --skill design-tokens -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dylanfeltus/skills design-tokens --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/dylanfeltus/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/design-tokens .claude/skills/design-tokens && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
design-tokens
GitHub stars
179
Token cost
~2.9k tokens
SKILL.md length
1,006 words
Files
2
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Generates type scales, color palettes, spacing systems, WCAG contrast checks and dark mode palettes from formulas, as CSS custom properties, a Tailwind config or JSON tokens.

  • Works in 3 steps: Choose Base Colors → Generate Shade Scale (50–950) → Semantic Token Mapping
  • Setting up the design system for a new project
  • SKILL.md covers When to Use, Core Philosophy, Type Scale Generation and Color Palette Generation, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

The guiding rules are math over taste, accessibility by default with every text and background pair passing WCAG AA, values derived from a base and a ratio, and portable output. The type scale section gives the formula font size equals base size times ratio to the power of the step, and a table of ratios from Minor Second at 1.067 up to Perfect Fifth at 1.500 with the kinds of interface each suits. It starts from a base of 16px, rounds to the nearest half pixel or converts to rem.

It also sets line height rules that tighten as size grows, from 1.6 to 1.7 for small text down to about 1.0 to 1.1 for display text, and letter spacing rules that open slightly for small text and tighten for headings. The description adds palettes, spacing grids, contrast checks and dark mode derived from a light palette, though the excerpt is cut off before those parts. Outputs are CSS custom properties, a Tailwind config or JSON tokens.

When your agent uses it

  • Setting up the design system for a new project
  • Generating a modular type scale from a base size and ratio
  • Checking that color pairs meet WCAG AA contrast
  • Deriving a dark theme from an existing light palette

Example prompts

  • “Generate a type scale with a Minor Third ratio and a 16px base, as CSS custom properties.”
  • “Create a Tailwind theme config with a spacing grid and a color palette for our brand blue.”
  • “Check whether our text and background colors meet WCAG AA and suggest fixes.”
  • “Derive dark mode tokens from this light palette and output them as JSON.”

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Choose Base Colors
  2. Generate Shade Scale (50–950)
  3. Semantic Token Mapping

What it can do on your machine

Read from SKILL.md and the folder at commit b97a48f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css, javascript and json).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Design Token Generator loads about 2.9k tokens when it runs. Until then it costs about 70 tokens; SKILL.md has 1,006 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~70
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from dylanfeltus/skills at commit b97a48f, republished under its MIT licence (© dylanfeltus). 1,006 words, ~2,899 tokens.

Download SKILL.mdSave it as .claude/skills/design-tokens/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
design-tokens
description
Generate type scales, color palettes, spacing systems, WCAG contrast checks, and dark mode derivations with math. Use when setting up a design system, creating tokens, or building a Tailwind/CSS theme. Outputs CSS custom properties, Tailwind config, or JSON tokens.

Design Tokens

Generate type scales, color palettes, spacing systems, and dark mode derivations with math — not guessing. Includes WCAG contrast checking, systematic spacing grids, and production-ready CSS/Tailwind output.

When to Use

  • User is setting up a new project's design system
  • User asks for a type scale, color palette, or spacing system
  • User needs WCAG-compliant color combinations
  • User wants dark mode colors derived from a light palette
  • User asks for "design tokens" or "theme setup"
  • Building a Tailwind config or CSS custom properties

Core Philosophy

  • Math over taste. Scales should follow ratios, not arbitrary values.
  • Accessibility by default. Every text/background combo must pass WCAG AA.
  • Systematic. Every value should be derivable from a base + ratio.
  • Portable. Output as CSS custom properties, Tailwind config, or JSON tokens.

Type Scale Generation

The Formula
fontSize = baseFontSize × ratio^step
RatioNameValueBest for
Minor Second1.067Tight, minimal differenceDense UI, dashboards
Major Second1.125Subtle progressionApps, data-heavy interfaces
Minor Third1.200Balanced, versatileMost websites, SaaS
Major Third1.250Clear hierarchyMarketing sites, blogs
Perfect Fourth1.333Strong contrastEditorial, landing pages
Augmented Fourth1.414DramaticBold designs, portfolios
Perfect Fifth1.500Very dramaticHero-heavy designs
Generating the Scale

Given a base size (typically 16px) and a ratio:

Step -2: 16 / ratio² = xs
Step -1: 16 / ratio  = sm
Step  0: 16          = base
Step  1: 16 × ratio  = lg
Step  2: 16 × ratio² = xl
Step  3: 16 × ratio³ = 2xl
Step  4: 16 × ratio⁴ = 3xl
Step  5: 16 × ratio⁵ = 4xl
Step  6: 16 × ratio⁶ = 5xl

Round to nearest 0.5px or convert to rem (÷ 16).

Line Height Rules
Font SizeLine HeightUse
≤ 14px1.6–1.7Small text, captions
16–20px1.5–1.6Body text
20–32px1.3–1.4Subheadings
32–48px1.1–1.2Headings
48px+1.0–1.1Display/hero text

Rule of thumb: As font size increases, line height decreases.

Letter Spacing Rules
SizeLetter SpacingWhy
Small text (≤14px)0.01–0.02emSlightly open for readability
Body text0em (normal)Don't touch it
Subheadings-0.01emSlightly tighten
Headings-0.02em to -0.03emTighten as size grows
Display text-0.03em to -0.05emTight tracking at large sizes
Font Weight Pairing
RoleWeightTailwind
Body400 (Regular)font-normal
Body emphasis500 (Medium)font-medium
Subheading600 (Semibold)font-semibold
Heading700 (Bold)font-bold
Display800 (Extrabold)font-extrabold
Output Example (CSS Custom Properties)
css
:root {
  --font-size-xs: 0.694rem;    /* 11.1px */
  --font-size-sm: 0.833rem;    /* 13.3px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.2rem;      /* 19.2px */
  --font-size-xl: 1.44rem;     /* 23px */
  --font-size-2xl: 1.728rem;   /* 27.6px */
  --font-size-3xl: 2.074rem;   /* 33.2px */
  --font-size-4xl: 2.488rem;   /* 39.8px */
  --font-size-5xl: 2.986rem;   /* 47.8px */
}

Color Palette Generation

Step 1: Choose Base Colors

Every palette needs:

TokenPurposeExample
primaryMain brand color, CTAsYour brand color
neutralText, borders, backgroundsGray (warm/cool/pure)
successPositive statesGreen
warningCaution statesAmber/yellow
errorDestructive statesRed
infoInformationalBlue (can overlap primary)
Step 2: Generate Shade Scale (50–950)

For each base color, generate a 10-step shade scale. The base color is typically the 500 step.

Method: HSL manipulation

Starting from the base HSL:

StepLightness AdjustmentSaturation Adjustment
50+45%-30%
100+38%-25%
200+28%-15%
300+18%-5%
400+8%0%
5000% (base)0% (base)
600-8%+5%
700-18%+5%
800-28%0%
900-38%-10%
950-45%-20%

Clamp all values: lightness 0–100%, saturation 0–100%.

Step 3: Semantic Token Mapping

Map shade steps to semantic roles:

css
/* Light mode */
--color-bg: var(--neutral-50);
--color-bg-subtle: var(--neutral-100);
--color-bg-muted: var(--neutral-200);
--color-border: var(--neutral-200);
--color-border-strong: var(--neutral-300);
--color-text-muted: var(--neutral-500);
--color-text-subtle: var(--neutral-600);
--color-text: var(--neutral-900);
--color-text-heading: var(--neutral-950);

--color-primary: var(--primary-600);
--color-primary-hover: var(--primary-700);
--color-primary-bg: var(--primary-50);
--color-primary-text: white;

WCAG Contrast Checking

The Formula

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 = lighter relative luminance, L2 = darker.

Relative Luminance
For each channel (R, G, B):
  sRGB = channel / 255
  linear = sRGB <= 0.04045 ? sRGB / 12.92 : ((sRGB + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear
WCAG Requirements
LevelRatioApplies to
AA Normal Text≥ 4.5:1Body text (< 18px or < 14px bold)
AA Large Text≥ 3:1≥ 18px regular or ≥ 14px bold
AAA Normal Text≥ 7:1Enhanced accessibility
AA UI Components≥ 3:1Borders, icons, focus rings
Quick Reference (Neutral on White #FFFFFF)
ShadeApprox ContrastPasses
300~2.5:1❌ Decorative only
400~3.5:1✅ Large text, UI
500~4.5:1✅ AA body text
600~6:1✅ AA comfortable
700~8:1✅ AAA body text
Checking Contrast Programmatically

When generating palettes, always verify:

  1. text (900) on bg (50) → must be ≥ 4.5:1
  2. text-muted (500) on bg (50) → must be ≥ 4.5:1
  3. primary (600) on white → must be ≥ 4.5:1
  4. primary-text on primary (600) → must be ≥ 4.5:1
  5. border (200) on bg (50) → must be ≥ 3:1

If a combo fails, adjust the darker color one step darker until it passes.

Show full SKILL.md (388 more words)Show less

Spacing System

Everything is a multiple of 4px. Predictable, consistent, works with most font sizes.

css
:root {
  --space-0: 0px;
  --space-0.5: 2px;
  --space-1: 4px;
  --space-1.5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
}

This matches Tailwind's default scale exactly.

Spacing Usage Guide
ContextSpacingValues
Inline icon gapspace-1 to space-24–8px
Button paddingspace-2 × space-48px 16px
Card paddingspace-4 to space-616–24px
Section gap (between elements)space-6 to space-824–32px
Section padding (container)space-12 to space-1648–64px
Page section vertical rhythmspace-16 to space-2464–96px
The Container Width Scale
TokenWidthUse
sm640pxNarrow content (auth forms)
md768pxBlog posts, documentation
lg1024pxApp layouts
xl1280pxWide layouts
2xl1536pxFull-width dashboards

Dark Mode Derivation

The Inversion Pattern

Don't manually pick dark mode colors. Derive them systematically:

Light mode          →  Dark mode
neutral-50  (bg)    →  neutral-950 (bg)
neutral-100 (bg-subtle) → neutral-900 (bg-subtle)
neutral-200 (border) → neutral-800 (border)
neutral-300 (border-strong) → neutral-700 (border-strong)
neutral-500 (text-muted) → neutral-400 (text-muted)
neutral-600 (text-subtle) → neutral-300 (text-subtle)
neutral-900 (text)  →  neutral-50  (text)
neutral-950 (heading) → neutral-50 (heading)

The rule: Background shades flip (50↔950, 100↔900, 200↔800). Text shades flip similarly. Middle shades (400–600) shift by ~1–2 steps.

Primary Color in Dark Mode
  • Use a lighter step: primary-400 or primary-500 instead of primary-600
  • Reduce saturation slightly for dark backgrounds (avoids eye strain)
  • Verify contrast against neutral-900 or neutral-950 background
Semantic Tokens for Dark Mode
css
/* Light */
:root {
  --color-bg: var(--neutral-50);
  --color-text: var(--neutral-900);
  --color-primary: var(--primary-600);
}

/* Dark */
.dark {
  --color-bg: var(--neutral-950);
  --color-text: var(--neutral-50);
  --color-primary: var(--primary-400);
}

The beauty: components reference semantic tokens, never raw shades. Switching themes is just swapping the token mapping.

Output Formats

CSS Custom Properties
css
:root {
  /* Type */
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  /* Colors */
  --color-primary-500: hsl(220, 80%, 50%);
  /* Spacing */
  --space-4: 1rem;
}
Tailwind Config
js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'xs': '0.694rem',
        'sm': '0.833rem',
        'base': '1rem',
        'lg': '1.2rem',
        'xl': '1.44rem',
      },
      colors: {
        primary: {
          50: 'hsl(220, 50%, 95%)',
          500: 'hsl(220, 80%, 50%)',
          900: 'hsl(220, 60%, 15%)',
        },
      },
    },
  },
}
JSON Design Tokens (W3C Format)
json
{
  "color": {
    "primary": {
      "500": { "$value": "hsl(220, 80%, 50%)", "$type": "color" }
    }
  },
  "fontSize": {
    "base": { "$value": "1rem", "$type": "dimension" }
  }
}

Step-by-Step: Full Design Token Setup

  1. Ask: What's the project? (marketing site, SaaS app, dashboard?)
  2. Type scale: Pick ratio based on project type → generate scale
  3. Colors: Get brand color → generate shade scales for primary + neutral + semantic
  4. Verify contrast: Check all text/bg combos against WCAG AA
  5. Spacing: Use base-4 scale (match Tailwind)
  6. Dark mode: Derive from light palette using inversion pattern
  7. Output: Generate CSS custom properties and/or Tailwind config

Examples

Example 1: "Set up design tokens for a SaaS dashboard"
  • Type: Minor Third (1.2) ratio, 16px base — clear hierarchy without being dramatic
  • Colors: Generate from brand blue, warm gray neutral
  • Spacing: Base-4 (Tailwind default)
  • Dark mode: Full derivation
Example 2: "I need a color palette from this brand color: #6366F1"
  • Parse HSL: ~239°, 84%, 67%
  • Generate 50–950 scale using the shade generation method
  • Map semantic tokens
  • Verify WCAG contrast for all text/bg combos
  • Output as CSS + Tailwind config
Example 3: "Create a type scale for a blog"
  • Ratio: Major Third (1.25) — strong hierarchy for editorial content
  • Base: 18px (slightly larger for long-form reading)
  • Generate scale with line-height and letter-spacing for each step

© dylanfeltus, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in design-tokens of dylanfeltus/skills.

  • SKILL.md
  • README.md

Open the folder on GitHubat commit b97a48f

Compare with similar skills

Design Token Generator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Design Token Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design Token Generator this skilldylanfeltus/skills179—~2.9kAutomated safety check: PassMIT
UI UX Pro MaxOhh-889/skyroc79526 repos~3.6kAutomated safety check: NotesMIT
Tailwind V4 Shadcnever-works/ever-works1622 repos~3.8kAutomated safety check: PassMIT
Glycemicgpt UI Foundationlumose-health/GlycemicGPT141—~707Automated safety check: PassGPL-3.0
Frontend UI Foundryjiushiwon/wg-skills114—~1.4kAutomated safety check: PassApache-2.0
Refactoring UIwondelai/skills2.4k—~3.9kAutomated safety check: PassMIT

Similar skills

  • UI UX Pro Max

    Ohh-889/skyroc

    UI/UX design intelligence. An agent skill from Ohh-889/skyroc.

    795 GitHub starsUsed in 26 repos~3.6k tokens
    Frontend & DesignAuto-check: notes

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • Glycemicgpt UI Foundation

    lumose-health/GlycemicGPT

    A skill your agent uses when adding or changing GlycemicGPT web UI structure, shared styling, Tailwind classes, semantic theme tokens, typography, base primitives, product UI components, TextInput…

    141 GitHub stars~707 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Frontend UI Foundry

    jiushiwon/wg-skills

    A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…

    114 GitHub stars~1.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Refactoring UI

    wondelai/skills

    Audit and fix visual hierarchy, spacing, color, and depth in web UIs.

    2.4k GitHub stars~3.9k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Ultimate UI

    NeverSight/learn-skills.dev

    A skill your agent uses when building user interfaces that need to look polished, modern, and intentional - not like AI-generated slop.

    217 GitHub starsUsed in 1 repo~4k tokens
    Frontend & DesignAuto-check passed

More from dylanfeltus/skills

All 10 skills in this repo

  • App Store Intelligence

    dylanfeltus/skills

    Looks up app details, ratings and reviews and searches the iOS and Mac App Stores through Apple's free iTunes APIs, with a web-search fallback for Google Play.

    179 GitHub stars~2k tokensUpdated 23 days ago
    Auto-check passed

  • AI Image Creative Direction

    dylanfeltus/skills

    Gives prompt templates, a model-selection guide and anti-generic rules for AI-generated visuals: hero images, feature illustrations, OG cards, icons and backgrounds.

    179 GitHub stars~2.6k tokensUpdated 23 days ago
    Auto-check passed

  • Hacker News Search

    dylanfeltus/skills

    Searches and monitors Hacker News stories, comments and users through the free Algolia HN Search API, with tag, points and date filters.

    179 GitHub stars~1.7k tokensUpdated 23 days ago
    Auto-check passed

  • Motion Design Patterns for React

    dylanfeltus/skills

    Framer Motion (Motion) patterns for React: spring presets, staggers, layout animations, micro-interactions, scroll effects and page transitions, with performance rules.

    179 GitHub stars~3k tokensUpdated 23 days ago
    Auto-check passed

  • Privacy.com Virtual Cards

    dylanfeltus/skills

    Creates, updates, and monitors Privacy.com virtual payment cards with spending limits for an agent making controlled purchases.

    179 GitHub stars~2.2k tokensUpdated 23 days ago
    Auto-check passed

  • Product Hunt Search and Monitoring

    dylanfeltus/skills

    Looks up Product Hunt launches, products and makers through its GraphQL API: daily top posts, topic browsing and per-post details, using a free developer token.

    179 GitHub stars~1.7k tokensUpdated 23 days ago
    Auto-check passed

Works with

Categories

Questions about Design Token Generator

What does Design Token Generator do?

Generates type scales, color palettes, spacing systems, WCAG contrast checks and dark mode palettes from formulas, as CSS custom properties, a Tailwind config or JSON tokens. The guiding rules are math over taste, accessibility by default with every text and background pair passing WCAG AA, values derived from a base and a ratio, and portable output.500 with the kinds of interface each suits.

When should I use Design Token Generator?

Design Token Generator fits situations like: setting up the design system for a new project; generating a modular type scale from a base size and ratio; checking that color pairs meet WCAG AA contrast; deriving a dark theme from an existing light palette.

How do I install Design Token Generator in Claude Code?

Run `npx skills add dylanfeltus/skills --skill design-tokens -a claude-code`. Or copy the skill folder (design-tokens in dylanfeltus/skills) into .claude/skills/design-tokens in your project. Claude Code loads it when a task matches its description.

How do I install Design Token Generator in Codex?

Run `npx skills add dylanfeltus/skills --skill design-tokens -a codex`. Or copy the skill folder (design-tokens in dylanfeltus/skills) into .agents/skills/design-tokens in your project. Codex loads it when a task matches its description.

Can I use Design Token Generator in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dylanfeltus/skills --skill design-tokens -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-tokens, .gemini/skills/design-tokens, .github/skills/design-tokens and .opencode/skills/design-tokens in your project.

What does Design Token Generator need to run?

SKILL.md names no scripts, command-line tools or credentials: Design Token Generator is instructions for the agent only.

Does Design Token Generator access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Design Token Generator safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Design Token Generator use?

Design Token Generator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design Token Generator use?

About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Design Token Generator?

Skills that share tags, products or a category with Design Token Generator: UI UX Pro Max (Ohh-889/skyroc, 795 stars), Tailwind V4 Shadcn (ever-works/ever-works, 162 stars), Glycemicgpt UI Foundation (lumose-health/GlycemicGPT, 141 stars) and Frontend UI Foundry (jiushiwon/wg-skills, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design Token Generator?

dylanfeltus (a GitHub user) maintains it in dylanfeltus/skills, which has 179 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on September 17, 2026.

Source: dylanfeltus/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.