Import Design Tokens
import_design_tokensConvert an existing design system from CSS, DTCG JSON, or theme objects into CSS, Tailwind, SwiftUI, Compose, or DTCG. Audits semantic roles and WCAG contrast to reveal what’s missing or undefined.
Instructions
Read an EXISTING design system and convert it: paste CSS custom properties (a Tailwind v4 @theme block, a shadcn :root block, plain CSS), a W3C DTCG token file, or a theme object as JSON, and get back the roles it names, the semantic roles it is missing, a WCAG contrast check on the pairs it defines, and the whole set re-emitted as CSS / Tailwind / SwiftUI / Compose / DTCG. The inverse of generate_design_tokens — use it to take a web theme to iOS or Android, to audit an inherited system, or to see what a third-party theme leaves undefined. Only NAMED tokens are read; a bare hex inside a rule carries no role and is never imported as one (use audit_design_system to count those). JavaScript configs are never evaluated.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | No | Token set / brand name for the emitted artifacts (default 'Imported') | |
| format | No | Format to re-emit in (default 'all'). Use 'swiftui' or 'compose' to take a web theme to native. | |
| source | Yes | The token source: CSS custom properties, DTCG JSON, or a theme object as JSON. The format is detected automatically. |