mcpField
D
design-system-generator

design-system-generator

github.com/curiositechDesign & UI258173 installsUpdated 1d ago
Repository

About design-system-generator

A skill for matching natural-language design descriptions to visual trends. It includes a trend-matching script and a pattern library covering styles such as Swiss Modern and Glassmorphism.

Key features

  1. 01Matches descriptions to design trends
  2. 02Includes a trend-matching script
  3. 03Covers 20+ design trends
  4. 04Returns a match score and keywords

Use cases

  1. 01Finding a style for a design brief
  2. 02Comparing descriptions with design trends

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/curiositech/some_claude_skills --skill design-system-generator

After installing, type/design-system-generatorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

.claude-plugin/
plugin.json
references/
accessibility.md
advanced-css-techniques.md
design-prompts-styles.md
output-formats.md
trend-mapping.md
scripts/
generate-css-vars.ts
generate-tailwind.ts
generate-tokens.ts
match-trend.ts

Details

From the project README

Design System Generator

Design system generator that matches natural language descriptions to design trends. Expert in Swiss Modern, Neobrutalism, Glassmorphism, and 20+ other design trends. Includes trend matching scripts and comprehensive design pattern library.

When to Use This Skill

Activate on:

  • "design system", "design trends", "trend matcher"
  • "Swiss Modern", "Neobrutalism", "Glassmorphism"
  • "match design style", "design trend recommendation"
  • "component library trends", "modern design patterns"

NOT for:

  • Implementing individual components → design-system-creator
  • Dark mode specifically → dark-mode-design-expert
  • Typography only → typography-expert
  • Accessibility auditing → color-contrast-auditor

Core Capabilities

This skill provides a trend matching script that maps natural language descriptions to specific design trends including:

  • Swiss Modern (clean, minimal, professional)
  • Neobrutalism (bold, stark, dramatic)
  • Glassmorphism (transparent, frosted glass)
  • Neumorphism (soft, tactile, raised)
  • Dark Mode (night mode, OLED optimized)
  • Hyperminimalism (essential, calm, zen)
  • Maximalism (vibrant, colorful, rich)
  • Cyberpunk (neon, futuristic, gaming)
  • Retrofuturism (vintage sci-fi, arcade)
  • 3D Immersive (WebGL, AR, interactive)
  • Motion Design (animated, micro-interactions)
  • Bold Typography (oversized, kinetic)
  • Collage (scrapbook, artistic)
  • Sustainable Design (ethical, accessible)
  • Claymorphism (soft, rounded, playful)
  • Terminal Aesthetic (monospace, CLI)
  • Web3/Crypto (gradient, blockchain)
  • Botanical/Organic (natural, earthy)

Usage

Run the trend matcher script:

npx ts-node scripts/match-trend.ts "description of desired design"

The script will analyze the description and return the best matching design trend with a score and matched keywords.

Comments

Markdown supported