Agent skill · design visual · nexu-io
design-extract
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
Why this skill is useful
Adds a specialized workflow for extracting design tokens from various sources into a standardized format that the AI wouldn't reliably generate on its own.
What it needs
Requires node installed locally. About 1k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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 Each token entry carries: 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/design-extract