Prompt lesson · 27 prompts
Interface Layout Design prompts for UX/UI Designers
27 ready-to-use prompts from our AI for UX/UI Designers course. Copy one, fill in the {{placeholders}}, and paste it into ChatGPT, Claude, Gemini or any other AI.
Accessibility Considerations in Interface Design
Use this when you need to design or evaluate interfaces to ensure they are accessible and inclusive for all users.
Role You are an accessibility and UX design expert who helps create interfaces that are usable and inclusive for people with diverse abilities.
Context you provide
- {{interface_type}}: The type of interface (e.g., web app, mobile app, desktop software).
- {{accessibility_goals}}: The specific accessibility needs to address (e.g., visual impairments, motor disabilities, hearing impairments, assistive technology compatibility).
- {{user_base}}: The primary user base or target audience.
Instructions
- Ask for any missing context before starting.
- Based on the {{interface_type}} and {{accessibility_goals}}, identify key accessibility challenges and opportunities.
- Provide specific, actionable design recommendations for each accessibility need, referencing established guidelines (e.g., WCAG) where relevant.
- Suggest methods for testing and validating accessibility across different devices and user needs.
- Highlight how these accessibility features can enhance user engagement and expand the audience.
Output format Provide a structured response with sections for each accessibility need, including design recommendations, testing methods, and expected benefits. Use bullet points and clear headings, and maintain a practical, user-centered tone.
Guardrails
- Base recommendations on established accessibility standards and best practices.
- Avoid overcomplicating; focus on practical, implementable suggestions.
- Do not assume the user's technical level; explain terms when necessary.
Example Interface type: web application; Accessibility goals: visual impairments, keyboard navigation; User base: general public.
Open this prompt Creating · Intermediate
Build Card-Based Layouts
Use this when you need to design a card-based interface for displaying content in a scannable and interactive way.
Role You are a UX/UI designer with expertise in content-heavy interfaces. Your goal is to create card-based layouts that are visually appealing, easy to scan, and optimized for user interaction.
Context you provide
- {{app_type}}: The type of application (e.g., news, recipe, travel, social media).
- {{content_elements}}: The key information to display on each card (e.g., image, title, summary).
- {{interaction_requirements}}: How users should interact with cards (e.g., swipe, tap, drag).
- {{device_target}}: The primary device (e.g., mobile, tablet, desktop).
Instructions
- Ask for missing context before starting.
- Define the card structure, including dimensions, spacing, and visual hierarchy.
- Recommend a grid system that works for the target device and content type.
- Specify interaction patterns (e.g., swipe gestures, tap actions) and how they should be implemented.
- Provide guidelines for responsive behavior across different screen sizes.
- Include accessibility considerations, such as keyboard navigation and screen reader support.
- Offer 2–3 variations of the card layout with different visual treatments.
Output format Present the design as a structured specification with sections for Card Structure, Grid System, Interactions, Responsiveness, and Accessibility. Use bullet points and include a brief rationale for each decision.
Guardrails
- Do not assume specific content types; ask if not provided.
- Flag any trade-offs between visual appeal and performance.
- Stay focused on the card layout; do not design the entire app unless requested.
Example
- {{app_type}}: Recipe app; {{content_elements}}: Photo, recipe name, cooking time; {{interaction_requirements}}: Tap for details, swipe to browse; {{device_target}}: Mobile.
Open this prompt Creating · Intermediate
Color Scheme Selection
Use this when you need a cohesive, psychology-informed color palette that aligns with a brand and enhances user experience.
Open this prompt Creating · Intermediate
Create Low-Fidelity Wireframes
Use this when you need to quickly sketch out the structure and layout of a digital product interface.
Open this prompt Creating · Intermediate
Create Sticky Header Design
Use this when you need a sticky header that keeps key navigation elements visible while users scroll.
Open this prompt Creating · Beginner
Design Documentation Guide
Use this when you need to create or improve design documentation or style guides to ensure consistency and streamline future updates.
Open this prompt Creating · Intermediate
Design Interactive Image Carousel
Use this when you need to design an image carousel or slider for a website or app, focusing on usability and visual appeal.
Open this prompt Creating · Intermediate
Design Intuitive Buttons
Use this when you need to design buttons that are visually appealing, consistent, and intuitive for users.
Open this prompt Creating · Intermediate
Design Intuitive Icon Set
Use this when you need to create or select icons that are intuitive, consistent, and aligned with your interface's design language.
Open this prompt Creating · Intermediate
Design Modal Windows
Use this when you need to implement modal windows that display additional information or perform tasks without requiring users to leave the current page.
Open this prompt Creating · Intermediate
Design Responsive Grid System
Use this when you need a flexible grid system that adapts to various screen sizes while maintaining visual consistency.
Open this prompt Creating · Intermediate
Establish Visual Hierarchy
Use this when you need to guide user attention and organize elements by importance in an interface.
Open this prompt Analysis · Intermediate
Floating Action Button Design
Use this when you need to design a floating action button that is visible, accessible, and optimized for user interaction.
Open this prompt Creating · Beginner
Floating Label Implementation
Use this when you need to implement floating labels in form fields to create a cleaner, more intuitive user experience.
Open this prompt Creating · Intermediate
Form Layout Optimization
Use this when you need to design or improve form layouts to maximize usability, efficiency, and visual appeal.
Open this prompt Creating · Intermediate
Implement Color-Coded Categorization
Use this when you need to use color coding to visually group and differentiate content for better user comprehension.
Open this prompt Creating · Intermediate
Implement Grid System for UI
Use this when you need to set up a grid structure for consistent alignment and responsive layout in a design project.
Open this prompt Creating · Intermediate
Implement Infinite Scroll UX
Use this when you need to implement or improve infinite scroll functionality for a website or app, balancing user experience and performance.
Open this prompt Creating · Intermediate
Improve Designer-Developer Collaboration
Use this when you need to enhance collaboration between UX/UI designers and developers to ensure accurate implementation of designs.
Open this prompt Planning · Intermediate
Plan Responsive Design
Use this when you need to ensure your interface layout adapts seamlessly to different screen sizes and devices, providing a consistent user experience.
Open this prompt Planning · Intermediate
Present Design to Stakeholders
Use this when you need to effectively communicate and present your interface layout design to stakeholders or clients to gain buy-in and ensure project success.
Open this prompt Communication · Intermediate
Refine Interface Iteratively
Use this when you need to improve an existing interface design based on user feedback and testing to better meet user needs.
Open this prompt Analysis · Intermediate
Select Typography for Interface
Use this when you need to choose fonts, sizes, and styles that enhance readability and align with brand identity.
Open this prompt Decisions · Intermediate