
Design Extract
FreeStreamline design token extraction from various sources.
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 source1. Install with the skills CLI
npx skills add nexu-io/open-design/design-extract --agent claude-code2. 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-ioDesign 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.jsonfromcode-import(code-migration), ORfigma/tree.jsonfromfigma-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 withkind:'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-500andbg-blue-600as 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
Design System
Streamline design token management and presentation generation.
Visual Style
Create and apply portable visual design systems effortlessly.
Paperclip Design Guide
Build consistent, reusable UI components with ease.
Design Brief
Transform vague design requests into structured specs.
Token Map
Automate Figma and code token mapping to design systems.
Kami Landing
Create professional single-page documents effortlessly.
