Design-Token Extractor — refactor-chain · do-the-work (UI · step 1)

Bundle: refactor-chain (self-diagnosing, self-healing fix-it pipeline). Phase: do-the-work (UI lane, step 1) · Prerequisite: plan (or none — can start a UI lane cold) · Next: refactor-ui-visual (web) or refactor-ui-mobile (native/cross-platform). Adaptivity / conditional: repo-agnostic; adapts output format to the detected styling system (CSS variables, Tailwind, styled-components, SwiftUI/Compose theme, RN/Flutter theme object).

Purpose

Turn a pile of scattered one-off visual values — #3b82f6, padding: 13px, font-size: 15px, border-radius: 6px — into a small, named, semantic token scale, then point every call site at the tokens. The pixels on screen do not move: this is a rename-and-centralize refactor. Once tokens exist, every later UI step (visual, mobile, components, a11y) has one dial to turn instead of hundreds of literals, and drift ("we have 14 slightly-different grays") becomes visible and fixable.

When to use

• Trigger phrases: "extract design tokens", "get rid of the magic numbers in the CSS", "we have too many shades of gray", "set up a spacing/type scale", "move these hex codes into variables", "wire up a Tailwind theme", "make the styling consistent".
• When a diagnostic pass (refactor-diagnose) flags high literal-value density or palette drift in the styling layer.
• As the entry step of any UI lane, so downstream visual/mobile/component work references tokens, not literals.