design-extract skill
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
Is the design-extract skill safe?
Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.
No findings.
Install the design-extract skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design mkdir -p ~/.claude/skills cp -r /tmp/open-design/plugins/_official/atoms/design-extract ~/.claude/skills/design-extract
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on 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
tokens for this atom's purposes; record them with kind:'color' and a synthetic name so they don't disappear into the noise.
- Hard-coded hex values inside JSX literals (color: '#fff') are
active theme — never list bg-blue-500 and bg-blue-600 as one token.
- Tailwind utility scans must dedupe palette references against the
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.
More skills from nexu-io/open-design
- Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
- Acard-twitterTwitter quote or data card designed to pair with a post.
- Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
- Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.