Framework Guides

Choose your stack and use designtoken.md with framework-specific patterns. Each guide shows how to apply token scales, typography, spacing, and component rules with your tooling.

React

Map token scales to component props, CSS variables, and styling systems for predictable, reusable React UI.

Read guide →

Next.js

Use designtoken.md with App Router, server/client components, and design-aware UI generation across routes.

Read guide →

Tailwind CSS

Translate token roles into utility-first class naming and config that keeps every generated component on-brand.

Read guide →

Vue

Apply token definitions in single-file components, style scopes, and design-consistent Vue component APIs.

Read guide →

Svelte

Use token scales in Svelte components and transitions with clear styling rules your agent can follow consistently.

Read guide →

One workflow, every framework

Generate once. Use framework-specific implementation details without changing your token language.

01
Generate tokens
02
Pick your framework
03
Build on-brand UI