Design System Creation

aj-geddes/useful-ai-prompts/skills/design-system-creation

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

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

Instructions onlyDesign & Creative
AI-generated overview

Guides building a design system with components, patterns, documentation and governance.

What it does
Provides structured guidance for creating a design system, covering foundation layers such as typography, color, spacing and elevation, plus reusable components. It points to reference guides on components, component documentation, governance and overall design system documentation, and includes a component template file. It also lists best practices for maintaining and versioning the system.
When to use it
Use when multiple product interfaces or teams need consistent design, when scaling design consistency, or when reducing redundant component development. Also suited to improving design-to-dev handoff and documenting shared design standards.
Requirements
No scripts; instructions and reference documents only. A component template file is included, and the agent needs access to the bundled references and templates.

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:

yaml
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 Components [blocked]Design System Components
Component Documentation [blocked]Component Documentation
Design System Governance [blocked]Design System Governance
Design System Documentation [blocked]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

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/design-system-creationat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from aj-geddes/useful-ai-prompts

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

Awaiting classification355updated 7 months ago

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

Awaiting classification355updated 7 months ago

Web Performance Optimization

aj-geddes

Guides web performance optimization through code splitting, lazy loading, caching, compression, and monitoring.

Software Development355updated 7 months ago

Vue Application Structure

aj-geddes

Guides structuring Vue 3 applications with the Composition API, component organization, and TypeScript.

Software Development355updated 7 months ago

Visual Regression Testing

aj-geddes

Guides visual regression testing of UI by comparing screenshots across versions to catch unintended visual changes.

Software Development355updated 7 months ago

User Persona Creation

aj-geddes

Creates research-based user personas to guide product design, prioritization and messaging.

Research & Analysis355updated 7 months ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today