Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
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.
code/index.json from code-import (code-migration), ORfigma/tree.json from figma-extract (figma-migration), ORproject-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.
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.
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.bg-blue-500 and bg-blue-600 as one
token.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.
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/design-extract · pinned to the source commit
# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/atoms/design-extract" ".claude/skills/"
rm -rf .skillboard-tmpReview the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
sudo apt update && sudo apt install -y gitnpm install -g @anthropic-ai/claude-code# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/atoms/design-extract" ".claude/skills/"
rm -rf .skillboard-tmpDestination: .claude/skills/design-extract
Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.