UX Wireframe Describer

Create detailed text-based wireframe descriptions for any web or mobile screen.

**Screen Type:** [LANDING PAGE / DASHBOARD / FORM / PRODUCT PAGE / SETTINGS SCREEN / ONBOARDING FLOW]
**Platform:** [DESKTOP WEB / TABLET / MOBILE (iOS) / MOBILE (Android)]

**Wireframe Description Format:**
- Layout grid specification: 12-column grid for desktop, 4-column for mobile, gutter width, margin values
- Component placement with exact spacing values (padding and margins in px/rem)
- Responsive behavior at each breakpoint (desktop >1024px, tablet 768-1024px, mobile <768px)
- Content hierarchy ranking (what the eye sees first, second, third based on F-pattern or Z-pattern reading)

**For Each Component Include:**
- Component type and purpose
- Exact position in layout (top-left, center-aligned, full-width section)
- Size specifications (width, height, max-width constraints)
- Content inside the component (text copy, image dimensions, button labels)
- Interaction states: default, hover, active/pressed, focus, disabled, error/loading
- Accessibility considerations: tab order position, ARIA labels needed, focus ring styling
- Developer handoff notes: CSS framework class suggestions, responsive behavior notes, animation specifications

How to Customize It

Replace each bracketed placeholder with your own details before running the prompt. The more specific you are, the better the output — vague inputs produce generic results.

• [LANDING PAGE / DASHBOARD / FORM / PRODUCT PAGE / SETTINGS SCREEN / ONBOARDING FLOW]Swap in your landing page or dashboard or form or product page or settings screen or onboarding flow.
• [DESKTOP WEB / TABLET / MOBILE (iOS) / MOBILE (Android)]Swap in your desktop web or tablet or mobile (ios) or mobile (android).

When to Use It

• Speccing screens for a developer or designer when you can articulate the requirements but not sketch them.
• Working through information hierarchy before opening Figma, where visual decisions would prematurely anchor the layout.
• Generating structured input for AI UI-generation tools, which execute detailed layout descriptions far better than vibes.

Tips for Better Results

• 1State the screen's single primary action first; every layout question ("what goes above the fold?") resolves by reference to it.
• 2Ask for the mobile behavior of every component explicitly — "it stacks" hides most of the hard decisions.
• 3Include the unhappy states in the spec (empty, loading, error, overflow text); wireframes that only show the happy path defer exactly the design work that matters.