UX design·
Share
Wireframe Generation
Generate detailed wireframes with layout, hierarchy, and interaction patterns.
Use Case
Creating wireframes for new features, planning page layouts, or documenting interface structure.
Prompt
Create detailed wireframes for [page/screen name]. Include:
1. Layout Structure
- Grid system
- Content hierarchy
- Navigation placement
- Key sections and zones
2. Component Placement
- Header and navigation
- Main content area
- Sidebar (if applicable)
- Footer
- Modal/overlay elements
3. Content Hierarchy
- Primary content
- Secondary content
- Call-to-action placement
- Information architecture
4. Interaction Elements
- Buttons and links
- Form fields
- Interactive components
- Hover states (indicate)
5. Responsive Considerations
- Mobile layout
- Tablet layout
- Desktop layout
- Breakpoint notes
6. Annotations
- Functionality notes
- Content requirements
- Technical constraints
- Design decisions
Format as a detailed wireframe specification with ASCII or structured layout description.How to use
- 1Replace [page/screen name] with your specific screen (e.g., "User Dashboard", "Checkout Page", "Onboarding Flow")
- 2Add context before the prompt: Describe the page purpose, key features, and user goals. Example: "This is a dashboard for project managers. Key features: task list, project timeline, team activity. Users need to quickly see project status."
- 3If you have reference layouts: Upload screenshots of similar pages you like. Say "Create a wireframe similar to Linear's dashboard but for our use case"
- 4Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude
- 5Review the generated wireframe: The AI will create a detailed layout structure with annotations
- 6Ask for variations: Request "mobile layout version" or "alternative layout for smaller screens" or "show me a different content hierarchy"
- 7Export or refine: Use the wireframe as a blueprint for Figma designs or ask for more detailed specifications
Pro Tips
- • Include examples of layouts you like: "Make the wireframe similar to Linear's dashboard - clean sidebar navigation, main content area, minimal clutter"
- • Specify platform: Mention "mobile-first layout" or "desktop dashboard layout" for better results
- • Request responsive breakpoints: Ask "Show how this adapts for mobile (320px), tablet (768px), and desktop (1280px)"
- • Ask for component annotations: Request "Label each component type (button, card, form field)" for clarity
- • Use wireframes as input for other prompts: The layout can be converted to code or Figma designs using other prompts
Tags
wireframeuxlayoutinformation-architectureprototyping
Related Prompts
Visual design
Visual Hierarchy Design
Design effective visual hierarchy for layouts to guide user attention and improve readability.
visual-hierarchygraphic-designlayout
Visual design
UI Layout & Composition Explorer
Three layout concepts (hierarchy-first, density, progressive disclosure), a recommended direction, grid spec, visual hierarchy ranking, and edge cases before detailed design.
visual-designlayoutcomposition
Visual design
Visual Hierarchy Audit
Structured critique of an existing screen from a detailed description: attention flow, hierarchy scores, P1/P2 issues, contrast flags, spacing, prioritized fixes, before/after for the top fix.
visual-designvisual-hierarchycritique
UX design
Accessibility Audit Report
Document accessibility findings with severity ratings, WCAG mappings, and remediation guidance.
accessibilitya11ywcag