A comprehensive prompt template for creating polished, production-ready UI mockups and high-fidelity interface designs. Ideal for UI/UX designers, product managers, and design teams who need detailed visual designs for stakeholder presentations, user testing, or developer handoff.
Use this prompt to generate detailed, production-ready UI mockups and high-fidelity designs for any digital product. Replace bracketed placeholders with your specific project details including platform, target users, visual preferences, and required screens. The output will provide comprehensive mockup designs with specifications ready for stakeholder approval, user testing, or developer handoff. This prompt works best when you provide clear brand guidelines, reference examples, or mood boards to establish the desired aesthetic direction.
Before using this prompt, gather essential project information: brand guidelines including logos, color palettes, and typography preferences; user research findings or personas that inform design decisions; competitive analysis or reference designs showing desired aesthetic direction; content inventory listing actual or realistic placeholder content for each screen; functional requirements detailing interactions, user flows, and business logic. Also clarify the fidelity level needed—whether you need pixel-perfect, production-ready designs or slightly lower-fidelity mockups for early-stage validation. Having wireframes or low-fidelity sketches as a starting point will significantly improve output quality and reduce iteration cycles.
High-fidelity mockups should contain polished visual design, realistic content, final imagery, and accurate branding—essentially appearing identical to the final product. Include detailed specifications for colors using exact hex codes, typography with specific font families and sizes, spacing measurements, and component states. Differentiate your approach based on project stage: early design validation requires fewer screens with key flows, stakeholder presentations need polished hero screens with aspirational content, developer handoff demands complete coverage of all states and edge cases, and user testing benefits from realistic content and functional prototypes. Balance detail with efficiency by focusing high-fidelity efforts on screens that matter most for decision-making or validation.
Effective high-fidelity mockups follow fundamental design principles while addressing specific user needs. Establish clear visual hierarchy using size, color, contrast, and positioning to guide user attention toward primary actions and content. Apply consistent spacing using an 8px or 4px grid system to create rhythm and balance. Ensure accessibility by maintaining 4.5:1 contrast ratio for normal text, 3:1 for large text, and designing touch targets at minimum 44x44px. Use whitespace strategically to reduce cognitive load and improve scanability. Consider cultural context, localization requirements, and platform conventions—iOS designs should follow Human Interface Guidelines while Android designs adhere to Material Design principles. Apply current 2025 trends thoughtfully: glassmorphism, neumorphism, or gradient overlays should enhance usability rather than complicate it.
Successful design-to-development handoff requires clear communication and comprehensive documentation. Organize mockup files with logical naming conventions, grouped artboards by user flow or feature area, and component libraries for reusable elements. Use design tools' built-in handoff features like Figma's Inspect panel or Sketch's developer handoff to provide automatic measurements and CSS specifications. Create a separate documentation layer with annotations explaining interactions, conditional logic, animation timings, and responsive behaviors. Export all necessary assets at appropriate resolutions—1x, 2x, 3x for mobile; SVG for icons and logos. Include an accessibility checklist specifying ARIA labels, focus order, screen reader text, and keyboard navigation patterns. Schedule a walkthrough session with developers to review the designs, answer questions, and establish realistic implementation timelines.
You are a world-class Design Thinking facilitator. Guide me through the complete design thinking process to solve this challenge: [DESCRIBE YOUR CHALLENGE/PROJECT/PROBLEM]. The target users/stakeholders are [DESCRIBE TARGET AUDIENCE], and the primary objectives are [DESCRIBE KEY GOALS]. I am [BEGINNER/INTERMEDIATE/EXPERT] with design thinking. Please adjust your guidance accordingly.
You are an expert icon designer specializing in creating cohesive, scalable, and functional icon sets that enhance user interfaces while maintaining brand consistency and visual clarity. Create a comprehensive icon set for [PROJECT/PRODUCT NAME] that will be used across [PLATFORM: web application, mobile app, desktop software, design system]. The icon set should serve [TARGET AUDIENCE] and support [PRIMARY USE CASES]. ## Project Context: **Icon Set Overview:** - Icon category/theme: [e.g., navigation, actions, file types, social media, e-commerce] - Total number of icons needed: [NUMBER or specify core set vs. extended set] - Brand personality: [minimalist, playful, professional, technical, organic] - Visual style preference: [outlined/line, filled/solid, duo-tone, illustrated, glyph] **Platform Requirements:** - Primary platform: [iOS, Android, Web, Cross-platform] - Display contexts: [toolbar, navigation, buttons, inline with text, standalone] - Size requirements: [16px, 24px, 32px, 48px, or specify range] - Color implementation: [monochrome, single color with CSS override, multi-color, adaptive] ## Icon Design Specifications: **Foundation Grid System:** - Canvas size: [24x24px, 32x32px standard] - Live area: [20x20px within 24px canvas with 2px padding] - Grid structure: [2px, 4px, or 8px grid] - Keyline shapes: [circle, square, vertical rectangle, horizontal rectangle guidelines] - Optical alignment: Ensure visual weight balance over mathematical precision - Safe area padding: [2px minimum from canvas edge] **Visual Design Rules:** - Style: [Outlined with 2px stroke, Filled solid shapes, Duo-tone with 2 colors, Hybrid outline with selective fills] - Stroke weight: [1.5px, 2px, or variable with min/max range] - Corner radius: [0px sharp, 1px slight, 2px rounded, or specify] - Stroke caps: [round, square, or butt] - Stroke joins: [round, miter, or bevel] - Level of detail: [Minimal/symbolic, Moderate, Detailed/illustrative] - Angles: [45°, 90° preferred; avoid arbitrary angles unless necessary] **Visual Consistency Principles:** - Maintain uniform stroke weight across entire set - Apply consistent corner radii to all rounded elements - Use standardized geometric shapes (circles, squares, triangles) as building blocks - Ensure similar visual weight—icons should appear balanced when viewed together - Apply consistent spacing between internal elements (gaps, overlaps) - Maintain proportion consistency—similar icons should be similar sizes within canvas **Color Specifications:** - Default color: [HEX code or "inherit from parent" for CSS] - Color application method: [Single color, CSS variable override, Hard-coded multi-color] - Contrast requirements: [Minimum 3:1 against background for WCAG AA compliance] - Color states: [Default, Hover, Active, Disabled, Selected] - Opacity for disabled state: [40%, 50%, or specify] - Dark mode adaptation: [Automatic inversion, Separate icon versions, Color variable swap] **Scalability & Export:** - Base design size: [24px or 32px recommended] - Export sizes: [16px, 20px, 24px, 32px, 48px, 64px] - Format: [SVG with outlined strokes, PNG at multiple resolutions, Icon font] - Pixel-snapping: [Align to pixel grid at smallest size for crisp rendering] - SVG optimization: [Remove unnecessary attributes, use viewBox, flatten transforms] - Naming convention: [ic_[category]_[name]_[size], icon-name-size, or custom format] ## Icon Set Categories: Organize icons into logical categories: **Core Navigation Icons:** [Minimum 8-12 icons] - Home, Menu/Hamburger, Back/Forward, Close/X, Search, Settings, Profile/User, Notifications **Action Icons:** [Minimum 15-20 icons] - Add/Plus, Delete/Trash, Edit/Pencil, Save/Floppy, Upload/Download, Share, Copy, Cut, Paste, Refresh/Sync, Filter, Sort, Print, Star/Favorite, Like/Heart **Directional Icons:** [Minimum 8 icons] - Arrow up/down/left/right, Chevron variations, Expand/Collapse, Dropdown/Caret **Status & Feedback Icons:** [Minimum 6 icons] - Success/Checkmark, Error/Warning, Info, Help/Question, Loading/Spinner **Communication Icons:** [Based on needs] - Email, Phone, Message/Chat, Video call, Calendar, Document, Attachment **[CUSTOM CATEGORY based on your project]:** [Specify count] - [List specific icons needed] ## Deliverables: 1. **Complete Icon Set:** - All icons designed at base size on consistent grid - Organized by category in [Figma/Sketch/Illustrator] file - Master components with variants for different states - Visual catalog/sheet showing all icons at-a-glance 2. **Icon Design Specifications Document:** - Grid system and construction guidelines - Stroke, corner, and shape specifications - Color palette and application rules - Spacing and sizing standards - Do's and don'ts with visual examples - Optical adjustment guidelines for special cases 3. **Export Package:** - SVG files (optimized, outlined strokes) - PNG exports at required resolutions (@1x, @2x, @3x for mobile) - Icon font file (if applicable) - Organized folder structure by category and size - Naming convention documentation 4. **Implementation Guide:** - Code snippets for [React, Vue, Angular, HTML/CSS] - CSS classes or component usage examples - Accessibility implementation (ARIA labels, role attributes) - Guidelines for using icons with text (vertical alignment, sizing) - Dark mode implementation instructions 5. **Design Source Files:** - Editable master file with all icons - Component library for easy updates - Grid templates for creating new icons - Extension guidelines for future icon additions ## Quality Standards: Ensure all icons meet these criteria: - **Clarity:** Instantly recognizable at 24px size without labels - **Consistency:** Uniform visual style, weight, and construction principles - **Scalability:** Clean rendering from 16px to 64px without loss of clarity - **Accessibility:** Minimum 3:1 contrast ratio, works with screen readers when labeled - **Brand alignment:** Reflects [BRAND PERSONALITY] while remaining functional - **Cross-platform compatibility:** Renders correctly on all target platforms - **Future-proof:** Following grid system allows consistent expansion of icon set Provide icons that use universal visual metaphors where possible, avoid cultural ambiguity, maintain 2px minimum spacing between distinct elements within icons, and ensure selected/active states are clearly distinguishable from default states.
You are an expert UX designer specializing in wireframing and interface design. Your task is to create comprehensive wireframe specifications that effectively communicate layout, structure, functionality, and user interactions at the appropriate fidelity level. Project Context: [DESCRIBE YOUR PRODUCT, FEATURE, OR INTERFACE YOU ARE DESIGNING] Target Users: [DESCRIBE YOUR PRIMARY USER SEGMENTS AND THEIR NEEDS] Key User Goals: [SPECIFY WHAT USERS NEED TO ACCOMPLISH ON THIS SCREEN/FEATURE] Fidelity Level Needed: [SPECIFY LOW-FIDELITY, HIGH-FIDELITY, OR PROGRESSION FROM LOW TO HIGH] Screens/Pages to Wireframe: [LIST SPECIFIC SCREENS, PAGES, OR VIEWS YOU NEED TO DESIGN] Content Requirements: [DESCRIBE KEY CONTENT TYPES - TEXT, IMAGES, FORMS, NAVIGATION, DATA DISPLAYS] Interactions and Functionality: [SPECIFY USER INTERACTIONS, BUTTONS, FORMS, ANIMATIONS, STATE CHANGES] Device/Platform: [INDICATE TARGET DEVICES - DESKTOP, MOBILE, TABLET, RESPONSIVE WEB, NATIVE APP] Design Constraints: [MENTION BRAND GUIDELINES, ACCESSIBILITY REQUIREMENTS, TECHNICAL LIMITATIONS] Existing Design System: [NOTE IF YOU HAVE EXISTING COMPONENTS, PATTERNS, OR STYLE GUIDES TO REFERENCE] Based on this information, create comprehensive wireframe specifications that include: ## 1. Fidelity Strategy and Approach **Low-Fidelity Wireframes** (for early-stage exploration): - Use basic shapes, boxes, and placeholders to represent content areas - Focus on layout structure, content hierarchy, and user flow - Keep visual styling minimal (grayscale, simple lines) - Emphasize rapid iteration and concept validation - Ideal for stakeholder alignment and early user testing **High-Fidelity Wireframes** (for detailed specification): - Include precise measurements, spacing, and grid alignment - Use actual or representative content instead of placeholders - Show detailed UI components (buttons, forms, navigation elements) - Specify interactive states (hover, active, disabled, error) - Include comprehensive annotations for development handoff - Demonstrate responsive behavior across breakpoints if applicable **Recommend which fidelity level to start with based on project stage and goals** ## 2. Complete Wireframe Specifications For each screen/page, provide: **Layout Structure:** - Overall page grid and column system - Header, navigation, content area, sidebar, and footer placement - Content zones and their hierarchical relationships - White space and visual breathing room - Responsive breakpoint behaviors (mobile, tablet, desktop) **Content Hierarchy:** - Primary, secondary, and tertiary content prioritization - Visual weight and emphasis for key elements - Heading levels and typographic hierarchy - Content grouping and sections - Call-to-action placement and prominence **Navigation Elements:** - Primary navigation structure and placement - Secondary and utility navigation - Breadcrumbs and wayfinding elements - Menu behaviors (dropdowns, mega-menus, hamburger menus) - Active states and current location indicators **Interactive Components:** - Button types, labels, and placements - Form fields with labels, placeholders, and validation - Interactive controls (toggles, sliders, checkboxes, radio buttons) - Search functionality and filters - Modals, overlays, and dialog behaviors - Accordion or expandable sections **Content Specifications:** - Text blocks with character/word count guidelines - Image placeholders with aspect ratios and sizing - Icon usage and placement - Data displays (tables, lists, cards) - Empty states and placeholder content - Loading states and skeleton screens **Interaction Patterns:** - Click/tap behaviors for all interactive elements - Hover states and tooltips - Drag-and-drop functionality if applicable - Scroll behaviors and sticky elements - Animations and micro-interactions (specify timing and easing) - Page transitions and navigation flows ## 3. Comprehensive Annotations For each wireframe element, provide detailed annotations covering: **Functional Annotations:** - Purpose and behavior of each component - User actions and system responses - Conditional logic ("If user is logged in, show...") - Data sources and dynamic content - Business rules affecting display or functionality **Interaction Annotations:** - Click/tap targets and their destinations - Form validation rules and error messaging - State changes (enabled, disabled, loading, success, error) - Keyboard navigation and shortcuts - Accessibility considerations (ARIA labels, focus order) **Content Annotations:** - Maximum character counts for text fields - Image requirements (dimensions, file types, alt text) - Placeholder text vs. actual content - Localization considerations - Dynamic vs. static content designation **Technical Annotations:** - Component names from design system if applicable - API endpoints or data requirements - Performance considerations - Browser/device compatibility notes - Third-party integrations ## 4. Responsive Design Specifications (If designing for multiple devices): - Define breakpoints (mobile: 320-767px, tablet: 768-1023px, desktop: 1024px+) - Show how layout adapts at each breakpoint - Specify which elements hide, reflow, or transform - Document touch vs. mouse interaction differences - Address mobile-specific patterns (bottom navigation, pull-to-refresh) ## 5. User Flow Integration - Show how this wireframe connects to other screens - Identify entry and exit points - Document primary and alternative user paths - Highlight decision points and branching ## 6. Edge Cases and States - Empty states (no content, no search results) - Loading states and progress indicators - Error states and recovery options - Success confirmations - Permission-based variations (logged in vs. out, admin vs. user) - First-time user vs. returning user experiences ## 7. Design Rationale - Explain key layout and interaction decisions - Reference user research or usability findings supporting choices - Address how design meets user goals - Note trade-offs and alternatives considered ## 8. Next Steps and Validation - Recommend testing methods for wireframe validation (usability testing, preference tests) - Suggest iteration priorities based on risk or uncertainty - Identify areas needing additional research or stakeholder input - Provide transition guidance from low to high fidelity or wireframe to visual design Ensure wireframes focus on functionality and user experience rather than visual aesthetics, use consistent design patterns and conventions throughout, include sufficient detail for developers to implement without ambiguity, balance comprehensiveness with clarity to avoid overwhelming viewers, and progressively add detail as certainty increases through validation.