# Design Token Alignment

> Align design artifacts with code tokens and component APIs so spacing, color, type, and states stay consistent through implementation.

- Skill: `45ck/design-token-alignment` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 45ck/design-token-alignment`
- Raw SKILL.md: https://api.skillmd.com/api/skills/45ck/design-token-alignment/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: 45ck (https://skillmd.com/u/45ck)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/45ck/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