Back to browse

nexu-io/open-design

design-extract

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

74Collecting
See how to use itView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/atoms/design-extract"
Automated source guideDesignStandard source

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Reorganized from the pinned upstream SKILL.md

Source-grounded design guide: 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 i…

npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/atoms/design-extract"
Check the pinned source

The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.

261 source words · 5 usable sections

Design context

  • 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).

Design outputs

  • Each token entry carries:
  • sources[] and usage[] are the audit trail token-map.unmatched.json references when a target token can't be found.

Design process

Read design-extract through these 4 source sections

Sections are extracted automatically from the pinned SKILL.md and link back to the source.

01

Inputs

code/index.json from code-import (code-migration), OR

SKILL.md · Inputs
code/index.json from code-import (code-migration), ORfigma/tree.json from figma-extract (figma-migration), ORA folder of screenshot images (tune-collab quick-tune flows).
02

Output

Each token entry carries:

SKILL.md · 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.
03

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.

SKILL.md · 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.
04

Anti-patterns the prompt fragment forbids

Hard-coded hex values inside JSX literals (color: 'fff') are

SKILL.md · Anti-patterns the prompt fragment forbids
Hard-coded hex values inside JSX literals (color: 'fff') areTailwind utility scans must dedupe palette references against the- 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 de…

Design checklist

Verify each item before delivery

The source section “Inputs” has been checked.

The source section “Output” has been checked.

The source section “Convergence” has been checked.

The source section “Anti-patterns the prompt fragment forbids” has been checked.

Source output checked: Each token entry carries:

Source output checked: sources[] and usage[] are the audit trail token-map.unmatched.json references when a target token can't be found.

Choose a different workflow

When another Skill is the better fit

ab-testing

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program

A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.

Open source detail

design-intelligence

Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.

A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.

Open source detail

existing-ui-audit

Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.

A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.

Open source detail

FAQ

What does the design-extract source document cover?

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 i…

How do I install design-extract?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/atoms/design-extract". Inspect the command and pinned source before running it.

Repository stars
82,073
Repository forks
9,485
Quality
74/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

74/100
Documentation25/30
Specificity12/25
Maintenance20/20
Trust signals17/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

ab-testing by coreyhaines31

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program

design-intelligence by event4u-app

Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.

existing-ui-audit by event4u-app

Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.

emil-design-eng by nexu-io

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

design-review by event4u-app

Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min

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.

Skill path
plugins/_official/atoms/design-extract/SKILL.md
Commit SHA
89d6d4ef21ba
Repository license
Apache-2.0
Data collected