Design system creation

Skill ulpi-io/plugin-marketplace/plugins/aj-geddes/skills/design-system-creation

Build comprehensive design systems with components, patterns, and guidelines. Enable consistent design, faster development, and better collaboration across teams.From its SKILL.md

Install

npx -y skills add ulpi-io/plugin-marketplace --skill design-system-creation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.7 KB, 590 tokens by cl100k_base, as published. Nobody here has run it

Overview

A design system is a structured set of components, guidelines, and principles that ensure consistency, accelerate development, and improve product quality.

When to Use

Multiple product interfaces or teams
Scaling design consistency
Reducing redundant component development
Improving design-to-dev handoff
Creating shared language across teams
Building reusable components
Documenting design standards

Quick Start

Minimal working example:

Design System Structure:

Foundation Layer:
  Typography:
    - Typefaces (Roboto, Inter)
    - Font sizes (scale: 12, 14, 16, 20, 28, 36, 48)
    - Font weights (Regular, Medium, Bold)
    - Line heights and letter spacing

Colors:
  - Primary brand color (#2196F3)
  - Secondary colors
  - Neutral palette (grays)
  - Semantic colors (success, error, warning)
  - Dark mode variants

Spacing:
  - Base unit: 4px
  - Scale: 4, 8, 12, 16, 24, 32, 48, 64px
  - Apply consistently across UI

Shadows & Elevation:
  - Elevation 0 (flat)
  - Elevation 1, 2, 4, 8, 16 (increasing depth)
  - Used for modals, cards, overlays
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Design System Components	Design System Components
Component Documentation	Component Documentation
Design System Governance	Design System Governance
Design System Documentation	Design System Documentation

Best Practices

✅ DO

Start with essential components
Document every component thoroughly
Include code examples
Test components across browsers
Include accessibility guidance
Version the design system
Have clear governance
Communicate updates proactively
Gather feedback from users
Maintain incrementally

❌ DON'T

Create too many components initially
Skip documentation
Ignore accessibility
Make breaking changes without migration path
Allow inconsistent implementations
Ignore user feedback
Let design system stagnate
Create components without proven need
Make components too prescriptive
Ignore performance impact

Design system creation

2 things to look at

SKILL.md

Design System Creation

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

What ships with it: 5 files

references/

templates/

Keep looking