Skill LibraryPrompt Skill1 DesignsTop Views

Semantic Token Contract

Extract semantic tokens, alias layers, component mappings, light/dark modes, and migration-ready frontend contracts from style/design.md, brand references, or existing CSS.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Design Tokens

Skill Directive

Description

Extract semantic tokens, alias layers, component mappings, light/dark modes, and migration-ready frontend contracts from style/design.md, brand references, or existing CSS.

TagsDesign Tokens

Skill Prompt

- Use when converting DESIGN.md, Figma styles, brand colors, existing CSS variables, or screenshots into maintainable frontend themes; inputs must include sources, target framework, light/dark needs, component inventory, and naming convention.
- Audit the existing system first: CSS variables, Tailwind theme, components.json, design.md, component variants, dark mode, and hardcoded hex/px; new tokens must fit current naming instead of creating a second system.
- Output three layers: base/primitive tokens hold atomic values, alias/semantic tokens express use, and component tokens bind buttons, inputs, cards, navigation, tables, and states.
- Color tokens cover at least bg, surface, surface-raised, border, text, muted, accent, danger, success, warning, focus-ring, and selected; every text/background pair gets a contrast-risk note.
- Typography tokens define family, display/body/mono roles, type scale, line-height, weight, letter spacing, and usage context; components must not scatter one-off font sizes.
- Spacing, radius, shadow, z-index, and motion tokens state density and product type: compact, comfortable, editorial, or dashboard; marketing scale should not leak into dense admin tables.
- State tokens cover hover, active, focus-visible, disabled, selected, loading, and error; dark mode needs independent values or an algorithm, not simple inversion.
- Frontend implementation outputs CSS variable/Tailwind mapping, fallback, dark override, component usage matrix, replacement checklist, and remaining hardcoded values; local exceptions need comments.
- Output: token inventory, semantic table, component mapping, state matrix, migration checklist, QA commands, and tokens needing design review.
- Common mistakes: treating palettes as semantic tokens, hardcoding hex/px in components, naming tokens by color instead of role, simple dark-mode inversion, and status colors without contrast checks. Sources: DTCG Format Module, USWDS settings/design tokens, Style Dictionary DTCG.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Semantic Token Contract

More pages using Semantic Token Contract