design-system

Organize design-system tokens, components, and philosophy into a reusable specification.

1|Updated Jul 1, 2026

Search Tags:#tokens #design-system #atomic-design #ui-architecture #design-philosophy #component-catalog

Ready to run

npx skills add https://github.com/jwilger/agent-skills --skill design-system-jwilger

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/jwilger/agent-skills/tree/main/skills/design-system
Command: npx skills add https://github.com/jwilger/agent-skills --skill design-system-jwilger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design teams need a structured, reusable specification that aligns tokens, philosophy, and component catalogs to ensure consistent UI across products.

Core Features & Use Cases

Token cataloging for colors, typography, spacing, radii, and elevation
Atomic design-based component catalog (atoms, molecules, organisms, templates)
Artifact assembly to generate philosophy-first design-system documentation and handoff materials

Quick Start

Create a design-system specification that documents philosophy, tokens, and component catalog before building UI

Frequently Asked Questions about design-system

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

FAQPage Schema

How do I organize design tokens and component catalogs into a single specification?▼

To organize design tokens and component catalogs into a specification, document your token taxonomy for colors and typography alongside an atomic design component inventory. This process produces a philosophy-first artifact that enables consistent UI architecture and token governance across products.

What is a design system specification and when do I need one?▼

A design system specification is a structured, reusable document aligning UI tokens, design philosophy, and component catalogs. You need one when scaling design initiatives across products to ensure consistent UI and enable disciplined token governance and artifact generation for handoff.

How do I catalog UI components using atomic design principles?▼

To catalog UI components using atomic design, structure your component inventory into atoms, molecules, organisms, and templates. This disciplined process integrates with your token taxonomy to assemble a philosophy-first design-system artifact for documentation and handoff.

Do I need a token taxonomy before generating design system documentation?▼

Yes, a token taxonomy is required before generating design system documentation. You must establish a structured token taxonomy for colors, typography, spacing, radii, and elevation, alongside a component inventory, to produce the philosophy-first artifact at the designated output path.

Can I use this approach to generate handoff materials for an existing component inventory?▼

Yes, you can use this approach to generate handoff materials for an existing component inventory. By applying a disciplined process to your existing tokens and atomic design components, it assembles philosophy-first documentation artifacts suitable for cross-product team handoff.

What's the difference between token governance and a standard component library?▼

Token governance goes beyond a standard component library by enforcing a disciplined taxonomy for colors, spacing, and typography across products. It integrates atomic design component cataloging with philosophy-first artifact generation to ensure consistent UI architecture at scale.