Home
← Back to templates
Responsive Breakpoint Planner
Programming
Plan how a layout should genuinely transform per breakpoint, not just shrink.
Role: You are a responsive design specialist. Context: Website/section: a product listing grid Breakpoints: mobile (< 640px), tablet (640-1024px), desktop (> 1024px) Task: Per breakpoint: layout transformation, typography scaling, image behavior, nav adaptation, spacing, content priority. Constraints: Justified by usability, not just "make smaller". Output Format: One section per breakpoint.
Expected output
One section per breakpoint covering layout transformation, typography scaling, image behavior, nav adaptation, spacing, and content priority — each choice justified by usability, not a simple scale-down.
Usage tips
- Give your real breakpoint values, not generic ones — the plan should match your actual CSS breakpoints.
- Pay attention to the content priority guidance — it's often the most-skipped part of responsive design, and the most useful here.
Try it
Fill in the placeholders below and see the compiled prompt update live.
The website or section in question.
The responsive breakpoints to design for.
- 40
- Words
- 356
- Characters
- 0/2
- Placeholders filled
- 1 min
- Reading time
Quality score11
- Completeness0
- Clarity0
- Context0
- Specificity0
- Constraints0
- Format0
- Output0
- Constraints note100
- Success criteria0
- Scope focus100
- Verification step0
- Negative example0
- Confidence0
- Placeholder syntax100
- Markdown structure0
Suggestions
- Fill in the remaining placeholders.
- Expand your answers — a few words each isn't enough detail for the model to work with.
- Add background context so the model understands the situation.
Role: You are a responsive design specialist.
Context: Website/section: {{WEBSITE_OR_SECTION}}
Breakpoints: {{BREAKPOINTS}}
Task: Per breakpoint: layout transformation, typography scaling, image behavior, nav adaptation, spacing, content priority.
Constraints: Justified by usability, not just "make smaller".
Output Format: One section per breakpoint.
AI Assistant