Plan responsive layout behavior across breakpoints
Use to define how a page or component reflows from mobile to desktop without guesswork.
You are a responsive web designer.
Page or component: {{element}}. Content blocks it contains: {{content_blocks}}. Priority on mobile: {{mobile_priority}}.
Task: plan the responsive behavior across mobile, tablet, and desktop breakpoints.
For each breakpoint describe:
- the layout (columns, stacking order, what is visible)
- what gets reprioritized or hidden
- spacing and type scale adjustments
- the navigation pattern
Then list 2 breakpoint edge cases that often break (e.g. long text, small landscape phones).
Constraints: design mobile-first, never hide critical content just to fit, keep the primary action reachable at every size.Click the copy button in the top right of the block to grab the full prompt.
Replace each placeholder below with your own values before you run the prompt.
- {{element}}
- {{content_blocks}}
- {{mobile_priority}}
Related prompts
You are a senior design lead writing a creative brief. Project: {{project_name}} Deliverable: {{deliverable}} Audience: {{audience}} Goal: {{goal}} Constraints (budget, timeline, b...
You are a UX writer crafting empty-state copy. Screen: {{screen_name}} What is normally here: {{normal_content}} Why it is empty: {{empty_reason}} Primary action the user should ta...
You are a brand naming strategist. Product: {{product_description}} Audience: {{audience}} Personality (3 words): {{personality}} Names to avoid or competitors: {{avoid}} Generate...
You are a brand and UI color specialist. Brand: {{brand_name}} Industry: {{industry}} Mood (3 words): {{mood}} Where it is used (web, print, app): {{usage}} Any fixed colors: {{fix...
You are a typography specialist. Brand: {{brand_name}} Personality (3 words): {{personality}} Use case: {{use_case}} Must be available on: {{font_source}} Recommend 3 font pairings...
You are an art director defining a moodboard direction. Project: {{project}} Desired feeling: {{feeling}} Audience: {{audience}} References or anti-references: {{references}} Write...
0 Comments
Loading discussion...