skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

design-token-extractor

Extract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.

Updated Jul 26, 2026
Search Tags:#cross-platform#wcag#css-variables#image-analysis#design-token#tailwind-utilities
One-click install
npx skills add https://github.com/shawn-sandy/skills --skill design-token-extractor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-token-extractor
Source: https://github.com/shawn-sandy/skills/tree/main/design-token-extractor
Command: npx skills add https://github.com/shawn-sandy/skills --skill design-token-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about design-token-extractor

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

FAQPage Schema
How do I extract design tokens from a screenshot or mockup image?▼

Extract design tokens from images by uploading a screenshot or mockup and asking Claude to identify colors, typography, spacing, dimensions, and motion. The Skill analyzes the imagery and converts extracted tokens into W3C DTCG JSON, CSS variables, SCSS, or Tailwind utilities automatically.

Can I export design tokens as CSS custom properties with dark mode support?▼

Yes. The Skill generates CSS custom properties using cascade layers and includes dark-mode variants and reduced-motion states. Outputs comply with W3C DTCG specifications and support modern CSS practices for accessibility and responsive design.

What output formats does design token extraction support?▼

Outputs include W3C DTCG JSON, CSS custom properties, SCSS variables, Tailwind-style atomic utilities, and platform-specific formats. All exports are production-ready and validated against W3C Design Token Community Group standards.

How does token extraction enforce WCAG accessibility requirements?▼

The Skill includes built-in WCAG contrast checking and motion-reduction variants during extraction. It validates tokens for accessibility compliance and generates utilities that support dark mode and reduced-motion preferences automatically.

Can I generate Tailwind utility classes directly from design mockups?▼

Yes. The Skill extracts tokens from design images and generates comprehensive Tailwind-style atomic utilities for spacing, colors, typography, and dimensions, enabling rapid UI implementation from design references.

What design elements can be extracted as tokens from images?▼

The Skill extracts colors, typography (fonts, sizes, weights, line-heights), spacing scales, dimensions, and motion values from mockups, screenshots, and design documentation, converting them into structured, reusable token formats.

Related Skills

Explore More Design & Creative Skills→
KuassKuass
1

visual-analysis

Analyze images and UI mockups to extract information and compare designs.

Community
Intermediate
xrehpicxxrehpicx
2

tailwind-design-system

Build and maintain Tailwind CSS v4 design systems with design tokens and responsive patterns.

Community
Advanced
hongmaple0820hongmaple0820
9

ui-design-system

Generate design-system tokens and handoff documentation for React, Tailwind, and CSS.

Community
Advanced
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate