Generate Wireframes in Multiple Formats

This skill generates wireframes and low-fidelity prototypes using ASCII art, SVG markup, and structured layout descriptions. It applies hierarchy and layout principles (F/Z-pattern content flow, 12-column or 8pt grid systems, proximity-based grouping) and information architecture practices (mental-model-based structure, above-the-fold prioritization, progressive disclosure). It produces ASCII wireframes using consistent layout symbols (boxed containers, bracketed interactive elements, solid blocks for media, bulleted lists), mobile-first ASCII layouts with a hamburger-menu header and stacked cards, SVG wireframe templates with header/nav/main-content/sidebar regions and interactive element placeholders (buttons, form inputs, image placeholders), responsive breakpoint comparisons (desktop/tablet/mobile), multi-step user flow wireframes (entry point, form input, confirmation), reusable component patterns (card, list item, modal), and annotation/documentation practices (numbered callouts, state descriptions, responsive behavior notes, accessibility considerations).

Use this skill when producing a low-fidelity wireframe for a web or mobile screen - sketching an ASCII layout with header/nav/content regions, generating an SVG wireframe template with placeholder shapes and labels, comparing a layout across desktop/tablet/mobile breakpoints, wireframing a multi-step user flow, building reusable component wireframes (card, modal, list item), or annotating a wireframe with interaction and accessibility notes.

It does not cover high-fidelity visual design or a specific design tool's file format (Figma, Sketch) - it is focused on structural, low-fidelity wireframe representation in text/SVG form.

Inputs are typically a screen or flow's content and interaction requirements. Outputs include ASCII or SVG wireframes, for example an SVG layout with labeled regions:

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="760" height="80" fill="none" stroke="#333" stroke-width="2"/>
  <text x="40" y="50" font-family="Arial" font-size="14" fill="#666">LOGO</text>
  <rect x="20" y="180" width="500" height="300" fill="#f0f0f0" stroke="#333"/>
  <text x="250" y="320" font-family="Arial" font-size="14" fill="#999" text-anchor="middle">Main Content Area</text>
</svg>

Other outputs include mobile-first ASCII layouts with stacked cards, desktop/tablet/mobile breakpoint comparisons (typically 1200px+ for desktop, 768px for tablet, and 320px for mobile), a multi-step user flow wireframe (entry, form, confirmation), reusable component wireframes (card/list item/modal), and annotation conventions (numbered callouts, state descriptions, accessibility notes). Delivery practice is to layer fidelity progressively - sketch, then detailed, then annotated - pairing static wireframes with user flow diagrams, specifying grid systems and spacing measurements explicitly, documenting component states and variations, providing both mobile and desktop versions for responsive designs, and adding interaction notes for any dynamic content areas.

UX designers and product teams producing low-fidelity wireframes who need quick, structural ASCII/SVG representations rather than jumping straight to high-fidelity mockups. Layout choices are guided throughout by hierarchy principles - clear visual hierarchy via size, spacing, and positioning, proper content-to-whitespace ratios, and grouping related elements through proximity and alignment - rather than arbitrary placement.