Generate Design Tokens
generate_design_tokensConvert a design-token spec into ready-to-use CSS, Tailwind v4, SwiftUI, Jetpack Compose, and DTCG JSON files, establishing a single source of truth for web, iOS, and Android.
Instructions
Turn a design-token spec (semantic colors + optional spacing/radius/type scales) into REAL, ready-to-use artifact files: CSS custom properties, Tailwind v4 @theme, SwiftUI, Jetpack Compose, and W3C DTCG JSON. Deterministic — outputs code, not advice. Use it to give a project one source of truth across web, iOS and Android. Pair with audit_accessibility to verify the palette's contrast.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | No | Token set / brand name (default 'Brand') | |
| radii | No | radius name→px (default sm/md/lg/xl/full; use 9999 for pill) | |
| colors | Yes | Semantic color roles → hex. e.g. {"primary":"#4F46E5","onPrimary":"#FFFFFF","surface":"#0A0A0B","textPrimary":"#F5F5F5","danger":"#EF4444"} | |
| format | No | Output format (default 'all') | |
| spacing | No | px spacing scale (default 8pt scale 2..96) | |
| fontSizes | No | type scale name→px (default xs..4xl) | |
| fontFamilies | No | font role→stack (default sans/mono) |