New to Claude Skills? Learn how to install them →

nexu-io on GitHub

Design Extract

Free

Streamline design token extraction from various sources.

by nexu-io84.9k stars on nexu-io/open-design
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Design Extract does

Design Extract is a specialized tool designed to help developers and designers efficiently gather design tokens from various sources, including source code, screenshots, and Figma exports. The skill focuses on consolidating tokens related to colors, typography, spacing, and more into a single, organized output that can be easily consumed by the token mapping system. This is particularly useful for teams looking to maintain a consistent design language across their projects.

The extraction process begins with the input of either a JSON file generated from code imports, a Figma tree structure, or a folder containing screenshots. The tool scans the provided sources, identifying and extracting relevant design tokens scattered throughout the codebase or design files. Once the extraction is complete, it generates a tokens.json file that includes all the gathered tokens, along with their properties and usage references. This ensures that designers and developers have a clear understanding of where each token is used in the project.

One of the key features of Design Extract is its ability to maintain an audit trail. Each token entry in the output includes information about its source and where it is used within the project. This allows teams to easily track and manage design tokens, facilitating better collaboration between designers and developers. Additionally, the tool is designed to handle cases where no tokens are found, issuing a warning without aborting the process, allowing for smoother workflows.

Design Extract is ideal for teams transitioning to a design system or those looking to streamline their design token management. By automating the extraction process, it reduces manual effort and minimizes the risk of inconsistencies in design implementation.

When to use it

Use Design Extract when you need to consolidate design tokens from multiple sources into a single format for easier management and implementation.

When not to use it

This skill is not suitable for projects that do not require design token extraction or for teams that prefer manual processes.

What you can build with it

Migrating to a Design System

When transitioning to a new design system, use Design Extract to gather all existing design tokens from your codebase and Figma files.

Streamlining Token Management

If your team is struggling with inconsistencies in design tokens, Design Extract can automate the collection and organization of these tokens for better collaboration.

Auditing Design Token Usage

Use Design Extract to generate a comprehensive audit trail of where each design token is used within your project, aiding in design reviews and updates.

How to install Design Extract

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/design-extract --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Design extract

Spec §10 / §21.3.2: tokens scattered across a repo's CSS / theme files / Tailwind config / styled-components helpers / SCSS partials need to be lifted into one bag before token-map can crosswalk them onto the active OD design system. This atom does the lifting; the input shape is intentionally generic so the same atom serves both code-migration and figma-migration when fed different sources.

Inputs

  • code/index.json from code-import (code-migration), OR
  • figma/tree.json from figma-extract (figma-migration), OR
  • A folder of screenshot images (tune-collab quick-tune flows).

Output

project-cwd/
└── code/
    └── tokens.json     # { colors[], typography[], spacing[], radius[], shadow[] }

Each token entry carries:

{
  "kind":     "color",
  "name":     "primary-500",     // optional source name
  "value":    "#5b8def",          // canonical value
  "sources": ["styles/global.css:42", "tailwind.config.js:24"],
  "usage":   ["Header.tsx", "Footer.tsx"]
}

sources[] and usage[] are the audit trail token-map.unmatched.json references when a target token can't be found.

Convergence

The atom completes when code/tokens.json exists. Empty token bags emit a warning event but do not abort — token-map handles the empty case by skipping its mapping pass.

Anti-patterns the prompt fragment forbids

  • Hard-coded hex values inside JSX literals (color: '#fff') are tokens for this atom's purposes; record them with kind:'color' and a synthetic name so they don't disappear into the noise.
  • Tailwind utility scans must dedupe palette references against the active theme — never list bg-blue-500 and bg-blue-600 as one token.

Status

Implemented by the daemon runner in apps/daemon/src/plugins/atoms/design-extract.ts. It scans the indexed source files, extracts CSS, Tailwind, and JavaScript token evidence, and writes code/tokens.json.

Frequently asked questions about Design Extract

Similar skills