Generate comprehensive UI design specifications that meet WCAG accessibility standards and ensure inclusive digital experiences. This prompt helps designers, developers, and product teams create user interfaces compliant with Web Content Accessibility Guidelines at various conformance levels.
This prompt is designed for UI/UX designers, product managers, and development teams working on digital products that must meet accessibility standards. Fill in the bracketed placeholders with your specific project details, desired WCAG conformance level (A, AA, or AAA), and any particular accessibility challenges your users face. The prompt generates comprehensive specifications that balance compliance requirements with excellent user experience.
WCAG defines three conformance levels: Level A addresses the most critical accessibility barriers and is the minimum legal requirement in many jurisdictions. Level AA is the recommended standard for most websites and applications, covering broader accessibility needs including color contrast and text resizing. Level AAA represents the highest accessibility standard with stringent requirements, though full AAA compliance is not always feasible for all content. When using this prompt, specify AA conformance for general commercial applications, as it balances comprehensive accessibility with practical implementation.
Successful accessible UI design requires attention to multiple dimensions simultaneously. Color contrast ratios must meet minimum standards of 4.5:1 for normal text and 3:1 for large text at Level AA. All interactive elements must be keyboard accessible and have visible focus indicators. Touch targets should be at least 44x44 pixels for mobile interfaces. Forms must have properly associated labels and provide clear error messages. Consider how screen readers will interpret your interface by using semantic HTML and appropriate ARIA labels where needed.
Accessibility compliance requires rigorous testing beyond automated tools. Use automated accessibility checkers like axe or WAVE as a first pass to catch obvious issues, but supplement with manual testing using actual assistive technologies including NVDA, JAWS, or VoiceOver screen readers. Conduct user testing with people who have various disabilities to identify real-world usability barriers. Document all testing results and remediation efforts to demonstrate compliance and continuous improvement.
Build accessibility into your design system from the ground up rather than retrofitting it later. Create reusable accessible components with built-in compliance features like proper color contrast, keyboard support, and ARIA patterns. Document accessibility specifications for each component including required markup, supported interactions, and testing procedures. This systematic approach ensures consistency across your product and reduces the burden on individual designers and developers.
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.
You are an expert accessibility auditor with deep knowledge of WCAG 2.1 standards, ADA compliance, and inclusive design principles. Your task is to create a comprehensive accessibility audit report and remediation plan for [DIGITAL PRODUCT TYPE - e.g., website, mobile app, web application]. Product Information: - Product Name: [PRODUCT NAME] - URL/Platform: [PRODUCT URL OR PLATFORM] - Target Conformance Level: [WCAG LEVEL - A, AA, or AAA] - Industry/Sector: [INDUSTRY OR SECTOR] - Primary User Base: [TARGET AUDIENCE DESCRIPTION] Audit Scope: [DESCRIBE WHICH PAGES, FEATURES, OR COMPONENTS TO AUDIT] Generate a detailed audit report and remediation plan that includes: 1. Executive Summary - Overall accessibility score and conformance level - Critical findings count and severity distribution - Estimated impact on users with disabilities - Legal and business risk assessment 2. Audit Methodology - Automated testing tools used - Manual evaluation approach - Assistive technologies tested (screen readers, keyboard navigation, etc.) - User testing conducted (if applicable) 3. Detailed Findings For each accessibility issue identified, provide: - WCAG success criterion violated (with number and level) - Severity level (Critical/High/Medium/Low) - Location/component affected - Current behavior vs. expected behavior - User impact description - Screenshot or code example (where applicable) 4. Prioritized Remediation Roadmap Organize fixes into phases: - Phase 1 (0-30 days): Critical and high-severity issues - Phase 2 (31-90 days): Medium-severity issues and process improvements - Phase 3 (91-180 days): Low-severity issues and optimization For each phase, include: - Specific issues to address - Responsible teams/roles - Estimated effort and resources - Success metrics 5. Implementation Guidelines - Detailed remediation steps for each issue category - Code examples and best practices - Recommended tools and resources - Testing and validation procedures 6. Long-term Accessibility Strategy - Integration of accessibility into development workflow - Training recommendations for teams - Ongoing testing and monitoring plan - Accessibility documentation and governance - User feedback mechanisms Format the output as a professional audit document with clear sections, actionable recommendations, and specific technical guidance that development teams can immediately implement.
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.