skills.rest
richardaum
richardaumCOMMUNITY
Explore all skills by this author →
𝕏@richardaumGitHub

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
One-click install
npx skills add https://github.com/richardaum/sporty-group --skill design-tokens-richardaum
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
tropekstropeks

design-consultation

Propose and document a complete design system in a DESIGN.md file.

Community
Advanced
HarshodaiHarshodai

design-system

Manage design token architecture and generate brand-compliant HTML slide decks with Chart.js.

Community
Advanced
yashvinthanyashvinthan

visual-design-foundations

Generate design tokens and style guides for accessible user interfaces.

Community
Intermediate
JaivishChauhanJaivishChauhan
6

tailwind-mastery

Configure Tailwind CSS v4 design systems with CSS variables in Next.js projects.

Community
Advanced