Wireframe Builder

Wireframe Builder generates low-fidelity UI wireframes in multiple formats, enabling rapid ideation and stakeholder communication before committing to high-fidelity design tools.

Output Formats

• ASCII wireframes — Text-based diagrams embeddable in Markdown docs and GitHub PRs. Use box-drawing characters for containers, placeholder text for content areas.
• Mermaid diagrams — Flowcharts for user flows and state machines for navigation logic
• HTML skeletons — Semantic HTML with placeholder divs, Lorem Ipsum content, and minimal CSS grid/flexbox layout — ready to hand off to developers

Component Library

The skill knows a vocabulary of common wireframe components: navigation bars, sidebars, card grids, forms (inputs, selects, checkboxes), data tables, modals, breadcrumbs, pagination, and empty states. It composes these into full-page layouts.

Information Architecture

Generates site maps as Mermaid flowcharts or indented text hierarchies. Annotates each node with page purpose and primary user action.

Annotations

Each wireframe includes numbered callouts explaining interaction intent, data sources, and open questions for design/product review. This replaces verbose spec documents for early-stage discussions.

Handoff

HTML skeleton output uses semantic tags (nav, main, aside, section, article) and ARIA landmark roles, giving developers a structural starting point that's also accessible by default.