32.Refactor hardcoded colors to token variables
Overview
Extract tokens from the live site. Use Cursor to find every hardcoded color, spacing, or radius value in the codebase and replace it with the correct token variable.
Codebases accumulate hardcoded values over time: hex colors in component files, pixel spacing values in utility classes, arbitrary border radii scattered across stylesheets. Extract the live site's token set with Dembrandt to establish the correct values, then load both the extraction JSON and the codebase into Cursor. Ask the agent to audit every hardcoded value, match it against the token set, and replace it with the correct CSS variable reference. The result is a codebase with a single source of truth for every visual property.
Extract live tokens
Codebase with hardcoded values replaced by token variables.
More in Code & Tokens
Browse all
All recipes →