design-tokens
This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.
Design-tokens generates foundational design tokens and CSS variables tailored to your project's tech stack and aesthetic direction.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-06
Design-tokens generates foundational design tokens and CSS variables tailored to your project's tech stack and aesthetic direction. This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.
Use it when
- Yes.
- design-tokens outputs tokens in multiple formats to fit your workflow: Tailwind config files, CSS custom properties, JSON token files.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
julianoczkowski/designer-skills/design-tokens
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does design-tokens generate design tokens for my project?
design-tokens creates a complete token foundation by generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy, ensuring consistency from the start.
Can design-tokens create a design system with CSS variables?
Yes. design-tokens generates CSS custom properties organized as a complete design system, including semantic color tokens, spacing scales, and typography systems. The skill structures these variables for both light and dark modes, making it easy to implement theme switching and maintain visual consistency across your entire project.
What formats does design-tokens support for output?
design-tokens outputs tokens in multiple formats to fit your workflow: Tailwind config files, CSS custom properties, JSON token files, and theme files. This flexibility lets you integrate the generated tokens directly into your existing build process and component architecture without reformatting.
How do I set up design tokens for light and dark mode?
design-tokens automatically generates intentional light and dark mode palettes as part of its token creation process. The skill derives these palettes from your chosen design philosophy, creating semantic color tokens that work across both modes. You can then reference these tokens in your CSS or Tailwind config for instant theme switching.
Can design-tokens help establish a spacing scale and color palette?
Absolutely. design-tokens sets up spacing, typography, and color scales based on your design philosophy. It generates a complete visual system including semantic color tokens, proportional spacing scales, and font hierarchies—all structured so you can standardize component-level token references across your project.
Is design-tokens suitable for projects using Tailwind?
Yes. design-tokens can extend or establish tokens directly in your Tailwind config, generating color palettes, spacing scales, and typography tokens that integrate seamlessly. The skill creates a token system before you build components, ensuring your design foundation is intentional and consistent from day one.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
- 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, ChakraextendTheme, shadcnglobals.css) - Design token JSON files
(truncated - see the full file via the links below)
File tree — 1 file
design-tokens/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate foundational design tokens and CSS variables for a new project”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
frontend-design generates working frontend code with intentional aesthetic direction, grounded in named design philosophies. Choose or describe a visual style—Scandinavian warmth, Swiss objectivity, Japanese restraint, Brutalist rawness, or others—and receive code that reflects that philosophy through typography, color, layout, and motion. The skill scans your codebase first to respect existing components and tokens.
Design Brief walks you through a structured conversation to define a new feature or page, then scans your codebase for existing design tokens, components, and patterns. It produces a markdown brief that captures the problem, solution, design principles, aesthetic direction, and component inventory—ensuring your design extends rather than duplicates existing work.
This skill transforms a design brief into a structured task list where each item is a vertical slice—a complete, self-contained piece of work that can be built and verified independently. It scans your codebase for existing components and tokens, then orders tasks by dependencies, visual priority, and risk to keep your build moving forward efficiently.
This skill provides templates and patterns for constructing production-grade design systems with Tailwind CSS v4's @theme directive. It covers semantic token naming, color scales, typography systems, spacing grids, shadow and motion tokens, plus multi-brand theming and dark mode configuration.
design-flow walks you through the complete design process as a guided sequence, running each phase in order and waiting for confirmation before advancing. It orchestrates six core phases—from clarifying your thinking through building components—plus an optional design review, with the ability to skip phases you don't need and resume mid-project where you left off.
This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.
More skills information-architecture (Apache-2.0) · Tailwind Css (unlicensed) · design-context-extract (MIT)