design-system-creation | aj-geddes-useful-ai-prompts-4 | ClaudePluginHub

Skill

design-system-creation

From aj-geddes-useful-ai-prompts-4

Guides building design systems with tokens (typography, colors, spacing, shadows), components, documentation, governance, and best practices. Use for UI consistency across teams.

Install

$

npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin aj-geddes-useful-ai-prompts-4

Tool Access

This skill uses the workspace's default tool permissions.

Preview

- [Overview](#overview)

Supporting Assets

references/component-documentation.mdreferences/design-system-components.mdreferences/design-system-documentation.mdreferences/design-system-governance.mdtemplates/component-template.tsx

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

159.9k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

159.9k

next-compile

1 file

Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.

vercel-next-js-2

139.2k

Stats

Stars180

Forks28

Last CommitMar 3, 2026

Actions

View Source View Plugin View on GitHub View README

Tags

design-governance

Design System Creation

Table of Contents

Overview
When to Use
Quick Start
Reference Guides
Best Practices

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