Guide · Agent skill
How to use the design-extract agent skill: token extraction
Updated · written with AI from the project's own documentation and checked against our catalogue data
design-extract is an agent skill that tells an AI agent how to collect the design values in a project, such as colors, fonts, spacing, corner radius and shadows, and write them into one structured file called tokens.json. It is useful for designers and front-end developers moving an existing codebase onto a new design system, or anyone who wants a machine-readable list of the design values a project uses. This guide explains what the skill does, how to install it, how to trigger it, and what to check in the output.
Design Token Extractornexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the design-extract ZIP from this page. It contains open-design.json and SKILL.md.
- 2Unzip the skill folder. Unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ inside one project.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings, then Capabilities, then Skills, and upload the skill.
- 4Prepare your input. Run code-import to produce code/index.json, run figma-extract to produce figma/tree.json, or gather a folder of screenshots.
- 5Ask for an extraction. Request token extraction in plain language, naming your input such as the imported codebase, the Figma export or the screenshots.
- 6Check code/tokens.json. Open code/tokens.json in the project and spot-check several entries against their sources and usage fields.
What is an agent skill, and what does design-extract make the agent do?
An agent skill is a folder with a SKILL.md file that gives an AI agent instructions for one kind of task. The agent reads these instructions when a request matches the skill.
design-extract covers the extraction step of a code migration or Figma migration. Design values are often spread across stylesheets, theme files, a Tailwind config and component code. The skill directs the agent to gather those values and record them in code/tokens.json inside the project working directory, grouped as colors, typography, spacing, radius and shadow. Each entry lists where the value was found, so you can trace it back to its source.
- Reads input from code/index.json (from the code-import step), figma/tree.json (from the figma-extract step), or a folder of screenshot images.
- Writes code/tokens.json with arrays for colors, typography, spacing, radius and shadow.
- Records sources (file and line) and usage (the components that use each value) for every token.
- Treats hard-coded hex values inside JSX as color tokens, with a synthetic name.
{ "kind": "color", "name": "primary-500", "value": "#5b8def", "sources": ["styles/global.css:42", "tailwind.config.js:24"], "usage": ["Header.tsx", "Footer.tsx"] }What do you need before you install design-extract?
The skill's code runs inside the Open Design application, so you need the Open Design daemon runtime. The skill does not run on its own.
The skill also needs input. Run an earlier step first, either code-import (which produces code/index.json) or figma-extract (which produces figma/tree.json). You can also use a folder of screenshot images.
- Open Design daemon runtime
- code/index.json from code-import, or figma/tree.json from figma-extract, or a folder of screenshots
- Permission to run the skill's scripts, since this skill runs scripts
How do you install the design-extract skill?
Download the ZIP file for the skill from this page. The package contains open-design.json and SKILL.md.
Option 1: unzip the folder into ~/.claude/skills/ to make it available to you across projects. Option 2: unzip it into a project's .claude/skills/ folder to make it available only in that project.
Option 3: in the Claude apps, open Settings, then Capabilities, then Skills, and upload the skill there.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
How do you trigger design-extract with a natural request?
You do not need a special command. Ask the agent in plain language to extract design tokens from the source you have. The agent matches your request to the skill's description and follows its steps.
Name the input you have so the agent picks the right route. Code-based requests refer to an imported codebase, Figma requests refer to a Figma export, and screenshot requests refer to a folder of images.
- "Extract the colors, fonts and spacing from this imported codebase into tokens.json."
- "Pull the design tokens out of this Figma export."
- "Make a token inventory from these screenshots."
What does a good result look like, and what can go wrong?
Check that code/tokens.json exists in the project working directory. Look at the sources and usage fields on a few entries to confirm the values came from where you expect.
If the project has no design values, the skill still finishes but produces empty output. It emits a warning rather than stopping. Values are inferred from code or images, so some tokens may be missed or misread. Do not treat the output as a pixel-accurate design spec.
- Spot-check several entries against the source files named in sources[].
- Expect gaps where values are built dynamically or only appear in images.
- Empty output is expected for projects with no design values.
Safety notes: scripts and network access
This skill runs scripts. The runner is implemented in apps/daemon/src/plugins/atoms/design-extract.ts, and it scans the indexed source files and writes code/tokens.json. Review the source files you give it, as you would for any script you run.
The skill does not use the network, according to its listing.
- Runs scripts: yes
- Uses network: no
- Reads your indexed source files and writes only code/tokens.json
What people use it for
- Migrating a front-end codebase from one styling setup to a new design system by first listing every color and font in use.
- Building an inventory of every color value used across a project, with the files that use each one.
- Turning a Figma export into a machine-readable list of tokens for a later matching step.
- Creating a token list from a set of screenshots when no code or Figma file is available.
Frequently asked questions
Is design-extract free?
The source gives the licence as Apache-2.0. It does not list prices, so check the project's repository for licence terms.
What do I need to run design-extract?
You need the Open Design daemon runtime, because the skill's code runs inside the Open Design application. You also need code/index.json from code-import, figma/tree.json from figma-extract, or a folder of screenshot images.
How do I install the design-extract skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings, then Capabilities, then Skills.
Where does the output go?
The skill writes code/tokens.json inside the project working directory. Each token has a kind, a name, a value, and sources and usage fields that show where it was found.
Why is my tokens.json empty?
The project may have no design values to extract. The skill then emits a warning and still completes, leaving the later matching step to skip its mapping pass.
Does design-extract give a pixel-accurate design spec?
No. Values are inferred from code or images, so some tokens may be missed or misread. Use the output as an inventory to verify, not as a final specification.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
design-extract suits designers and front-end developers who need an inventory of colors, fonts and spacing from an existing codebase, Figma export or screenshots, and who will check the results. It is not a good fit for projects with no design values, or for anyone who needs a verified, pixel-accurate design spec, since values are inferred and can be incomplete.
Download the skill