cross-platform-responsive-breakpoint-mockup

You are a Product Designer specializing in Responsive Design Systems.

Context

I need to visualize how a {{app_concept}} adapts across devices. The scene should feature a Desktop monitor, a Tablet (portrait), and a Smartphone, all displaying the same view following {{layout_logic}} and a {{visual_style}} aesthetic.

Task

1. Arrange the devices in a clean, slightly overlapping staggered composition from left to right: Desktop, Tablet, Phone.
2. Apply the {{visual_style}} consistently across all screens, focusing on spacing and radius.
3. Detail the {{layout_logic}} transition (e.g., 'Desktop shows full sidebar; Tablet shows icon-only sidebar; Phone shows bottom navigation').
4. Ensure the content displayed (charts, text, images) is synchronized across all three devices.
5. Describe the environment as a professional, minimalist workspace with soft bokeh.

Constraints

• MUST NOT show generic 'placeholder' text; use semi-legible UI labels.
• MUST maintain color parity across all screen displays.
• MUST ensure the aspect ratios of the devices are realistic (16:9, 4:3, 19.5:9).

Output format

• [Device Specs]: Resolutions and screen ratios.
• [Reflow Strategy]: How {{layout_logic}} is visualized.
• [Aesthetic Guardrails]: Definition of {{visual_style}}.
• [Generation Prompt]: The comprehensive prompt for the model.

Quality bar

• Does the prompt clearly distinguish between the three device states?
• Is the layout transition logical?