Wireframe Generation

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