skills.rest
curiositech
curiositechOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-system-generator

Generate design system tokens as CSS, Tailwind config, and DTCG JSON from design trend descriptions.

181|30|Updated Nov 16, 2025
Search Tags:#design system#tailwind#tokens#generator#css variables#design trends
One-click install
npx skills add https://github.com/curiositech/some_claude_skills --skill design-system-generator-curiositech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-generator
Source: https://github.com/curiositech/some_claude_skills/tree/main/.claude/skills/design-system-generator
Command: npx skills add https://github.com/curiositech/some_claude_skills --skill design-system-generator-curiositech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about design-system-generator

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

FAQPage Schema
How do I generate design tokens from a natural language description?▼

To generate design tokens from a description, this Skill matches your natural language input to a specific design trend and outputs foundational tokens in CSS custom properties, Tailwind config, and W3C DTCG JSON formats.

Can I generate a Tailwind configuration based on current design trends?▼

Yes, you can generate a Tailwind configuration based on design trends by providing a natural language description of the aesthetic, which the Skill translates into a tailored Tailwind config file.

What design token formats are supported when exporting a design system?▼

Supported design token formats include CSS custom properties, Tailwind CSS configuration, and W3C DTCG JSON, ensuring compatibility with diverse project needs and workflows.

How do I quickly set up CSS variables for a specific aesthetic like Neobrutalism?▼

To set up CSS variables for an aesthetic like Neobrutalism, run the trend matcher script with your design description to automatically generate the matching CSS custom properties.

Does this design system generator work with W3C DTCG JSON standards?▼

Yes, the design system generator works with W3C DTCG JSON standards, producing standardized JSON tokens alongside CSS variables and Tailwind configurations based on your matched design trend.

Related Skills

Explore More Design & Creative Skills→
CenturyLinkCenturyLink
17

chi-search

Search Chi Design System elements using natural language and synonym matching.

Official
Intermediate
hjemmesidekongenhjemmesidekongen
1

design-tokens

Convert tokens.yml into Tailwind theme JSON, CSS custom properties, and DTCG JSON.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced