map_reference_to_tokens
Convert captured CSS values into matching design tokens, using your token families and thresholds. Unmatched values become gaps with reasons, so generated code respects your design system.
Instructions
Translate a captured pattern's raw literals (font-size: 64px, color: rgb(247,248,248)) onto the project's own design tokens, so generated code uses the user's type ramp and palette instead of another site's values. Pure and deterministic — no model, no network. Colours compare by RGBA distance (exact at 0, near under 12; alpha counts), lengths normalize to px at root 16 (near under 2px), unitless numbers near within 1%, font families compare on the first family. A property with a known token family (font-size, line-height, gap, radius, …) only ever binds inside that family: if the closest token by value belongs to another ramp, the result is a gap naming it, not a binding. Winners are ordered by distance, then family fit, then shortest and lexicographic token path. Percent and viewport units, unparseable colour syntaxes, shadows, gradients, and other unmatchable classes become gaps with a stated reason — never a forced match. Broken token chains are reported in diagnostics whether or not anything else matched. A project with no tokens is not an error: every property returns as a gap at coverage 0. It does not invent tokens and does not write code.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| ref_id | No | Captured reference to translate; its styles are the input. Supply this or captured. | |
| tokens | No | Flattened design tokens directly, if not reading a DESIGN.md | |
| captured | No | Raw CSS property/value pairs to translate, if not using a stored ref_id | |
| properties | No | Only map these CSS properties; omit to attempt every captured property | |
| thresholds | No | Override the near-match thresholds | |
| design_file_path | No | Path to the project's DESIGN.md; its flattened tokens are the target vocabulary. Supply this or tokens. |