Design extract

Skill nexu-io/open-design/plugins/_official/atoms/design-extract

🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.

Install

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

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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

SKILL.md

2.2 KB, as published. Nobody here has run it

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.

What its author says it does

SKILL.md

Design extract

Inputs

Output

Convergence

Anti-patterns the prompt fragment forbids

Status

Keep looking