What is the design system skill?
The design system skill is a folder inside nextlevelbuilder/ui-ux-pro-max-skill. It teaches an AI coding agent primitive, semantic and component design tokens, CSS variables, spacing and type scales, component state tables and Tailwind integration, with scripts that generate tokens and flag hardcoded values. It also generates token-compliant slide decks.
It is the design-system folder under .claude/skills in the ui-ux-pro-max-skill repository, listed with an MIT license in its frontmatter. It covers token creation, component state definitions, CSS variable systems, spacing and typography scales, design-to-code handoff, Tailwind theme configuration and slide generation.
It is one of several sibling skills in the same repository. Its integration notes name brand and ui-styling as dependencies.
What changes in your agent's output
- Tokens are layered: primitive values, semantic aliases and component tokens, referenced through CSS variables.
- Components get a spec table covering default, hover, active and disabled states for background, text, border and shadow.
- A validator script checks code for hardcoded values that should be tokens.
- Slides must import the token CSS file, use Chart.js for charts and include keyboard, click and progress navigation.
- A token generator turns a JSON config into CSS.
What the skill includes
Seven reference files cover token architecture, primitive, semantic and component tokens, component specs, states and variants, and Tailwind integration. The slide system adds BM25 search plus CSV decision files for 15 deck structures, 25 layouts, 25 copywriting formulas and 25 chart types.
Who the design system skill is for
Best for
- Projects that need tokens and component specs before screens multiply.
- Teams moving brand colors and fonts into tokens, together with the brand skill.
- Connecting tokens to Tailwind through the UI styling skill.
Not for
- Choosing a visual style. For that see ui-ux-pro-max.
- Quick one-off screens where a token system would be overhead.
Use it with UiChemy
Design tokens are the bridge between a design file and code. UiChemy Figma to WordPress converts a Figma design into editable blocks, and a token spec keeps colors and spacing consistent when you extend the page. Click Get Started on uichemy.com.
How to install Design System Skill: Tokens, Specs and Slides for AI Agents
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.gitClone the repository
Run
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git. The skill is the .claude/skills/design-system folder.Copy the skill folder
Copy .claude/skills/design-system into the folder where your agent loads skills. The skill's integration notes name the brand and ui-styling skills, so copy those folders too if you want the full set.
Check the runtime
The scripts use Node for .cjs files and Python 3 for .py files. Run
node --versionandpython3 --versionbefore asking the agent to use them.Ask for the task
Describe the job in plain words and let the agent route to the skill.
Check that it loaded
Ask the agent to create a token set for a brand. The result should have primitive, semantic and component layers in a JSON file and generated CSS variables, and later code should use variables instead of hardcoded values.
Key features
- Three-layer token architecturePrimitive, semantic and component tokens, with an example structure in the skill.
- Token generationgenerate-tokens.cjs builds CSS from a JSON token config, and a starter design-tokens-starter.json template is included.
- Hardcoded-value validationvalidate-tokens.cjs flags values in code that should come from tokens.
- Component spec patternA states table for background, text, border and shadow across default, hover, active and disabled.
- Seven reference filesToken layers, component specs, states and variants, and Tailwind integration.
- Tailwind integrationComponent tokens map into a Tailwind config, with ui-styling as the companion skill.
- Slide strategy dataCSV files for 15 deck structures with emotion arcs, 25 layouts and typography and color logic.
- Copy and chart data25 copywriting formulas such as PAS, AIDA and FAB, and 25 chart types with Chart.js config.
- BM25 slide searchsearch-slides.py returns contextual recommendations from the decision files.
- Slide token validatorslide-token-validator.py checks that slide HTML uses the shared token CSS file.
Frequently asked questions
What is the design system skill?
It is the design-system folder in nextlevelbuilder/ui-ux-pro-max-skill. It teaches an AI coding agent token architecture, component specifications and token-compliant slide generation, with scripts for generating and validating tokens. The repository README and SKILL.md linked in the sources section are the authority for details.
How do I install it without npx?
Clone the repository with git and copy .claude/skills/design-system into your agent's skills folder. Add the brand and ui-styling folders too, since the skill lists them as dependencies. The scripts need Node and Python.
What are the three token layers?
Primitive tokens hold raw values, semantic tokens give them meaning such as primary or surface, and component tokens bind meaning to a component such as a button. The skill shows an example and a spec table for component states.
Does it make slides as well?
Yes. A slide system uses design tokens, Chart.js and CSV decision files for deck structure, layouts, copy formulas and charts. Slides must import the token CSS and include keyboard, click and progress navigation.
How is it different from ui-ux-pro-max?
ui-ux-pro-max searches styles, palettes and fonts to choose a design direction. This skill defines how the chosen values are stored as tokens and specs. They are in the same repository and work together.
How does it relate to the brand skill?
The brand skill keeps identity in docs/brand-guidelines.md and can sync it to design tokens. This skill defines the token structure those values land in. Its integration notes say to extract primitives from brand colors and type.
What license does it use?
The repository is MIT licensed and this skill's frontmatter says MIT. The 32.9K install count on this page comes from a third-party skills listing and is not stated in the repository.