AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

UX design

Wireframe Generation

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

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. 01

    Replace [page/screen name] with your specific screen (e.g., "User Dashboard", "Checkout Page", "Onboarding Flow")

  2. 02

    Add 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. 03

    If 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. 04

    Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude

  5. 05

    Review the generated wireframe: The AI will create a detailed layout structure with annotations

  6. 06

    Ask for variations: Request "mobile layout version" or "alternative layout for smaller screens" or "show me a different content hierarchy"

  7. 07

    Export or refine: Use the wireframe as a blueprint for Figma designs or ask for more detailed specifications

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