Wireframe in Text
Text wireframes help you think through structure before opening a design tool.
This prompt
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
Complete Website Design Prompt
A structured brief that walks an AI model from business goals to sitemap, page layouts, visual direction and responsive rules.
Accessibility Audit Prompt
Reviews page markup against WCAG 2.2, separating issues confirmed in the code from those needing manual testing, with fixes and a test script.
Design Direction
A defined direction keeps the design consistent and reduces random decisions.
Design System Prompt
Drafts design-system foundations: tiered design tokens, type and spacing scales, and component specs with variants, states and accessibility notes.
Full Page Content
Strong inner pages support both user trust and SEO.
Homepage Structure
The homepage sets the first impression and guides visitors toward action.
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.
Launch Checklist
A checklist reduces the risk of launching with avoidable problems.
Responsive & UX Guidelines
Most visitors will experience your site on mobile first.
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.
Sitemap & Page Structure
A simple structure makes the site easier to build, navigate, and maintain.
Technical Recommendations
The right technical foundation saves time and future headaches.
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.
Website Copy (Hero + Key Sections)
Clear copy is often more important than visual design.
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.
Website Strategy & Goals
A clear strategy prevents you from building the wrong pages or writing the wrong message.
Wireframe in Text
Text wireframes help you think through structure before opening a design tool.
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.
Why it works
Why it matters
Text wireframes help you think through structure before opening a design tool.
Related guides
Guide
10 AI Prompts to Build a Website
A practical prompt series to plan, structure, write, design and launch a website with AI.