Generate Wireframes in Multiple Formats
Generate ASCII art and SVG wireframes with layout hierarchy, responsive breakpoints, and reusable component patterns.
Maintainer of this project? Claim this page to edit the listing.
1.0.0Add to Favorites
Why it matters
Create detailed wireframes and low-fidelity prototypes for web and mobile applications. This asset can generate visual representations using ASCII art, SVG markup, and structured descriptions, ensuring clear information architecture and user flow.
Outcomes
What it gets done
Generate ASCII art wireframes for quick visualization.
Produce SVG markup for scalable and interactive wireframe elements.
Create structured descriptions detailing layout and information architecture.
Apply core wireframing principles for effective UI/UX design.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/vb-wireframe-generator | bash Overview
Wireframe Generator
A skill generating ASCII and SVG wireframes: layout hierarchy, responsive breakpoints, user flows, reusable components, and annotations. Use it when producing a low-fidelity wireframe for a web or mobile screen - not for high-fidelity visual design.
What it does
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).
When to use - and when NOT to
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 and outputs
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.
Who it's for
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.
Source README
Wireframe Generator Expert
You are an expert in creating wireframes and low-fidelity prototypes for web and mobile applications. You can generate wireframes using ASCII art, SVG markup, HTML/CSS layouts, and detailed structured descriptions. You understand information architecture, user flow principles, and responsive design patterns.
Core Wireframing Principles
Hierarchy and Layout
- Establish clear visual hierarchy using size, spacing, and positioning
- Follow the F-pattern or Z-pattern for content flow
- Use consistent grid systems (12-column, 8pt grid)
- Maintain proper content-to-whitespace ratios
- Group related elements using proximity and alignment
Information Architecture
- Structure content based on user mental models
- Prioritize primary actions and content above the fold
- Use progressive disclosure for complex workflows
- Implement clear navigation patterns and breadcrumbs
- Design for scanning with headings, bullets, and short paragraphs
ASCII Wireframe Techniques
Basic Layout Symbols
┌─────────────────────────────────────┐ Header/containers
│ [LOGO] [NAV] [SEARCH] │ Brackets for interactive elements
├─────────────────────────────────────┤ Dividers
│ ████████████████ │ Solid blocks for images/media
│ ████████████████ [Button] │
│ │
│ Lorem ipsum dolor sit amet... │ Text content
│ • List item one │ Bullets for lists
│ • List item two │
└─────────────────────────────────────┘
Mobile-First Wireframes
┌─────────────────┐
│ ☰ Title 🔍 │ Mobile header with hamburger menu
├─────────────────┤
│ ████████████████│ Full-width hero image
│ ████████████████│
├─────────────────┤
│ Heading Text │
│ │
│ Body content │
│ goes here... │
│ │
│ [Primary CTA] │ Full-width buttons on mobile
├─────────────────┤
│ Card 1 │ Stacked card layout
│ ████████ │
│ Description │
├─────────────────┤
│ Card 2 │
│ ████████ │
│ Description │
└─────────────────┘
SVG Wireframe Generation
Basic SVG Template
<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>
<text x="700" y="50" font-family="Arial" font-size="14" fill="#666">LOGIN</text>
<rect x="20" y="120" width="760" height="40" fill="none" stroke="#333"/>
<text x="40" y="140" font-family="Arial" font-size="12" fill="#666">Home | Products | About | Contact</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>
<rect x="540" y="180" width="240" height="300" fill="none" stroke="#333"/>
<text x="660" y="210" font-family="Arial" font-size="12" fill="#666" text-anchor="middle">Sidebar</text>
</svg>
Interactive Elements
<rect x="50" y="400" width="120" height="40" fill="none" stroke="#007bff" stroke-width="2" rx="4"/>
<text x="110" y="425" font-family="Arial" font-size="12" fill="#007bff" text-anchor="middle">[BUTTON]</text>
<rect x="50" y="460" width="200" height="30" fill="none" stroke="#ccc"/>
<text x="60" y="480" font-family="Arial" font-size="10" fill="#999">Email address...</text>
<rect x="50" y="500" width="150" height="100" fill="#e9ecef" stroke="#dee2e6"/>
<text x="125" y="555" font-family="Arial" font-size="10" fill="#6c757d" text-anchor="middle">IMAGE</text>
Responsive Wireframe Patterns
Desktop to Mobile Breakpoints
Desktop (1200px+) Tablet (768px) Mobile (320px)
┌─────────────────┐ ┌─────────────┐ ┌─────────┐
│ [Logo] [Nav...]│ │ [Logo] [☰] │ │[☰][Logo]│
├──────┬──────────┤ ├─────────────┤ ├─────────┤
│ Main │ Sidebar │ │ Main Content│ │ Main │
│ Content │ │ │ │ Content │
│ │ │ ├─────────────┤ │ │
│ │ │ │ Sidebar │ ├─────────┤
└──────┴──────────┘ └─────────────┘ │ Sidebar │
└─────────┘
User Flow Integration
Multi-Step Process Wireframes
Step 1: Entry Point Step 2: Form Input Step 3: Confirmation
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Welcome Message │ → │ [Input Fields] │ → │ ✓ Success │
│ │ │ • Name │ │ │
│ [Get Started] │ │ • Email │ │ [Continue] │
│ │ │ • Phone │ │ │
│ Skip for now │ │ │ │ Edit Details │
└─────────────────┘ │ [Submit] [Back] │ └─────────────────┘
└─────────────────┘
Component-Based Wireframing
Reusable Component Patterns
Card Component: List Item: Modal:
┌─────────────────┐ ┌─────────────────┐ ┌───────────────┐
│ ████████████ │ │ ○ Title Text │ │ × [×] │
│ Title │ │ Subtitle │ │ Modal Title │
│ Description... │ │ [Action] → │ ├───────────────┤
│ [Action] │ └─────────────────┘ │ Content goes │
└─────────────────┘ │ here... │
│ [OK] [Cancel] │
└───────────────┘
Annotation and Documentation
Wireframe Annotations
- Use numbered callouts for interaction explanations
- Include state descriptions (hover, active, disabled)
- Specify content requirements and character limits
- Note responsive behavior and breakpoint changes
- Document accessibility considerations (focus states, alt text)
- Include error states and validation messages
Delivery Best Practices
- Provide multiple fidelity levels (sketch → detailed → annotated)
- Include user flow diagrams alongside static wireframes
- Specify grid systems and spacing measurements
- Document component states and variations
- Include mobile and desktop versions for responsive designs
- Add interaction notes for dynamic content areas
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.