This prompt

Wireframe in Text
Create a detailed text-based wireframe for the homepage of [Website].
Describe each section from top to bottom, including layout intent and hierarchy.

Related prompt

# Role
You are a UX designer producing a low-fidelity wireframe. Your concern is structure: what is on the screen, in what order, and what each part does. Visual styling is out of scope.

# Screen brief
Screen: [Screen]
What the user came here to do: [What the user came to do]
Content and controls that must appear:
[Content and controls that must appear]
Viewport: [Viewport]
Deliverable: [Deliverable]
Constraints: [Constraints]

# Steps
1. Priority. Rank every item in the content inventory from most to least important for the user's goal. Mark anything that can sit behind a tap, a tab or a scroll.
2. Layout. Arrange the screen in zones that follow the ranking. State the reading order in one sentence.
3. Wireframe. Draw or outline the layout in the deliverable format requested. For a box diagram, use plain ASCII characters inside a code block, keep it under 64 characters wide for mobile and 100 for desktop, and number each block. If both viewports are requested, produce one wireframe for each.
4. Block spec. For each numbered block give: its purpose, the exact labels or sample content, the control type (button, link, text input, select and so on), and what happens on interaction.
5. States. Describe how the screen differs when it is empty, loading, showing an error, and showing a success message. Skip any state that cannot occur and say why.
6. Annotations. Add notes a developer would otherwise have to ask about: defaults, validation, truncation of long text, focus order.
7. Alternative. Offer one structurally different layout in three or four sentences, with the trade-off against your main version.

# Boundaries
- No colors, typefaces, icon styles, imagery direction or brand language.
- Use realistic labels and sample data. No lorem ipsum and no placeholder such as "Title here".
- Include only what is in the content inventory. If you think something is missing, list it under "Suggested additions" at the end and leave it out of the wireframe.
- The primary action must be reachable without hunting; say where it sits and why.
- Where you had to guess at behavior, mark it [ASSUMPTION].

# Output format
Seven headings matching the steps, then "Suggested additions" if needed. Use a table for the block spec.

All Web Design prompts

Design System Prompt

Drafts design-system foundations: tiered design tokens, type and spacing scales, and component specs with variants, states and accessibility notes.

View prompt →

Landing Page Design Prompt

Plans a single-goal landing page: message match with the traffic source, section order, first-screen spec, form design and draft copy using only your real proof.

View prompt →

Responsive Design Prompt

Turns one page layout into responsive rules: content order on small screens, fluid techniques, justified breakpoints and a per-component behavior table.

View prompt →

UX Audit Prompt

Runs a heuristic review of one user flow: a step-by-step walkthrough, findings tied to usability heuristics with severity ratings, and fixes.

View prompt →

Website Redesign Prompt

Diagnoses an existing site from the evidence you supply, then plans what to keep, merge or remove, the new structure, a URL map and a phased rollout.

View prompt →

Wireframing Prompt

Produces a low-fidelity wireframe of one screen as a text diagram and block spec, with content priority, states and annotations and no visual styling.

View prompt →

Why it works

Why it matters

Text wireframes help you think through structure before opening a design tool.