Design Systems

Codify design tokens, patterns, and governance for multi-product design systems.

47|4|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/cuellarfr/design-skills --skill design-systems-cuellarfr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Design Systems
Source: https://github.com/cuellarfr/design-skills/tree/main/design-systems
Command: npx skills add https://github.com/cuellarfr/design-skills --skill design-systems-cuellarfr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design Systems provides a coherent framework to standardize tokens, components, and governance across an organization, reducing duplication and drift.

Core Features & Use Cases

  • Centralized design tokens, component specifications, and pattern documentation to enable consistent UX across products.
  • Governance and lifecycle guidance to manage pattern creation, review, and publishing.
  • Reference materials and templates for audits, token architecture, and pattern documentation to accelerate adoption.

Quick Start

Define token foundations, document a core pattern, and outline a governance process to begin.

Frequently Asked Questions about Design Systems

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

FAQPage Schema
What is design token architecture and how does it standardize UI across products?

Design token architecture codifies visual attributes into reusable variables. It standardizes components and patterns across products, reducing duplication and drift while ensuring consistent UX and accessibility throughout an organization.

How do I document a core component pattern for my design system?

You document a core component pattern by defining token foundations and outlining the pattern's specifications. This process uses reference templates to accelerate pattern documentation and ensure consistent UX implementation.

How do I establish design system governance for a real-world team?

Design system governance manages pattern creation, review, and publishing through a scalable contribution lifecycle. It provides lifecycle guidance to enforce a reusable design language and ensure faster feature delivery across teams.

Can I use this design system framework to audit an existing component library?

Yes, you can audit an existing component library using provided reference materials and templates. The framework supplies audit templates and token architecture guidelines to identify duplication and reduce drift across products.

What's the best way to start building a scalable design system?

The best way to start is to define token foundations, document a core pattern, and outline a governance process. This establishes a coherent framework to standardize tokens and components for consistent UX.

Why does design drift happen and when do I need formal pattern documentation?

Design drift happens when teams duplicate efforts without a centralized framework. You need formal pattern documentation and governance when scaling across multiple products to enforce consistency, accessibility, and a reusable design language.