skills.rest
thejordanleopold
thejordanleopoldCOMMUNITY
Explore all skills by this author →
Website𝕏@jordansleopoldGitHub

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

4|Updated Apr 9, 2026
Search Tags:#typography#tokens#design-system#spacing#color-palette#design-guidelines#design-language
One-click install
npx skills add https://github.com/thejordanleopold/claude-code-skills-distilled --skill design-system-thejordanleopold
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/thejordanleopold/claude-code-skills-distilled/tree/main/design-system
Command: npx skills add https://github.com/thejordanleopold/claude-code-skills-distilled --skill design-system-thejordanleopold

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps design teams establish a cohesive design language by codifying tokens, color, typography, spacing, and motion to ensure consistent UI across products.

Core Features & Use Cases

  • Token architecture: Create a robust, semantic design token system that scales with brand changes.
  • Typography, color, and spacing standards: Define scalable type scales, color roles, and spacing grids for consistent layouts.
  • Design document delivery: Produce a DESIGN.md that codifies decisions for engineers and product teams.
  • Use Case: Starting a new product or redesign, audit an existing UI, or align multi-platform experiences.

Quick Start

Create a DESIGN.md that codifies your design decisions and token system to start the design system.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I establish a cohesive design system for a new product launch?▼

Establish a design system by codifying token architecture, color palettes, typography scales, spacing grids, and motion guidelines to ensure UI consistency across your new product launch.

What is a design token architecture and how does it scale with brand changes?▼

Design token architecture codifies semantic style decisions like color and spacing into reusable variables, enabling your UI to scale automatically and maintain consistency when brand changes occur.

How do I audit existing UI components for cross-platform consistency?▼

Audit existing UI components by mapping them against a codified design language of typography, spacing, and color tokens to identify inconsistencies and align multi-platform experiences.

Can I use this to generate a DESIGN.md deliverable for engineers?▼

Yes, you can generate a DESIGN.md deliverable that codifies your design system decisions, token architecture, and guidelines into clear documentation for engineers and product teams.

What's the best way to define typography, color, and spacing standards for a redesign?▼

The best way to define standards for a redesign is to establish scalable type scales, semantic color roles, and consistent spacing grids, codifying them into a robust token system.

When do I need to codify motion guidelines into my design system?▼

Codify motion guidelines into your design system during major redesigns or cross-platform component audits to ensure consistent UI transitions and align multi-platform experiences.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
14

teach-impeccable

Gather project design context and persist it into a centralized AI config.

Community
Advanced
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
guideopsguideops

power

Implement a dark aesthetic design system with typography and color scales.

Community
Intermediate