What the tech

Search

Browse topics

/ opens search from anywhere. Esc closes it.

Tools
What the tech
Get the newsletter

design-system: a Claude Code skill by Next Level Builder

For designers and front-end developers setting up design tokens or making on-brand HTML pitch decks. Skip it if you already run a mature token pipeline or need slides as PowerPoint files.

Copy install command View the source
Score
77of 100
Rank
#91of 239
Installs
51.5Kon skills.sh
Security
Clear 3 scanners
Updated
2026
Context
~72tokens always

Install

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

Run it in your terminal. View the source

Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app

What does design-system do?

design-system is a skill for building design tokens and token-based slide decks. Tokens come in three layers: primitive values, semantic aliases such as --color-primary, and component tokens such as --button-bg. Node scripts turn a JSON config into CSS variables and scan src/ for hardcoded values. For slides, a BM25 search script reads bundled CSV files to choose a deck strategy, layout, type scale, color treatment and copy formula per slide. It then writes HTML that imports assets/design-tokens.css, draws charts with Chart.js, and passes a token validator. Another script can pull background photos from Pexels or Unsplash.

When should you use design-system?

Use it when

  • You want primitive, semantic and component tokens as CSS variables
  • You want to find hardcoded colors in your code
  • You need an investor pitch deck that follows brand tokens

Skip it when

  • Your team already has a token pipeline
  • You need slides as .pptx files

What it needs and what it can touch

You need

  • Node.js and Python for the bundled scripts
  • The companion brand and ui-styling skills

What it can do

  • Runs bundled Node and Python scripts
  • Reads and writes project files such as assets/design-tokens.json
  • Fetches images from Pexels or Unsplash
  • Loads Chart.js from a CDN in generated slides

From reading its instructions, not from running it.

Why it scores 77

Strongest on upkeep (100 of 100), weakest on adoption (60).

  • Adoption35 points 60
  • Upkeep20 points 100
  • Trust20 points 65
  • Quality15 points 100
  • Reader answers10 points Not enough answers yet, so this does not count

How the formula works

Is design-system safe to install?

Every scanner that checked it passed it. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.

ScannerResultDate
Gen Agent Trust HubPassedNov 7, 2026
SocketPassedNov 8, 2026
SnykLow riskNov 7, 2026

Details

Installs
51,504
Repository stars
147,908
Last repository change
Tokens always loaded
about 72
Tokens when used
about 1,748
License
MIT
Data confidence
High

Alternatives to design-system

All skills for this job