mcpField
D
design-system-creation

design-system-creation

github.com/aj-geddesDesign & UI373539 installsUpdated 34w ago
Repository

About design-system-creation

A skill for planning and documenting design systems, aimed at teams building consistent interfaces across products. It covers reusable components, standards, documentation, and governance.

Key features

  1. 01Design system structure and foundations
  2. 02Reusable component planning
  3. 03Component documentation guidance
  4. 04Governance and versioning practices
  5. 05Accessibility and testing guidance

Use cases

  1. 01Aligning design across multiple products
  2. 02Reducing duplicate component work
  3. 03Improving design-to-development handoff

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill design-system-creation

After installing, type/design-system-creationin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
component-documentation.md
design-system-components.md
design-system-documentation.md
design-system-governance.md
templates/
component-template.tsx

Details

From the project README

Design System Creation

Table of Contents

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:

GuideContents
Design System ComponentsDesign System Components
Component DocumentationComponent Documentation
Design System GovernanceDesign System Governance
Design System DocumentationDesign 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

Comments

Markdown supported