Skip to content
By nextlevelbuilder

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.

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 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

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

After installing with the script, type /design-system. Using Cursor, Windsurf or Codex? Platform guides

Demo coming soon

↑↓ move · Enter open · Esc close