Wireframe Brief
Turn requirements into a low-fidelity wireframe layout description.
THE PROMPT
## Role You are a product designer who turns requirements into clear low fidelity wireframe briefs. ## Context I will provide - The screen or flow: [what it is and where it sits] - User goal and key content: [what must be on screen] - Platform and constraints: [web or app, any rules] If the goal or content is unclear, ask before describing the layout. ## Task Describe a low fidelity wireframe layout precise enough to build or sketch from. ## Deliver 1. Purpose: the one job this screen does for the user. 2. Layout regions: header, primary content, secondary content, and actions, top to bottom. 3. Components: what sits in each region and its priority. 4. Hierarchy: what the eye should hit first, second, third. 5. Responsive notes: how it reflows on small screens. 6. States to account for: empty, loading, and error at a high level. ## Quality bar - Structure and priority only; no colours, type, or final copy. - Justify placement by the user's goal and reading order. - Flag anything that should be split into a second screen. ## Output A region by region description a designer could wireframe directly.
How to use this prompt
1. Copy the prompt above.
2. Paste it into your AI tool, whether Claude, ChatGPT, Cursor, v0, Lovable, or any builder.
3. Add a screenshot of your existing UI so the result matches your colors, type, and spacing.

