Skip to main content

UI element

Design token extractor

The design system your codebase already implies, extracted into named tokens.

By
Caleb and Ryan, the founders
Updated
September 2, 2026
Version
0.1, in the library
  • Claude Code
  • Cursor

Reads a codebase's actual colors, spacing, radii and type sizes, clusters the near-identical values, and proposes the token set with a migration map from every hardcoded value to its token. The site you have becomes the system you meant, without a redesign.

Built, documented, running.

Part of the working library we deploy from on every engagement.

Bring this into a project

Runs on

  • Claude Code
  • Cursor

2 requirements, below.

  • Complete and documented: the same files we run ourselves.
  • Deployed and tuned to your stack as part of an engagement.

The file

Draft excerpt
# Proposed tokens found: #6e7379, #6f7480, #6d7278 (41 uses)propose: --text-muted, one value, named oncemap: every file and line that changesrule: clusters merge only inside a perceptual threshold

What is inside

3 items. Includes deployment guide.

  • AGENT.mdScan, cluster, propose, map
  • token-format.mdHow proposed tokens and migrations are written
  • guide.mdMigrating one component family at a time

Who it is for

  • Seventeen grays, four of them intentional.
  • Consistency exists in the good sections and nowhere else.
  • You want tokens without stopping the world to make them.

Requirements

  • The front-end codebase
  • A decision-maker for the naming pass

Where this sits

  1. This system

    Design token extractor

    In the library, running.

  2. In your stack

    Deployed on an engagement

    The audit finds which system earns its place first; we install and tune it around how you work.

Changelog

  1. September 2, 2026In the library. Version 0.1 runs in our own operation.

Related

  1. Featured

    Skill

    Code review skill with a pattern database

    A review pass that knows your framework's failure patterns before it reads your diff

    Works with Claude Code, Cursor.

    Built and running

  2. UI element

    The scroll scene shell

    A sticky scene scrubbed by scroll, with the static fallback built in

    Works with Claude Code, Cursor.

    Built and running

  3. UI element

    The mega menu

    A mega menu that opens on hover with intent and behaves on a keyboard

    Works with Claude Code, Cursor.

    Built and running