Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
61
72%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./plugins/_official/atoms/design-extract/SKILL.mdSpec §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.
81044a0
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.