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 productDefine the spacing and typography scales for my design systemGenerate brand-compliant slides from my design tokens
Install
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bashAfter installing with the script, type /design-system. Using Cursor, Windsurf or Codex? Platform guides
Demo coming soon