Design Token Extractor & Migrator

Hardcoded design values pile up in real codebases — hex colors, spacing literals, Tailwind arbitrary values, CSS-in-JS templates. Teams want a token system, but the migration is tedious and easy to get wrong if you rewrite everything at once.

Approach

I built a monorepo with three packages that share one pipeline: scan, cluster and name, review, then rewrite.

@design-token-extractor/core owns the logic. @design-token-extractor/cli exposes scan, generate, check, preview, and apply. The VS Code / Cursor extension (design-token-extractor-migrator) wraps the same pipeline with commands, CodeLens, and a preview UI.

Nothing writes source until you confirm. Preview Migration is accept/reject per safe replacement. Risky patterns — calc(), multi-layer shadows, vendor prefixes — stay flagged for manual review. Undo restores the last local backup.

Result

The extension is on the Visual Studio Marketplace and Open VSX. The core and CLI are on npm. The repo is public under MIT.

What I would tighten next: richer semantic naming suggestions, and better defaults for large monorepos where include/exclude globs matter as much as the scanner itself.