# Design tokens and component specs (/design-system)

/design-system is a Claude Code skill in the Web & Design section. It is maintained by nextlevelbuilder and published under the MIT license. Defines three-layer design tokens (primitive, semantic, component), CSS variables, spacing and type scales, and component specs; also generates slides.

- Web version: https://skills.sgomez.dev/en/s/design-system
- Section: [Web & Design](https://skills.sgomez.dev/en/web.md)
- Author: nextlevelbuilder
- License: MIT
- Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/09170eec67eefd46a7ae85de61b40c194020f997/.claude/skills/design-system
- Updated 27 Sept 2026

## How to ask for it

- `Build a three-layer design token system for my product`
- `Define the spacing and typography scales for my design system`
- `Generate brand-compliant slides from my design tokens`

## Install

macOS · Linux:

```
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash
```

Windows:

```
irm https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.ps1 | iex
```


## Author's description

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.

- [How we review this](https://skills.sgomez.dev/en/methodology.md)