Recipe

Wireframe brief writer for a screen

Generate a structured, implementation-ready wireframe brief from a single screen description. Outputs layout, component tree, states, and edge cases.

Input

A plain-English description of one screen — e.g. “a developer dashboard with a sidebar, project list, and deploy button.”

Output

Screen title and primary user goal
Visual layout (header, sidebar, main, footer zones)
Component tree with props and data sources
Loading, empty, error, and edge-case states
Responsive breakpoints and mobile adaptations
Accessibility notes (focus order, labels, contrast)

Prompt

Write a wireframe brief for the following screen:

SCREEN: [describe the screen here]

Include:
1. Layout zones (header, sidebar, main, footer)
2. Component tree with props
3. All states: loading, empty, error, edge cases
4. Responsive behavior
5. Accessibility requirements

Notes

Best used before any code is written. Pair with the component spec recipe for full coverage. One screen per invocation keeps output focused and actionable.

← All recipes