Skip to content
Get packs

Design Token Extractor

Pulls colors, fonts, spacing and radius values out of code, screenshots or Figma exports into one token list.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

This skill teaches an AI agent to gather the design values (colors, typography, spacing, corner radius, shadows) that are scattered across a project's stylesheets, theme files, Tailwind config and component code, or read from screenshots or Figma exports, and write them into a single structured file called tokens.json. That file is then meant to be matched against a target design system by a separate step. Each entry records where it was found, so the result can be traced back to its source.

Great for

  • Designers or front-end developers migrating an existing codebase to a new design system
  • Teams who want an inventory of every color and font value used across a project
  • Anyone turning a Figma export or set of screenshots into a machine-readable token list

Skip it if

  • Projects that have no design values to extract, since the skill produces empty output and relies on follow-up steps to handle that case
  • Situations needing a verified, pixel-accurate design spec, because values are inferred from code or images and may miss or misread some tokens

Try asking

  • “Pull all the colors and font sizes out of my React project's CSS and Tailwind config into one token file”
  • “Extract design tokens from these screenshots so I can map them to our design system”
  • “Scan this Figma export and list the spacing and radius values I should migrate”
Step-by-step guide: how to use Design Token ExtractorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    design-extract.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip design-extract.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip design-extract.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Run the code-import or figma-extract step first so the input files exist before extraction starts
  • Review tokens.json afterward, since hard-coded hex values are recorded as synthetic tokens and may need renaming
  • Keep the sources and usage fields when sharing results, as they show exactly where each value came from

What's inside

  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.