Design Token Alignment

Use this skill when a design needs to map cleanly onto an existing component system or token set.

Checklist:

• identify which design values already map to existing tokens
• flag values that are near-matches and should be normalized instead of copied literally
• note any missing tokens, variant gaps, or component API mismatches
• keep the recommendation biased toward reuse before extension
• produce a concise token and component mapping table
• keep token decisions and component-state mappings in a durable source artifact
• generate a visual review surface when humans need to compare token impact, states, or before/after UI behavior

Good output:

• existing tokens reused where possible
• missing tokens called out explicitly
• API gaps separated from pure styling gaps
• implementation guidance that preserves the current design system shape
• source-backed review path when a generated visual comparison is needed

Avoid:

• creating one-off tokens for every visual exception
• solving a component API problem with raw styling overrides
• assuming the design tool naming is already production-ready