Ui Design System

This is a solid toolkit for anyone building or maintaining a design system. The star feature is the token generator script that takes a brand color and outputs a complete system with colors, typography, spacing, and more in CSS, SCSS, or JSON formats. The workflows cover the full cycle from generating tokens to component architecture to developer handoff, with specific examples for React, Tailwind, and styled-components. The responsive design calculations and fluid typography formulas are genuinely useful references. It assumes you're working with an 8pt grid and follows WCAG contrast standards. If you're bridging design and development or need to systematize a visual language quickly, this handles the tedious parts well.

skills.sh installs: 209
GitHub stars: 1.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add borghei/claude-skills --skill ui-design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Design System

The direction is already chosen: there is a brand colour and a style. This skill turns that into a token system people can build with: a 10-step primary and complementary secondary scale (50-200 are near-white tints for backgrounds and hover), fixed neutral, semantic and surface colours, a 1.25 modular type scale, an 8pt spacing grid, component sizes, radius, shadows, motion, breakpoints and z-index. It exports them as JSON, CSS custom properties or SCSS variables. A checker then computes WCAG contrast for every pair that carries text and, when the brand hex fails, names the primary shade that passes. The rest of the skill specs components on top of those tokens and hands them off.

The deliverable states contrast ratios only as the checker printed them. Ratios guessed by eye are wrong often enough that a pasted number is the only one worth trusting.