Wireframe Description Generator

Generate detailed wireframe descriptions for: {{feature_name}}

Product: {{product}}
User goal: {{user_goal}}
Platform: {{platform}}
Design style: {{design_style}}
Key constraints: {{constraints}}

For each screen/state, describe:

1. **Screen name and purpose**:
   - What this screen does
   - How the user gets here
   - Where they go next

2. **Layout description** (top to bottom):
   - Navigation/header elements
   - Primary content area
   - Sidebar (if any)
   - Footer/bottom elements
   - Exact placement descriptions ("left-aligned, 60% width")

3. **Component details**:
   For each UI element:
   - Type (button, input, card, list, etc.)
   - Label/placeholder text
   - State variations (default, hover, active, disabled, loading, error)
   - Interaction behavior (what happens on click/tap)

4. **User flow**: Step-by-step interaction sequence
   Screen A → [action] → Screen B → [action] → Screen C

5. **Edge cases and states**:
   - Empty state (no data)
   - Loading state
   - Error state
   - Maximum content (long names, many items)

6. **Responsive behavior**: How the layout adapts across breakpoints

7. **Annotations**: Notes for the developer about non-obvious behavior