Skip to main content
Home/Recipes/Extract design tokens for a Next.js application
Code & Tokens

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 example.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

Design-system-aware Cursor projectGive GitHub Copilot brand contextRefactor hardcoded colors to token variablesTailwind defaults to brand themeLegacy CSS to design tokensGenerate a shadcn/ui theme from any websiteExport design tokens to Storybook

Browse all

All recipes →

52 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more