IT & Software

Wireframe Description

Design a Clear, Responsive Wireframe with this ChatGPT Prompt for Intuitive User Interfaces

What This Prompt Does

Creates a detailed wireframe layout description for a specific page or feature of a digital product.

Outlines the placement and prioritization of UI components, content sections, and interaction points.

Includes technical guidance on layout grids, responsive behavior, component hierarchy, and accessibility considerations.

Ensures consistent and scalable UX across various device types and user states.

Tips

  • Clearly define what page or feature the wireframe is for (e.g., dashboard, checkout page, onboarding screen).
  • List key data points and user actions you expect the page to support to ensure complete component mapping.
  • Specify device types (desktop, tablet, mobile) to enable tailored responsive design descriptions.
  • Include different user states (e.g., logged in, loading, error, empty state) so the output accounts for dynamic conditions.
  • Address accessibility by highlighting needs like keyboard navigation, contrast ratios, screen reader support, or font size scalability.
  • Use the output to brief designers, developers, or stakeholders before moving into design tools like Figma or Sketch.

Prompt

Describe a detailed wireframe layout for the [specific page/feature] of our [product type]. The interface should display [list key data points/features] and support actions including [list actions]. Include specifications for: layout grid, component hierarchy, content prioritization, and responsive behavior across [list device types]. Consider different user states like [list states] and how they affect the display. Address accessibility requirements for [specific user needs].

How To Use The Prompt

Fill in the placeholders [SPECIFIC PAGE/FEATURE], [PRODUCT TYPE], [KEY DATA POINTS/FEATURES], [ACTIONS], [DEVICE TYPES], [USER STATES], and [ACCESSIBILITY NEEDS] with detailed product information. The clearer and more specific your input, the more actionable the wireframe description will be.

Example:
"Describe a detailed wireframe layout for the user profile dashboard of our wellness tracking app. The interface should display daily step count, hydration tracking, weekly activity summaries, and motivational messages. It should support actions including editing personal goals, toggling views between daily/weekly stats, and syncing with connected devices. Include specifications for a 12-column responsive grid, hierarchy of components (primary stats first, then secondary details), and behavior across desktop, tablet, and mobile. Consider user states like first-time user, data syncing in progress, and no activity data recorded. Address accessibility requirements for users with low vision and those who rely on screen readers."

Example Input

#INFORMATION ABOUT MY PRODUCT:

Specific page/feature: Course Progress Overview Page
Product type: Online Learning Platform
Key data points/features: Progress bar, list of completed lessons, upcoming assignments, course rating, last login
Actions: Resume course, download resources, leave feedback, mark lesson as complete
Device types: Desktop, Tablet, Mobile
User states: First-time user, returning user, course completed, course not started
Accessibility needs: Keyboard navigation, clear focus indicators, high contrast mode, screen reader labels

Example Output

Wireframe for Course Progress Overview Page

Layout Grid:

  • Uses a 12-column fluid grid

  • Content centered with 10-column content span and 1-column gutters on each side (desktop)

  • Stackable layout for mobile (single-column, scrollable design)

Component Hierarchy (Top to Bottom):

  1. Header:

    • Course title, user avatar, "Resume Course" CTA

  2. Progress Bar Section:

    • Large horizontal bar showing percent complete

    • Overlay text with current module (e.g., "Week 2 of 5")

  3. Lesson Tracker Section:

    • Collapsible module list

    • Checkmarks for completed lessons

    • Buttons: "Mark as Complete" / "Download Resources"

  4. Assignment Section:

    • List format with due dates, statuses (e.g., "Upcoming", "Overdue")

    • Button: "Submit Assignment"

  5. User Feedback Section:

    • "Rate Course" dropdown or star component

    • "Leave Feedback" text box

Responsive Behavior:

  • Tablet: Two-column layout for modules and assignments

  • Mobile: All components stack vertically; collapsible sections auto-expand

  • Buttons enlarge for touch accessibility on smaller screens

User States Handled:

  • First-time user: Empty state with onboarding message + "Start Course" CTA

  • Returning user: Persisted state showing last lesson viewed

  • Course completed: Certificate badge + "Review Course" and "Start New Course" buttons

  • Course not started: Locked lesson content with grayed out indicators

Accessibility Considerations:

  • ARIA labels for all buttons and progress components

  • Color contrast meets WCAG AA (4.5:1 minimum)

  • Keyboard-navigable tabs and lesson list

  • Focus rings visible on interactive elements

  • Option to switch to high contrast mode in header settings

Additional Information

This mega-prompt is ideal for product designers, UX architects, and developers looking to align on layout decisions before jumping into visual design. It supports collaborative planning, wireframe documentation, and accessibility-aware thinking from the start.

  • Use it to create design briefs or development handoff notes.

  • Helpful for communicating early concepts to stakeholders without full mockups.

  • Pair with journey maps, user flows, and component libraries for a complete UX planning toolkit.

Related Prompts

Ready to Dominate Your Business in 2025?

Get immediate access to...

30,000+ AI prompts

Marketing, business, copywriting, visuals & more.

How-to Guides & resources

Biggest collection of AI resources for your business success.

Unlimited updates

Your resources & knowledge grows, free of charge, forever.

Lifetime access

Highest priority support. Instant delivery.

GET INSTANT ACCESS NOW!
Scroll to Top