Skills
.Work. You
Rest

design-system-generator

Official

Generate design tokens from trends.

Design & Creative#design system#tailwind#tokens#generator#css variables#design trends
Authorcuriositech
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of design system tokens (CSS variables, Tailwind config, DTCG JSON) based on natural language descriptions of design trends, saving significant time and ensuring consistency.

Core Features & Use Cases

  • Trend Matching: Identifies the most relevant design trend from a natural language query.
  • Token Generation: Produces design tokens in multiple formats (CSS variables, Tailwind config, DTCG JSON) tailored to the matched trend.
  • Use Case: You need to quickly set up a design system for a new project inspired by "Neobrutalism". This Skill can generate the foundational CSS variables and Tailwind configuration that perfectly capture that aesthetic.

Quick Start

Run the trend matcher script with your design description to get started.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-system-generator
Download link: https://github.com/curiositech/some_claude_skills/archive/main.zip#design-system-generator

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.