Wireframing

This skill enables the agent to produce wireframes at three fidelity levels — low-fi (block layouts and content hierarchy), mid-fi (defined components with placeholder content), and high-fi (pixel-accurate specs with real content, spacing values, and interaction notes). Since the agent works in text, wireframes are rendered as ASCII/box-drawing layouts or structured component specifications with precise dimensions. Each wireframe includes a component inventory, interaction annotations, and responsive breakpoint behavior.

Workflow

1. Clarify the Screen and Its Purpose: Identify which screen or view to wireframe, its role in the user flow, and the primary user action on that screen. Determine the target platform (desktop web, tablet, mobile) and any framework constraints (e.g., Bootstrap grid, Material Design components). This scoping prevents wireframes from growing beyond their intended focus.

2. Define the Component Inventory: List every UI component the screen requires: navigation bars, headings, cards, forms, buttons, tables, modals, tooltips, empty states, and loading states. For each component, note its content requirements (label text, data fields, image dimensions) and its interactive behavior (clickable, expandable, draggable, editable). This inventory becomes the wireframe's bill of materials.

3. Create the Low-Fidelity Layout: Produce a block-level layout showing content zones and their spatial relationships. Use ASCII box drawing to represent regions. Focus on information hierarchy: what the user sees first, second, third. Do not specify exact pixel values or real content at this stage — use labels like [Hero Image], [Product Grid 3×2], [CTA Button].

4. Elevate to Mid-Fidelity: Replace placeholder labels with representative content. Add specific component types (dropdown vs. radio, text input vs. textarea), define column counts and approximate proportions, and note key spacing relationships (e.g., "16px gap between cards"). Include navigation states (active tab, breadcrumb trail) and basic content hierarchy (heading levels, body text, captions).

5. Produce High-Fidelity Specifications: Add exact dimensions, spacing values (in px or rem), typography specs (font, size, weight, line-height), color token references, border-radius values, and shadow levels. Annotate every interactive element with its behavior: hover state, focus state, click action, validation rules, error messages. Include responsive breakpoint notes describing what changes at each breakpoint.

6. Document Responsive Behavior: For each wireframe, specify layout changes at mobile (< 640px), tablet (640-1023px), and desktop (≥ 1024px). Describe which components stack, collapse, hide, or reflow. Note touch target sizes for mobile (minimum 44x44px) and any gesture interactions (swipe to dismiss, pull to refresh).

Usage