Prompt lesson · 19 prompts
Responsive Design Suggestions prompts for Web Developers
19 ready-to-use prompts from our AI for Web Developers course. Copy one, fill in the {{placeholders}}, and paste it into ChatGPT, Claude, Gemini or any other AI.
Adjust Typography for Devices
Use this when you need to ensure text is readable and visually appealing across different screen sizes.
Role You are a UI/UX designer with expertise in responsive typography. Your goal is to provide specific, actionable recommendations for font sizes, line heights, and spacing that enhance readability and visual appeal on any device.
Context you provide
- {{website_type}}: e.g., news site, blog, corporate site.
- {{target_audience}}: e.g., general public, professionals, seniors.
- {{devices}}: e.g., mobile, tablet, desktop.
Instructions
- Ask for missing context if needed.
- Based on the website type and audience, recommend a typographic scale (base font size, scale ratio) and line-height values for each device category.
- Provide CSS code using clamp() or media queries to implement fluid typography.
- Suggest font pairings that work well for the given context.
- Explain how to maintain consistency across devices.
Output format Provide a structured response with sections: Recommended Typography, CSS Implementation, and Font Pairing Suggestions. Use a table for font sizes across devices. Keep the response under 400 words.
Guardrails
- Do not recommend specific fonts without considering licensing.
- Ensure the typography suggestions are accessible (e.g., sufficient contrast).
- Stay within the scope of typography; do not discuss other design elements.
Example Website type: news site; target audience: general public; devices: mobile, tablet, desktop.
Open this prompt Creating · Beginner
Breakpoint Determination Guide
Use this when you need guidance on how to determine appropriate breakpoints for a responsive website, especially for a specific audience or device set.
Role You are a responsive design mentor who helps developers choose breakpoints based on content, audience, and device context, avoiding arbitrary values.
Context you provide
- {{website_type}}: The type of website (e.g., 'portfolio', 'news site', 'online store').
- {{audience}}: The primary audience or user group (e.g., 'young adults on mobile').
- {{devices}}: (Optional) Specific devices to target (e.g., 'iPhone 12, iPad Pro, 1080p desktop').
Instructions
- If any of the required inputs are missing, ask for them before proceeding.
- Explain the concept of content-driven breakpoints, where layout changes are based on content needs rather than device sizes.
- Provide a step-by-step process for identifying breakpoints: start with a mobile layout, then expand until the design breaks, and set a breakpoint there.
- Offer guidelines for common breakpoint ranges (e.g., 480px, 768px, 1024px) but emphasize customization.
- Suggest tools and methods for testing breakpoints across devices.
Output format Provide a structured guide with sections: 'Understanding Breakpoints', 'Step-by-Step Process', 'Common Breakpoint Ranges', and 'Testing Tools'. Use numbered steps and bullet points, and keep the total length between 300-500 words. The tone should be instructive and accessible.
Guardrails
- Do not present breakpoints as one-size-fits-all; always tie them to content and user needs.
- Flag any assumptions about the audience's devices or behavior.
- Stay focused on breakpoint determination; avoid tangential CSS advice.
Example Website type: 'news site', Audience: 'readers on mobile and tablet', Devices: 'iPhone SE, iPad, 13-inch laptop'.
Open this prompt Planning · Beginner
Build Fluid Grid Layouts
Use this when you need to create flexible, proportionate layouts that adapt seamlessly across devices using fluid grids.
Open this prompt Creating · Intermediate
Button and Link Placement
Use this when you need to optimize the placement of buttons and links for usability and interaction across different screen sizes.
Open this prompt Writing · Intermediate
Design Touch-Friendly Elements
Use this when you need to improve the usability of interactive elements on touch devices.
Open this prompt Creating · Intermediate
Design Touch-Friendly Interfaces
Use this when you need to make web interfaces more usable on touch devices by optimizing buttons, forms, and gestures.
Open this prompt Creating · Intermediate
Implement Flexible Responsive Images
Use this when you need to implement responsive images that adapt to different screen sizes without losing quality.
Open this prompt Creating · Intermediate
Implement Responsive Font Scaling
Use this when you need to implement fluid typography that adjusts text sizes proportionally for readability across devices.
Open this prompt Creating · Intermediate
Implementing Media Queries
Use this when you need to write or understand CSS media queries to make your website responsive across different screen sizes and resolutions.
Open this prompt Coding · Intermediate
Make Tables Responsive
Use this when you need to adapt tables for mobile screens, improving usability and readability.
Open this prompt Creating · Intermediate
Mobile-First Design Strategy
Use this when you want to design or adapt a website with a mobile-first approach, prioritizing smaller screens for better user experience.
Open this prompt Planning · Intermediate
Optimize Images for Performance
Use this when you need to optimize images to improve loading speed and responsiveness on your website.
Open this prompt Creating · Intermediate
Optimize Website Performance
Use this when you need to improve website speed and responsiveness through file optimization, caching, and reduced HTTP requests.
Open this prompt Analysis · Intermediate
Recommend Optimal Font Sizes
Use this when you need to determine appropriate font sizes for different screen resolutions to ensure readability and aesthetics.
Open this prompt Analysis · Beginner
Responsive Breakpoint Strategy
Use this when you need to determine the best breakpoints for a responsive design to ensure a smooth user experience across devices.
Open this prompt Planning · Intermediate
Responsive Layout Adjustments
Use this when you need to adapt your website or app layout for different screen sizes and orientations to improve user experience.
Open this prompt Planning · Intermediate
Support Retina Displays
Use this when you need to ensure images and graphics appear crisp on high-resolution screens.
Open this prompt Creating · Intermediate
Tailored Media Query Recommendations
Use this when you need specific media query suggestions for your website to ensure it looks great on various devices and screen sizes.
Open this prompt Planning · Intermediate