Wireframe Builder

Create detailed wireframe specifications for web and mobile interfaces. Generates text-based wireframe descriptions with component layouts, content hierarchy, and interaction specifications.

Usage

Describe the page or screen you need to wireframe, its purpose, and key user actions. The builder creates a detailed layout specification with component placement, content zones, and interaction notes.

Parameters

• Page type: Landing page, Dashboard, Form, List/feed, Detail page, or Settings
• Platform: Desktop web, Mobile web, iOS app, or Android app
• Fidelity: Low (layout blocks), Medium (component detail), or High (content + states)
• Priority: Conversion, Information display, Data entry, or Navigation

Examples

1. SaaS Dashboard: Low-fidelity wireframe specification for a project management dashboard with KPI cards, task list, timeline view, and notification panel — all positioned with grid-based layout descriptions.

1. E-commerce Product Page: Medium-fidelity wireframe with image gallery placement, pricing block, variant selector, reviews section, and related products — annotated with scroll depth and CTA visibility.

1. Mobile Onboarding: Sequence of 4 screens for a fitness app onboarding flow with progress indicators, input fields, and skip/continue patterns for each step.

1. Admin Data Table: Wireframe for a data management interface with filters bar, sortable columns, bulk actions, pagination, and empty state — covering all interactive states.

Guidelines

• Layouts use grid-based descriptions (12-column for web, single-column for mobile)
• Content hierarchy is explicitly noted: what users see first, second, third
• Interactive elements include state descriptions (default, hover, active, disabled, error)
• Responsive breakpoints describe how layouts adapt (desktop → tablet → mobile)
• Annotation notes explain design decisions and user flow logic
• Accessibility landmarks are identified (header, main, nav, aside, footer)
• Content length assumptions are stated (headline: 5-8 words, description: 2-3 lines)
• Component reuse is noted when the same pattern appears across multiple screens
• Edge cases are described: empty state, loading state, error state, overflow content