← ClaudeAtlas

tokenslisted

Audits whether the colors on a Figma frame or page are bound to design system tokens, and maps and binds hardcoded colors to the right token. Derives token-to-hex from bindings already in the file so every mapping has evidence, grades the results, and auto-proposes only the safe ones. Lint mode (check only) and bind mode are separate. Which library and which token groups come from the design_system section of figma-conventions.yaml; on auto it detects the library the file is connected to. Triggers - "/fig:tokens", "check the token bindings", "find unbound colors", "토큰 바인딩 검수", "하드코딩 색상 검사", "디자인시스템 연동 점검".
byjunyoung/claude-product-skills · ★ 4 · Data & Documents · score 70
Install: claude install-skill byjunyoung/claude-product-skills
# fig:tokens — audit and repair design system token bindings Checks whether the colors inside a frame are actually bound to design system variables, and connects unbound hardcoded colors to a token through **a mapping that has evidence behind it**. Theming, rebranding, and consistency only hold if every color goes through a token, so this runs as the last check before handoff. **Prerequisites**: always load the `figma:figma-use` skill before calling `use_figma`. **Seat check before the first write** — call `whoami` once. Where every plan it lists carries `seat: View`, stop before any `use_figma` write and say so: the reading half of this skill runs on a View seat, the writing half needs an Edit seat on the file's plan, and no retry changes that. Where the seats are mixed, go ahead — and if the first write comes back as a permission error, report the seat table and stop rather than retrying. ## When to invoke - "check whether this frame's colors are all bound", "find colors that aren't on a variable" - "convert the hardcoded hex values to tokens" - The token check right before handoff, once the design is done ## When NOT to invoke - Frame naming and section tidying → `/fig:prep` - Structure and flow rule violations → `/fig:lint` - Flow arrows → `/fig:arrows` - Creating the tokens (variables) themselves → `figma:figma-generate-library` - Designing screens → `figma:figma-generate-design` ## Inputs - `figma_url` (required): the page or frame to audit - `mode` (optional):