Skip to content
Skillpedia
Interfaces (UI/UX)101k · #521

design-extract

Helps your agent extract design information like colors and fonts from code or images. This is useful for ensuring your project's design is consistent.

What it does

This tool gathers design information like colors, typography, and spacing scattered across code files or images, and organizes them into a single location for other programs to use.

When to use it

  • ✓When you have a project with various design elements spread out.
  • ✓When migrating a design from one program to another.
  • ✓To organize the visual styles of a website or application.

Example of what to ask your AI

“Organize the design elements from my code and images into a single file.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/plugins/_official/atoms/design-extract/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/plugins/_official/atoms/design-extract/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The tool looks for color, font, and spacing definitions in different types of code files (like CSS or JavaScript) and also in images. It collects this information and saves it in a standardized format.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill design-extract

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/atoms/design-extract/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

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.

FAQ

What are 'design tokens'?

They are like basic building blocks for a project's visual appearance, such as exact colors used, font types, and the space between elements.

Why is it important to organize these 'tokens'?

Organizing 'tokens' makes design maintenance and consistency easier across the entire project, and allows other tools to use this information more efficiently.

Can the tool extract design from any file type?

It's designed to work with common code files (CSS, JavaScript, Tailwind, etc.) and images. For more complex designs, like those made in Figma, an additional step might be needed.

Details

Original description by the author

Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#521
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills