UI & interface design

UI Design System & Component Library Generator

A comprehensive prompt template for creating robust design systems and component libraries that ensure consistency, scalability, and accessibility across digital products. Perfect for UI/UX designers, front-end developers, and product teams building or maintaining design systems.

14 blanks to fill in · Added December 2025 · design-system · component-library · ui-design · design-tokens · accessibility

The prompt

14 blanks

You are an expert UI/UX design system architect with extensive experience in creating scalable, accessible, and maintainable design systems and component libraries.

Create a comprehensive design system and component library for [PROJECT/PRODUCT NAME] that serves [TARGET USERS/TEAM SIZE]. The design system should support [PLATFORM/TECHNOLOGY STACK] and align with [BRAND/DESIGN PHILOSOPHY].

## Core Requirements:

1. **Design Principles & Foundation**
   - Define [NUMBER] core design principles that reflect [BRAND VALUES/PRODUCT GOALS]
   - Establish design tokens for colors, typography, spacing, and elevation
   - Create a cohesive visual language that ensures [SPECIFIC CONSISTENCY GOALS]

2. **Component Library Structure**
   - Design [SPECIFY COMPONENT TYPES: e.g., buttons, forms, navigation, modals, cards, data tables]
   - Include component variants, states (default, hover, active, disabled, error), and responsive behaviors
   - Ensure WCAG 2.2 AA compliance with proper ARIA labels, semantic HTML, and keyboard navigation
   - Provide [LIGHT/DARK/BOTH] theme support

3. **Documentation Requirements**
   - Component usage guidelines with do's and don'ts
   - Code snippets for [FRAMEWORK: React, Vue, Angular, Web Components, etc.]
   - Accessibility implementation notes and screen reader compatibility
   - Visual examples showing component applications in real contexts

4. **Technical Specifications**
   - Design tokens in [FORMAT: CSS variables, JSON, SASS, etc.]
   - Responsive breakpoints for [DEVICE TARGETS]
   - Grid system with [COLUMN COUNT] columns
   - Naming conventions following [BEM/ATOMIC/CUSTOM] methodology

5. **Governance & Maintenance**
   - Version control strategy and update process
   - Contribution guidelines for team members
   - Quality assurance checklist for new components
   - Roles and responsibilities (owner, contributors, review board)

Deliver the design system with:
- A style guide covering typography hierarchy, color palette with contrast ratios, spacing scale, and iconography
- A component library with at least [NUMBER] reusable components organized by category
- Pattern library addressing common design solutions like navigation flows, forms, and data display
- Figma/Sketch files or code repository structure for [DESIGN TOOL/DEVELOPMENT ENVIRONMENT]
- An onboarding guide for new team members

Ensure the design system achieves measurable outcomes including component reuse rate above 70%, WCAG compliance, style consistency within 5% variance, and reduced design-to-development handoff time.

Open in ChatGPT

Blanks: Project/product name · Target users/team size · Platform/technology stack · Brand/design philosophy · Number · Brand values/product goals · Specific consistency goals · Light/dark/both · Framework · Format · Device targets · Column count · Bem/atomic/custom · Design tool/development environment

How to use it

Use this prompt to generate a complete design system and component library tailored to your specific project needs. Replace bracketed placeholders with your project details, technology preferences, and team requirements. The output will provide a structured framework covering design principles, components, documentation, and governance to ensure consistency and efficiency across your product development lifecycle.

Tips

Start small with 10-15 essential components rather than attempting to build a comprehensive library immediately. Focus on high-frequency elements like buttons, forms, and navigation that will deliver quick wins and demonstrate value.
Prioritize accessibility from the beginning by building WCAG 2.2 AA compliance into every component. Include ARIA labels, keyboard navigation, screen reader compatibility, and sufficient color contrast ratios as non-negotiable requirements.
Use design tokens instead of hard-coded values to create a flexible, maintainable system. This allows you to support multiple themes, brands, or platforms by simply swapping token values rather than redesigning components.
Document the 'why' behind design decisions, not just the 'what' and 'how'. Help teams understand the reasoning behind component behaviors, spacing choices, and interaction patterns so they can apply principles to new scenarios.
Create a living style guide that exists in the same environment as your product code. Tools like Storybook, Figma, or Zeroheight ensure documentation stays synchronized with actual components and serves as both a reference and testing environment.
Establish a clear governance model with defined roles for system ownership, contribution processes, and version control. This prevents the system from becoming outdated or fragmented as your team and product grow.

Information Gathering

Before using this prompt, collect key information about your project: product name and scope, target platforms (web, mobile, desktop), technology stack and frameworks, team size and structure, brand guidelines or existing visual identity, accessibility requirements, and specific component needs. Understanding your current design maturity level (building from scratch vs. consolidating existing components) will help tailor the output. Also identify pain points in your current workflow that the design system should address, such as inconsistent UI elements, slow prototyping, or difficult developer handoffs.

Output Framework

The prompt generates a multi-layered design system structure starting with foundational design tokens (colors, typography, spacing, shadows), progressing to atomic components (buttons, inputs, icons), then composite components (forms, cards, modals), and finally pattern libraries for complex interactions. Expect comprehensive documentation including usage guidelines, code examples, accessibility notes, and visual specifications. The output should provide both design files for your preferred tool and implementation guidelines for developers, ensuring seamless collaboration between design and development teams.

Customization Considerations

Adapt the prompt based on your organization's maturity and scale. Startups building their first design system should focus on essential components and simple governance, while enterprise teams need robust version control, multi-brand support, and formal approval processes. Consider whether you need a single-brand or multi-brand system, the level of customization required per component, and integration with existing tools and workflows. Specify whether you're designing for a public-facing product, internal tools, or both, as this affects accessibility priorities and visual complexity.

Implementation Strategy

Successful design system adoption requires phased implementation and stakeholder buy-in. Start by identifying 5-10 high-impact components that will demonstrate immediate value, create pilot projects to test the system with real use cases, and gather feedback iteratively. Establish clear roles for system ownership, assign a core team to maintain and evolve the system, and create contribution guidelines for broader team participation. Plan regular audits to ensure components remain aligned with design principles and measure success through metrics like component reuse rate, design consistency scores, time saved in design and development, and accessibility compliance levels.