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
Ready-to-paste message
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-extractOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/atoms/design-extract/SKILL.md -o SKILL.mdTechnical 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.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.
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
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC