Design Tokens Prompts

Generate a token system

Generate a complete design token system for [brand/product] using [CSS variables/JSON/YAML]. Include color, typography, spacing, and component tokens with semantic naming.

Naming structure

Create design tokens using a tier-based naming convention:
component-category-state-role
Build clear hierarchy from foundations to component-level tokens, and include references/aliases.

Accessibility tokens

Create accessibility tokens for focus indicators, high contrast mode, reduced motion, and screen-reader states. Include WCAG notes.

Audit token quality

Audit these tokens for naming consistency, hierarchy quality, accessibility compliance, and missing variants. Suggest concrete fixes.

Compare color tokens used in this Figma frame to tokens-studio.json. List mismatches and auto-fix values that differ by <=2%.

Implementation tracking

Create a token implementation table:
Token Name | Design Status | Development Status | Testing Status | Documentation Status | Release Version | Known Issues.

Figma Variables sync

Compare Figma variables with code tokens and identify missing variables, unused tokens, and sync issues.

Figma MCP: use get_variable_defs, then output a Tailwind config that maps variables 1:1.