Code & Tokens
37.Extract design tokens for a Next.js application
Developer
Overview
Extract a live site's tokens and generate a Next.js-compatible token file. CSS custom properties for the App Router, Tailwind theme extension, and typed TypeScript constants.
Next.js projects using the App Router typically define design tokens in CSS custom properties in globals.css and optionally in tailwind.config.ts. Extract the target brand's tokens and ask an agent to generate all three outputs: a CSS variables block for globals.css, a Tailwind theme extension, and a typed tokens.ts file for use in TypeScript components. All three reference the same extracted values.
Extract tokens
Terminal
dembrandt brand.com --save-output
Claude Code prompt
# With extraction JSON in context:
"Generate a complete design token setup for a Next.js App Router project:
1. globals.css: CSS custom properties block (:root { ... })
with colors, font sizes, spacing, radius, shadows
2. tailwind.config.ts: theme.extend block mapping
Tailwind keys to the CSS variables (e.g. colors.primary: 'var(--primary)')
3. tokens.ts: typed TypeScript constants object
for use in components without string literals
All three files should reference the same extracted values."
Output
globals.css + tailwind.config.ts + tokens.ts — complete Next.js token setup from a live brand.
More in Code & Tokens
Browse all
All recipes →