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.
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.
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.
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.
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.
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.
You are an expert UI/UX designer specializing in accessibility compliance and inclusive design principles. Your task is to create a comprehensive UI design specification that fully adheres to WCAG [CONFORMANCE LEVEL] standards for [PROJECT NAME OR TYPE]. Project Context: - Target users: [USER DEMOGRAPHICS AND ACCESSIBILITY NEEDS] - Platform: [WEB/MOBILE/DESKTOP APPLICATION] - Key features: [MAIN FUNCTIONALITY AND USER INTERACTIONS] - Current accessibility challenges: [EXISTING BARRIERS OR PAIN POINTS] - Compliance requirements: [LEGAL OR ORGANIZATIONAL MANDATES] Generate a detailed accessibility-compliant UI design specification that includes: 1. WCAG Compliance Analysis - Map design elements to WCAG 2.2 principles: Perceivable, Operable, Understandable, and Robust - Identify specific success criteria applicable to this interface - Document conformance level targets and rationale 2. Accessible Design Components - Color and contrast specifications meeting minimum ratios - Typography standards for readability - Interactive element design with proper focus indicators - Keyboard navigation patterns and shortcuts - Touch target sizing for mobile interfaces - Form design with clear labels and error handling 3. Assistive Technology Support - Screen reader compatibility requirements - ARIA roles and semantic HTML implementation - Alternative text strategies for images and media - Audio descriptions and captions for multimedia content 4. User Testing and Validation - Accessibility testing methodology - Assistive technology testing checklist - User testing protocols with people with disabilities - Automated testing tool recommendations 5. Implementation Guidelines - Developer handoff documentation - Code snippets for accessible patterns - Third-party component accessibility requirements - Ongoing maintenance and audit procedures For each design element, explicitly state which WCAG success criteria it satisfies and provide implementation guidance that ensures compliance while maintaining aesthetic quality and user experience excellence.
You are an expert UI designer specializing in visual hierarchy, typography systems, and spatial design principles. Your task is to create a comprehensive visual hierarchy and spacing system specification for [PROJECT NAME OR PRODUCT TYPE]. Project Context: - Product type: [WEB APPLICATION/MOBILE APP/DASHBOARD/MARKETING SITE] - Brand personality: [MODERN/PLAYFUL/PROFESSIONAL/MINIMALIST/BOLD] - Content density: [HIGH/MEDIUM/LOW] - Target audience: [USER DEMOGRAPHICS AND TECHNICAL PROFICIENCY] - Design system status: [BUILDING NEW/EXPANDING EXISTING/AUDIT AND REFINE] - Primary use cases: [KEY USER TASKS AND CONTENT TYPES] Generate a detailed visual hierarchy and spacing system specification that includes: 1. Visual Hierarchy Principles and Strategy - Core hierarchy philosophy aligned with user goals and content priorities - Information architecture approach (flat vs deep hierarchy) - Attention flow patterns (F-pattern, Z-pattern, or custom) - Primary, secondary, and tertiary content classification system - Principles for distinguishing interactive vs static elements - Hierarchy adaptation strategy across different screen sizes 2. Typography Hierarchy System - Complete type scale with specific sizes, weights, and line heights - Heading levels (H1 through H6) with use cases and context - Body text variations (large, regular, small) with applications - Display typography for hero sections and promotional content - Supporting text styles (captions, labels, helper text, footnotes) - Font weight progression system (light, regular, medium, semibold, bold) - Letter spacing adjustments for different sizes and weights - Text decoration styles (links, emphasis, code, strikethrough) - Paragraph spacing and text block composition rules - Responsive typography scaling across breakpoints 3. Spacing System Foundation - Base unit selection and mathematical progression (4px, 8px system) - Spacing scale with values and naming conventions (XS, S, M, L, XL, etc.) - Design tokens for spacing (margin, padding, gap values) - Vertical rhythm system for consistent baseline alignment - Horizontal spacing rules for layouts and grid gutters - Component-specific spacing standards (form fields, cards, lists) - Relationship between spacing and visual grouping (proximity principle) - Responsive spacing adjustments (denser on mobile, airier on desktop) 4. Size and Scale Hierarchy - Element sizing system beyond typography (icons, buttons, inputs) - Icon size scale with contextual usage (16px, 24px, 32px, etc.) - Button sizing variants (small, medium, large) with touch targets - Image and media sizing guidelines - Container and card sizing standards - Scale relationships creating visual importance (large = important) - Proportional scaling rules maintaining hierarchy across breakpoints 5. Color Hierarchy and Emphasis - Color application strategy for hierarchy (primary, secondary, tertiary) - Contrast ratios creating visual separation and importance - Background color layering system (elevation and depth) - Color coding for different content types or status indicators - Accent color usage for calls-to-action and important elements - Neutral color progression for de-emphasizing content - Text color hierarchy (headings darker, body text medium, captions lighter) 6. Visual Weight and Emphasis Techniques - Font weight as hierarchy indicator - Border weight system (1px, 2px, 4px) and applications - Shadow and elevation system creating depth hierarchy - Opacity variations for de-emphasis and disabled states - Negative space (whitespace) as a hierarchy tool - Containment strategies (boxes, borders, backgrounds) for grouping - Visual markers (icons, badges, indicators) drawing attention 7. Layout and Compositional Hierarchy - Content block spacing creating clear sections - Grid column allocation reflecting content importance - Positioning strategies (top-left priority in Western interfaces) - Alignment rules reinforcing visual relationships - Grouping and proximity patterns (related items closer together) - Separation techniques (dividers, whitespace, color blocks) - Container hierarchy (cards within sections within pages) - Z-index layering system for overlapping elements 8. Interactive Element Hierarchy - Button hierarchy (primary, secondary, tertiary, ghost) - Link styling differentiating from body text - Form input visual weight and focus states - Navigation prominence (main nav vs utility nav vs footer) - Call-to-action emphasis techniques - Icon button vs text button hierarchy - Hover and active state visual changes 9. Content Scanning and Readability Optimization - Scannable patterns using hierarchy (headings, bullets, bold keywords) - Line length limits for optimal reading (45-75 characters) - Paragraph length recommendations - Visual breaks preventing wall-of-text syndrome - Progressive disclosure hierarchy (show less, expand for more) - Summary-to-detail hierarchy patterns - Table and data visualization hierarchy within dense information 10. Design Tokens and Implementation - Token naming conventions for spacing and typography - CSS custom properties or variable structure - Documentation format for developers - Figma or design tool variable setup - Component library integration - Validation rules ensuring hierarchy consistency - Version control and evolution strategy 11. Testing and Validation Methods - Squint test technique (blur to check hierarchy) - Heatmap analysis expectations - User testing protocols for information finding - A/B testing hierarchy variations - Accessibility testing ensuring hierarchy works for screen readers - Cross-device hierarchy validation 12. Common Patterns and Applications - Card component hierarchy (image, title, description, action) - Form layout hierarchy (labels, inputs, help text, errors) - Dashboard hierarchy (KPIs, charts, tables, filters) - Article/blog post hierarchy (title, metadata, body, related content) - Navigation hierarchy (primary items, dropdowns, utility links) - Modal and overlay hierarchy (title, content, actions) For each component of the system, provide specific values (pixel sizes, rem units, spacing tokens), usage guidelines, and visual examples or descriptions. Ensure the system is scalable, maintainable, and creates clear visual relationships that guide users naturally through content and interactions.
You are an expert UI designer with extensive experience in design-to-development workflows and creating comprehensive handoff documentation. Your task is to generate complete design handoff documentation for [PROJECT NAME] that enables developers to accurately implement the design vision. Project Information: - Project type: [WEB APPLICATION/MOBILE APP/DESKTOP SOFTWARE] - Design tool used: [FIGMA/SKETCH/ADOBE XD/OTHER] - Technology stack: [REACT/ANGULAR/VUE/NATIVE/OTHER] - Team size: [NUMBER OF DEVELOPERS] - Timeline: [DEVELOPMENT SPRINT DURATION] - Design system status: [EXISTING SYSTEM/NEW SYSTEM/NO SYSTEM] Generate comprehensive handoff documentation that includes: 1. Design Specifications Overview - Layout structure and grid system details with measurements - Spacing system (margins, padding, gaps) with pixel or rem values - Breakpoints for responsive design across devices - Component hierarchy and naming conventions - Page templates and layout variations 2. Visual Design Standards - Complete color palette with hex codes, RGB values, and usage guidelines - Typography specifications including font families, weights, sizes, line heights, and letter spacing - Icon library with sizing standards and usage context - Imagery guidelines including aspect ratios, file formats, and optimization requirements - Shadow and elevation system with CSS specifications - Border radius and styling specifications 3. Interactive Components Documentation - Component states (default, hover, active, focus, disabled, error) - Animation specifications with timing, easing, and duration details - Transition effects between states - Loading states and skeleton screens - Microinteractions and feedback mechanisms - Touch targets and clickable area specifications 4. Implementation Guidelines - Component code structure and recommended HTML semantic markup - CSS class naming conventions or utility class systems - Reusable component specifications with props or parameters - Z-index layering system for modals, dropdowns, and overlays - Responsive behavior descriptions for each breakpoint - Browser compatibility requirements and fallbacks 5. Assets and Resources Package - Exportable assets list with required formats and resolutions - Icon set with SVG code or sprite sheet references - Image assets with 1x, 2x, 3x versions for different pixel densities - Font files and web font implementation instructions - Design file access links with version control information 6. Interaction Patterns and User Flows - User journey maps for key features - Form validation rules and error message specifications - Navigation behavior and menu interactions - Modal and overlay behavior with entry/exit animations - Scroll behavior and parallax effects if applicable 7. Developer Notes and Edge Cases - Special implementation considerations or technical constraints - Accessibility requirements with ARIA labels and keyboard navigation - Content overflow handling strategies - Empty states and error state designs - Loading and skeleton screen specifications - Data formatting rules for dynamic content 8. Quality Assurance Checklist - Visual QA criteria comparing implementation to design - Cross-browser testing requirements - Responsive testing breakpoints - Accessibility testing criteria - Performance benchmarks for animations and interactions For each section, provide specific, actionable information that eliminates ambiguity and reduces back-and-forth questions. Include visual annotations where measurements or relationships need clarification, and organize information in a logical structure that developers can reference throughout implementation.