PromptUX designUpdated January 12, 2026

Responsive Design Strategy

Create responsive design strategies with breakpoints, layout adaptations, and component behavior across devices.

Prompt

Create a responsive design strategy for [feature/page name].

Context:
- Feature/page: [name]
- Content types: [list]
- Key interactions: [list]
- Design constraints: [describe]

Provide:

1. Device Strategy
   - Target devices (mobile, tablet, desktop)
   - Primary device (if applicable)
   - Device priorities
   - Testing approach

2. Breakpoint Strategy
   - Breakpoint definitions
   - Rationale for each breakpoint
   - Layout changes at each breakpoint
   - Component adaptations

3. Layout Adaptations
   For each breakpoint:
   - Grid system
   - Column structure
   - Spacing adjustments
   - Content prioritization

4. Component Behavior
   - How components adapt
   - When to show/hide elements
   - Navigation patterns
   - Form adaptations
   - Image/media handling

5. Typography Scaling
   - Font size adjustments
   - Line height adjustments
   - Heading hierarchy
   - Readability considerations

6. Touch & Interaction
   - Touch target sizes
   - Gesture considerations
   - Hover state alternatives
   - Input method adaptations

7. Performance Considerations
   - Image optimization
   - Asset loading strategies
   - Animation performance
   - Code splitting considerations

8. Content Strategy
   - What content to prioritize
   - What to hide or simplify
   - Progressive disclosure
   - Content hierarchy

9. Testing Plan
   - Devices to test on
   - Browsers to test
   - Key scenarios to test
   - Edge cases to consider

10. Implementation Notes
    - CSS approach (mobile-first vs desktop-first)
    - Framework considerations
    - Component library considerations
    - Maintenance approach

Format as a comprehensive responsive design strategy document.

How to use

1Replace [feature/page name], [list], and [describe] with your specific details
2Add context before the prompt: Describe the feature/page and design approach. Example: "Feature: Dashboard. Content types: Charts, tables, filters. Key interactions: Filtering, sorting. Design constraints: Must work on mobile (320px) to desktop (1920px)."
3If you have existing designs: Paste design files or screenshots. Say "Design files: [paste links or describe]"
4If you have breakpoint preferences: Mention breakpoints. Say "Breakpoints: 768px (tablet), 1024px (desktop)"
5Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude
6Review the responsive strategy: Check breakpoint strategy, layout adaptations, component behavior, and typography scaling
7Ask for specifics: Request "Focus on mobile-first approach" or "Detail tablet breakpoint behavior" or "Expand component adaptations"
8Export to your tool: Copy the responsive strategy to Figma, Notion, or your design documentation
9Use for implementation: Apply the responsive strategy to guide your responsive design implementation

Pro Tips

• Specify design approach: Mention "Mobile-first" or "Desktop-first" so AI suggests appropriate approach
• Include breakpoint preferences: Mention your breakpoints (e.g., "768px, 1024px, 1440px") so AI uses them
• For complex layouts: Break down complex layouts into sections: "Create strategy for dashboard sidebar navigation"
• Request component adaptations: Ask "How should this component adapt at mobile vs desktop?" for component-specific guidance
• Save as template: Reuse the responsive strategy structure for future responsive designs