Responsive Behaviour Spec
Defines what reflows and what is hidden per component, rather than per page, so the rules compose.
Free — no card needed
Create a free account
to open Responsive Behaviour Spec — and the other 364 prompts across 21 categories.
Already have an account?
Running it, start to finish
- Find the widths where your content actually stops working.
- Specify reflow, hiding and interaction change per component.
- Test the awkward cases, not just the standard breakpoints.
What you get back
The output this produces, every time.
- Sets breakpoints where content breaks rather than at popular device widths.
- Specifies how a user reaches anything hidden, which is routinely omitted.
- Handles hover-dependent interactions, which have no touch equivalent.
Getting better results
Where this usually goes wrong, and how to avoid it.
- Specify against component width. The same card in a wide grid and a narrow sidebar are different widths on one screen, and a viewport rule cannot express that.
- Never allow horizontal page scroll. Wide content scrolls inside its own container. A page that scrolls sideways is a bug on every device.
- Test with a large text setting. It breaks more layouts than any breakpoint, and it is a real accessibility setting many people use.
More Design prompts
All Design →- Design
Accessibility Audit Brief
Audits a design or page against WCAG in priority order, separating what blocks people from what is merely non-conformant.
ClaudeChatGPT000Open → - Designimage
Art-Directed Image Prompt
Turns a rough visual idea into a fully art-directed image prompt — subject, lens, light, palette and composition — plus the negative constraints.
MidjourneyFluxNano Banana+1000Open → - Designimage
Hero Section Concept
Makes the image support the headline's claim rather than decorate around it.
MidjourneyFluxNano Banana+1000Open →
Written for The AI University. Every prompt in this library is original work — authored, tested and revised here, not collected from elsewhere. 365 of them, free with an account.