skills.rest
seb1n
seb1nCOMMUNITY
Explore all skills by this author →
GitHub

Wireframing

Generate text-based wireframes with component inventories and responsive specifications.

147|32|Updated Feb 11, 2026
Search Tags:#responsive design#prototyping#UX design#wireframing#interface design#UI design
One-click install
npx skills add https://github.com/seb1n/awesome-ai-agent-skills --skill wireframing-seb1n
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Wireframing
Source: https://github.com/seb1n/awesome-ai-agent-skills/tree/main/design-and-ui-ux/wireframing
Command: npx skills add https://github.com/seb1n/awesome-ai-agent-skills --skill wireframing-seb1n

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of quickly visualizing and documenting user interface layouts and interactions without needing graphical design tools, enabling rapid iteration and clear communication of design ideas.

Core Features & Use Cases

  • Multi-Fidelity Wireframes: Generate low-fi (block layouts), mid-fi (component structure), and high-fi (detailed specs) wireframes.
  • Component Inventory: Automatically lists all UI elements required for a screen.
  • Interaction & Responsiveness: Documents interactive behaviors and how layouts adapt across different screen sizes.
  • Use Case: A product manager needs to quickly mock up a new feature's mobile interface for a developer. They can use this Skill to generate a detailed, text-based wireframe specifying all components, their states, and responsive behavior.

Quick Start

Create a low-fidelity ASCII wireframe for a desktop analytics dashboard with a sidebar, KPI cards, a line chart, and a data table.

Frequently Asked Questions about Wireframing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate text-based wireframes for UI design without graphical tools?▼

Text-based wireframes generate ASCII layouts and structured component definitions to visualize UI designs. This approach produces low, mid, and high fidelity interface mockups, enabling rapid iteration and clear communication of design ideas without requiring graphical design software.

What is the difference between low, mid, and high fidelity wireframes?▼

Low fidelity wireframes provide block layouts, mid fidelity shows component structure, and high fidelity delivers detailed specifications. Multi-fidelity wireframes allow you to progressively refine interface designs from basic structural concepts to fully annotated interactive behaviors.

Can I document responsive design breakpoints and mobile interface interactions?▼

Responsive design breakpoints and mobile interface interactions are fully supported. Wireframes document how layouts adapt across different screen sizes and specify interactive behaviors, generating component inventories for platforms including web and mobile.

How to create an ASCII wireframe for a desktop analytics dashboard?▼

Creating an ASCII wireframe for a desktop analytics dashboard involves specifying UI components like sidebars, KPI cards, and data tables. The Skill generates structured text layouts with component inventories, interaction annotations, and responsive breakpoint specifications.

Does this wireframing approach work for prototyping mobile interfaces for developers?▼

Text-based wireframing works effectively for prototyping mobile interfaces for developers. It generates detailed specifications listing all required UI elements, component states, interaction annotations, and responsive behaviors needed for clear developer handoff.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-04-design-spec

Generate design specifications with traceability to PRD user stories.

Community
Advanced
ramybarsoumramybarsoum

napkin-sketch

Generate annotated ASCII wireframes and capture browser screenshots for design matching.

Community
Intermediate
gaoqiongxiegaoqiongxie
1

screenshot-to-prototype

Convert UI design screenshots into interactive HTML prototypes.

Community
Intermediate
memyselfandmmemyselfandm
8

brainstorming-designs

Guide topic-based brainstorming sessions for UI/UX designs with written output and ASCII mockups.

Community
Intermediate