design-system Skill (nextlevelbuilder): Tokens and Slides

Makes Claude build design tokens (primitive, semantic, component), component specs and on-brand HTML slide decks.

Installs: 46.3K; on skills.sh
Stars: 143.8K; on GitHub
Files: 26; besides SKILL.md
Updated: Nov 2026; last repo commit

design-system makes Claude organise styling into three token layers: raw values, purpose aliases and component tokens. It generates CSS variables from a JSON token file, checks code for hard-coded values, writes component specs with states and variants, and maps tokens to a Tailwind theme.

It also builds HTML slide decks. Claude searches a set of slide strategy, layout, copy and chart tables, then writes slides that import assets/design-tokens.css and use Chart.js. SKILL.md lists brand and ui-styling as its skill dependencies.

Good for

Frontend developers who want colours, spacing and type as CSS variables
Designers handing a design system to developers
Founders who need an investor or pitch deck built from brand tokens

Install design-system

Claude Code

Copy this prompt.

Install the design-system skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

SKILL.md lists brand and ui-styling as skill dependencies. Pick one route, not both. The plugin points at the repo's .claude/skills folder, which holds 7 skills, and its manifest lists no hooks or MCP servers. The README says plugin installs fail with a symlink error on versions before v2.5.1.

From the vendor's docs. Source.

What's in the skill

When it loads

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

Sections in SKILL.md

When to Use
Token Architecture
Three-Layer Structure
Script Paths
Quick Start
References
Component Spec Pattern
Scripts
Templates
Integration
Slide System
Source of Truth
Slide Search (BM25)
Decision System CSVs
Contextual Decision Flow
Pattern Breaking (Duarte Sparkline)

Key facts

Author: claudekit, per the SKILL.md metadata. Published in the nextlevelbuilder repo
Repo: nextlevelbuilder/ui-ux-pro-max-skill
Installs on skills.sh: 46,324 (Nov 2, 2026)
GitHub stars: 143,821 (Nov 2, 2026)
License: MIT
Last commit: Nov 1, 2026
Skill version: 1.0.0
Files: 27 files including SKILL.md: 7 reference files, 8 data tables, 9 scripts plus 1 test file, 1 template
Scripts: Node: generate-tokens.cjs, validate-tokens.cjs, embed-tokens.cjs. Python: search-slides.py, slide-token-validator.py, fetch-background.py and others
Skill dependencies: brand, ui-styling (per SKILL.md)
skills.sh checks: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Primitive, semantic and component tokens in CSS variables
For example --color-blue-600, then --color-primary pointing at it, then --button-bg pointing at that.
Three-layer tokens
Generates a CSS file from a JSON token config
Run as node scripts/generate-tokens.cjs --config tokens.json -o tokens.css.
Runs code · generate-tokens.cjs
Finds hard-coded values in your code
Run with --dir src/ to scan a folder.
Runs code · validate-tokens.cjs
Spec tables for default, hover, active and disabled states
Seven reference guides cover token layers, component specs, states and variants, and Tailwind integration.
Component specs
BM25 search over slide strategies, layouts, copy and charts
Supports domain search (-d copy, -d chart) and a --context mode that takes a slide position and the previous slide's emotion.
Runs code · search-slides.py
8 CSV tables: strategies, layouts, type, colour, backgrounds, copy and charts
Includes 15 deck structures, 25 layouts, 25 copywriting formulas and 25 chart types.
Read · Slide decision tables
Checks slide HTML uses tokens instead of hard-coded values
The last step of the slide flow.
Runs code · slide-token-validator.py
Returns Pexels background image URLs and CSS for slides
SKILL.md lists it as fetching images from Pexels or Unsplash. Its code makes no web requests: it returns a hard-coded Pexels image URL for the slide type, a Pexels search URL and the CSS that points a slide at it. The image loads from images.pexels.com when the slide is opened.
Runs code · fetch-background.py
Command shown for creating a deck, e.g. a 10-slide investor pitch
SKILL.md shows /slides:create "10-slide investor pitch for ClaudeKit Marketing" as the command.
Write · /slides:create

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs scripts in your project
Nine scripts ship with the skill. Commit before a run so you can undo generated files. github.com
Slides pull in outside files
The Chart.js example loads from a public CDN, the slide generator links Google Fonts, and background CSS from fetch-background.py points at images.pexels.com. Self-host these if the deck must work offline. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	validate-tokens.cjs and the slide validator check files, but the token generator and slide flow write files.
Talks to	Slides built from the SKILL.md example load Chart.js from cdn.jsdelivr.net when opened. Slides that use fetch-background.py output load images from images.pexels.com when opened; the script itself makes no requests
Scopes	Runs Node and Python scripts from the skill folder with your project as the working directory Writes CSS variables and slide HTML; reads assets/design-tokens.json and docs/brand-guidelines.md

Questions

How do I install design-system?

Use the install box above. It installs design-system with brand and ui-styling, the two skills SKILL.md lists as dependencies. Add the slides skill from the same repo if you want the /slides:create command.

What are design tokens?

They are named style values such as colours, spacing and fonts, stored in one place and used as CSS variables. This skill arranges them in three layers so you can change a brand colour once and have buttons and slides follow.

Does it need an API key?

SKILL.md names no key, and no script in the folder reads one. Two scripts read an optional DESIGN_SYSTEM_PROJECT_ROOT variable to find your project root. fetch-background.py describes itself as needing no API key, and its code has no HTTP calls.

Does it work in the Claude app or Claude.ai?

The author does not document it. The README says the full repository ZIP exceeds the 200-file upload limit of Claude.ai and that the project does not publish a separate upload ZIP. The skill folder has 27 files, and its scripts need a place where Claude can run Node and Python.

Is it safe to use?

It runs local Node and Python scripts and writes token and slide files in your project. Slide decks built from its example load Chart.js from a public CDN when you open them. Read the commands Claude proposes and commit first.

design-system vs ui-styling?

design-system defines the tokens and specs. ui-styling puts them into shadcn/ui and Tailwind code, and SKILL.md maps component tokens to the Tailwind config. They are meant to be used together.

Information

updated Nov 2, 2026

Repository: nextlevelbuilder/ui-ux-pro-max-skill
Folder: cli/assets/skills/design-system

nextlevelbuilder/ui-ux-pro-max-skill skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 10

ui-ux-pro-max-skill README · github.com
plugin.json · github.com
commands.md · github.com
ui-ux-pro-max-skill · github.com
SKILL.md · github.com
fetch-background.py · github.com
slide-token-validator.py · github.com
SKILL.md · github.com
html-token-validator.py · github.com
generate-slide.py · github.com