design-language

Transform design language tokens into Panda CSS.

Updated Dec 25, 2025

Search Tags:#theming #architecture #tokens #panda-css #design-language #swappable

Ready to run

npx skills add https://github.com/Tasty-Maker-Studio/Discourser-Design-System --skill design-language

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-language
Source: https://github.com/Tasty-Maker-Studio/Discourser-Design-System/tree/main/.claude/skills/design-language
Command: npx skills add https://github.com/Tasty-Maker-Studio/Discourser-Design-System --skill design-language

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill documents a three-layer architecture that makes design languages swappable by swapping a single language file and transforming tokens into Panda CSS, enabling scalable design system work.

Core Features & Use Cases

Three-Layer Architecture: Infrastructure, Design Language, and Panda CSS transformation.
Design Language Contract: Interface for colors, typography, spacing, etc.
Swapping Aesthetics: One-line change to activeLanguage exports to switch design language.

Quick Start

Update src/languages/material3.language.ts to define tokens, then run the transform function to produce Panda tokens for Panda CSS.