Agent skill · design visual · julianoczkowski
design-tokens
Generate a design tokens file (CSS variables or Tailwind config) based on a chosen aesthetic philosophy, with light and dark mode palettes, spacing scale, type ramp, and component-level tokens. Use when starting a new project, establishing a visual system, setting up tokens, or mentions "tokens" or "design system".
Why this skill is useful
Generates a comprehensive design tokens file tailored to specific aesthetic philosophies, which the AI wouldn't reliably create on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-07-06. 492 stars on the source repository.
What this skill does
This skill generates the foundational design tokens for a project. Run this after the design brief and before building any components. Every component built after this references these tokens instead of hardcoding values. Example prompts "Set up design tokens for this project" "Generate a token system based on Dieter Rams" "I need a spacing scale and color palette before I start building" "Create tokens that match our brief" Process 1. Check what already exists. Before generating anything, scan the codebase for: CSS variable definitions (:root, [data-theme], custom property files) Tailwind config (tailwind.config.js, tailwind.config.ts) and any theme extensions Theme provider files (Material UI createTheme, Chakra extendTheme, shadcn globals.css) Design token JSON files (Style Dictionary format, Figma token exports) Any tokens.css, variables.css, theme.css, or similarly named files package.json for UI framework dependencies (tailwindcss, @mui/material, @chakra-ui/react, etc.) If tokens already exist, extend them rather than replacing. Identify gaps (missing dark mode, incomplete spacing scale, no motion tokens) and fill those. 2. Read the brief. Look for a design brief at .design//DESIGNBRIEF.md. If multiple subfolders exist, use the most recently modified one, or ask the user which feature they are working on. If a philosophy is named, use the parameters from /frontend-design to derive token values. If no brief exists, ask the user what direction they want. 3. Generate tokens in the format that matches the project's tech stack: Tailwind project → extend tailwind.config.js and write to globals.css CSS/HTML project → write to a tokens.css file CSS-in-JS project → write to a theme.ts or theme.js file If unclear, default to CSS custom properties (most portable) 4. Always generate both light and dark mode palettes. Use [data-theme="dark"] or prefers-color-scheme media query. Both palettes should feel intentional for the chosen philosophy, not just inverted values. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills julianoczkowski/design-tokens