Skills
.Work. You
Rest

design-token-extractor

Community

Extract tokens from images to production-ready tokens and utilities.

Design & Creative#cross-platform#wcag#css-variables#image-analysis#design-token#tailwind-utilities
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill analyzes design mockups, screenshots, or documentation to extract design tokens (colors, typography, spacing, dimensions, and motion) and convert them into production-ready outputs including W3C DTCG JSON, CSS custom properties, and Tailwind-style utilities.

Core Features & Use Cases

  • Visual token extraction: Derives tokens from images and design references.
  • Cross-format outputs: Exports W3C JSON, CSS variables, SCSS, and Tailwind-style utilities, plus platform-specific outputs.
  • Accessibility-conscious: Includes WCAG considerations and utility variants for dark mode and reduced motion.
  • Tailwind-style utilities: Generates comprehensive atomic utilities for rapid UI building.

Quick Start

Provide an image or design mockup, then ask Claude to extract tokens (e.g. "Extract tokens from this screenshot and output CSS variables and a Tailwind-style utilities file."). No code fences.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-token-extractor
Download link: https://github.com/shawn-sandy/skills/archive/main.zip#design-token-extractor

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.