DiscordSign up
SKILLS.SH

design-system-creation

>

INSTALLATION
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill design-system-creation
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Design System Creation

Table of Contents

  • [Overview](#overview)
  • [When to Use](#when-to-use)
  • [Quick Start](#quick-start)
  • [Reference Guides](#reference-guides)
  • [Best Practices](#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
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card