design-tokens

Generate CSS variables and config files for design tokens from design briefs.

Updated Apr 29, 2026

Search Tags:#typography #design #tailwind #tokens #css variables #style system

Ready to run

npx skills add https://github.com/richardaum/sporty-group --skill design-tokens-richardaum

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/richardaum/sporty-group/tree/main/.agents/skills/design-tokens
Command: npx skills add https://github.com/richardaum/sporty-group --skill design-tokens-richardaum

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the automated generation of comprehensive design tokens for a project, streamlining the setup of consistent visual styles.

Core Features & Use Cases

Design System Initialization: Create a set of CSS variables or config files based on aesthetic principles.
Palette and Scale Generation: Define color schemes, spacing scales, and typography for cohesive design.
Use Case: When starting a new project, generate a tailored set of tokens matching the client's branding and style philosophy, ensuring consistent implementation across components.

Quick Start

Use the design-tokens skill to generate a color palette and spacing scale aligned with the Scandinavian design philosophy based on the project brief.

Frequently Asked Questions about design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate design tokens for a new project?▼

Generate design tokens by providing a project brief or existing codebase, which the Skill uses to automate the creation of color palettes, spacing scales, and typography variables for a unified visual system.

Can I create CSS variables and Tailwind config files from a design brief?▼

Yes, you can create CSS variables and Tailwind config files by processing a design brief, translating aesthetic principles into a tailored set of style tokens suited for your specific framework.

What are design tokens and when do I need them in my style system?▼

Design tokens are CSS variables representing colors, spacing, typography, and layout scales. You need them when establishing a design system to ensure consistent aesthetic implementation across all components.

Does this approach support extending an existing codebase with new style tokens?▼

Yes, this approach supports extending an existing codebase by using your current code and design briefs to refine and generate new visual style tokens that match your established aesthetic foundation.

How do I set up a consistent color palette and spacing scale for my design system?▼

Set up a consistent color palette and spacing scale by defining these elements as design tokens, which are automatically generated based on your branding philosophy and aesthetic principles to ensure cohesive design.