PiSkill logoPiSkill
UI/UX & Website Prompts

Responsive Content Priority Planner

Define how content and interactions should reflow, simplify, and remain usable across screen sizes, orientations, zoom, and input methods.

FreeClaudeChatGPT
Best for

Design and frontend teams translating complex desktop experiences into usable responsive interfaces without hiding essential functionality.

Suitable LLM groups
FrontierReasoning
Download Prompt.md
Prompt
You are a responsive UX designer who specializes in content priority, adaptive interaction, and accessible behavior across devices.

Inputs:
1. Page or product flow and primary user tasks: {{experience}}
2. Content, controls, media, and data elements: {{interface_inventory}}
3. Devices, contexts, orientations, and input methods: {{usage_context}}
4. Current layouts or breakpoints: {{current_design}}
5. Accessibility, performance, localization, and technical constraints: {{constraints}}

Do the following:
1. Rank every element by task importance, frequency, urgency, dependency, and consequence of omission rather than desktop visual prominence.
2. Define what remains visible, reorders, collapses, summarizes, scrolls, becomes progressive disclosure, or moves to a separate view across available widths.
3. Specify responsive behavior for navigation, tables, forms, charts, media, dialogs, sticky controls, hover-dependent actions, touch targets, keyboard focus, zoom, and on-screen keyboards.
4. Address long translations, dynamic text, empty and error states, slow connections, image loading, reduced motion, orientation changes, and safe areas.
5. Produce a content-priority table, breakpoint-independent layout rules, component behavior matrix, annotated mobile-first wireframe notes, and test checklist. Never remove essential actions or information solely because the screen is small.

How to use

  1. List every content and control element.
  2. Describe real device contexts and input methods.
  3. Rank by user task rather than current layout.
  4. Test at zoom levels and intermediate widths.

Example input

Experience: SaaS invoice review page with supplier details, PDF preview, coding fields, approval history, policy warnings, comments, and Approve, Reject, or Request changes actions. Context: desktop finance staff and managers approving on phones; some use 200% zoom. Current design: three desktop columns collapse unpredictably below 900 px. Constraints: German labels, WCAG 2.2 AA, PDF may load slowly, and approval warnings must appear before action.

Example output

The plan prioritizes invoice identity, amount, warning status, and decision actions while keeping coding details editable in an accordion and approval history in a separate section. On narrow screens, the PDF becomes an optional full-screen preview with a persistent document summary. Actions remain reachable but are disabled until required warnings are acknowledged. Rules cover 200% zoom, long German labels, focus order, touch targets, slow-PDF fallback, keyboard appearance, and orientation changes.

Customization tips

  • — Use layout rules instead of device-specific assumptions.
  • — Keep high-impact warnings near affected actions.
  • — Replace hover-only behavior on touch devices.
  • — Design slow-loading and missing-content states.

Tags

#responsive-design#mobile-ux#content-priority#adaptive-interface#accessible-layout

FAQ

What is this prompt for?
It defines how interface content and behavior adapt across widths, devices, zoom levels, and input methods.
How should I customize it?
Provide the task, interface inventory, device contexts, existing layouts, accessibility needs, localization, performance, and technical limits.
Are there any limitations?
The rules still require implementation testing with real content, browsers, devices, assistive technology, and unusual viewport sizes.
How is it different from a basic prompt?
It ranks content by task consequence and specifies reordering, disclosure, component states, zoom, touch, keyboard, translation, and performance behavior.

Related Prompts

All UI/UX & Website prompts →
Free

Accessibility Quick Audit

Reviews a described website or app interface against core accessibility principles, flagging likely issues for users with visual, motor, or cognitive differences.

ClaudeChatGPT
#accessibility#ui-ux#wcag
Use Accessibility Quick AuditDownload Prompt.md
Free

Dashboard Information Hierarchy Designer

Structure a dashboard around decisions, exceptions, comparisons, and drill-down paths instead of filling a grid with disconnected metrics.

ClaudeChatGPT
#dashboard-design#information-hierarchy#data-ux
Use Dashboard Information Hierarchy DesignerDownload Prompt.md
Free

Design System Component Specification Writer

Turn a UI component into an implementation-ready specification covering anatomy, states, behavior, content, accessibility, tokens, and quality checks.

ClaudeChatGPT
#design-system#component-specification#ui-components
Use Design System Component Specification WriterDownload Prompt.md
Related skills coming soon — browse all skills.
Related articles coming soon — visit the Learn hub.