Skip to main content
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, alongside a Tailwind theme. Generate the Tailwind half directly with `--tailwind`, which writes a v4 @theme file from the extraction, then ask an agent for the two outputs measurement cannot produce on its own: a CSS variables block for globals.css and a typed tokens.ts for use in TypeScript components. All three reference the same extracted values. On a Tailwind v3 project, ask the agent to convert the @theme block into a theme.extend config instead.

Extract tokens

Terminal
dembrandt example.com --save-output

Write the Tailwind theme

Terminal
dembrandt example.com --tailwind app/theme.css
Claude Code prompt
# With extraction JSON and the generated theme.css in context:
"Generate the rest of the 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. tokens.ts: typed TypeScript constants object
for use in components without string literals
Both files must reference the same values as theme.css."
Output

theme.css + globals.css + tokens.ts, a 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 StorybookW3C DTCG 2025.10 compliant token export

Browse all

All recipes →

60 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