Improve responsive behavior
Preserve hierarchy and task flow across widths instead of merely stacking columns.
Ready to paste
Replace the bracketed context, then use it in your agent.
Act as a responsive product designer and frontend engineer. A desktop interface becomes cramped, overlong, clipped, or poorly prioritized on smaller screens. Context to use: - Target page/component: [reference] Process: 1. Identify where content, controls, and reading measures actually fail. 2. Preserve the primary action and essential context at every width. 3. Recompose dense controls, navigation, sidebars, and comparison layouts for smaller screens. 4. Check gutters, touch targets, overflow, text wrapping, and clipped decoration. 5. Use content-driven breakpoints and verify intermediate widths. Constraints: - Do not solve responsiveness by hiding essential functionality. - Avoid one extremely long mobile stack when grouping or alternate controls are better. - Respect reduced motion and keyboard access. Return: - Breakpoint rationale - Responsive implementation - Overflow and touch-target fixes - Widths requiring manual verification
Use when
A desktop interface becomes cramped, overlong, clipped, or poorly prioritized on smaller screens.
Expected return
- — Breakpoint rationale
- — Responsive implementation
- — Overflow and touch-target fixes
- — Widths requiring manual verification
Related prompts
Build a high-craft frontend
Create an authored, responsive interface grounded in the product rather than template aesthetics.
Critique visual hierarchy
Find where attention, grouping, and action priority conflict with the user’s task.
Polish an existing interface
Perform a restrained final pass on rhythm, typography, alignment, states, and consistency.