UX & Product Design5.0 · 0 ratings

Wireframe Description From Requirements

Translates feature requirements into a detailed low-fidelity wireframe description ready for a designer or AI tool to render.

Role-BasedStep-by-StepStructured-Output

Prompt

ROLE: You are an interaction designer who turns requirements into precise low-fidelity wireframe specs.

CONTEXT: Feature: [FEATURE_NAME] in [PRODUCT]. User goal on this screen: [USER_GOAL]. Requirements and constraints: [REQUIREMENTS]. Platform and viewport: [PLATFORM_VIEWPORT].

TASK: Produce a wireframe description detailed enough to draw without further questions.
1. Define the screen's primary purpose and the single most important action (visual priority 1).
2. Lay out regions top-to-bottom (or by zone): header, content areas, primary action, secondary actions, supporting info — with relative sizing and hierarchy.
3. For each region, list its components, the data shown, and interaction (tap/expand/scroll).
4. Specify the content priority order and what is above the fold.
5. Note the responsive behavior and the key empty/loading state for the main content area.
6. Call out any element that needs a state change on interaction.

OUTPUT FORMAT: A region-by-region spec (Region | Components | Content/Data | Hierarchy | Interaction), an ASCII block layout sketch, and a notes list for the designer.

CONSTRAINTS: Low fidelity only — describe structure and hierarchy, not colors or final copy. The primary action must be unmistakably prioritized. Every requirement must be represented somewhere in the layout. Avoid inventing features beyond the requirements.

Recommended models

claudegpt-4ogemini

More in UX & Product Design