AI/UX PLAYGROUND
Subscribe newsletter
PromptUX design

Wireframe Generation

Generate detailed wireframes with layout, hierarchy, and interaction patterns.

Share

Actions

Tags

wireframeuxlayoutinformation-architectureprototyping

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

  1. 1Replace [page/screen name] with your specific screen (e.g., "User Dashboard", "Checkout Page", "Onboarding Flow")
  2. 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."
  3. 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"
  4. 4Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude
  5. 5Review the generated wireframe: The AI will create a detailed layout structure with annotations
  6. 6Ask for variations: Request "mobile layout version" or "alternative layout for smaller screens" or "show me a different content hierarchy"
  7. 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

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

New prompts & templates by email

Weekly copy-paste prompts, pattern notes, and AI UX resources on Substack - no spam, unsubscribe anytime.

Subscribe on Substack