skills.rest
j-cogburn
j-cogburnCOMMUNITY
Explore all skills by this author →
GitHub

wireframe

Create low-fidelity ASCII wireframes with standardized conventions and verification checks.

Updated Jun 1, 2026
Search Tags:#wireframing#ui-design#ux#ascii#layout-planning#low-fidelity#interface-structure
One-click install
npx skills add https://github.com/j-cogburn/d3 --skill wireframe-j-cogburn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe
Source: https://github.com/j-cogburn/d3/tree/main/tests/project-t01/.d3/skills/wireframe
Command: npx skills add https://github.com/j-cogburn/d3 --skill wireframe-j-cogburn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often waste time debating visual design details before agreeing on core page structure, information hierarchy, and interaction flows, leading to rework and misalignment between product, design, and engineering teams.

Core Features & Use Cases

  • Standardized ASCII Conventions: Pre-defined characters and placeholders for structural elements, content blocks, typography, and interactive components to ensure consistent, readable wireframes.
  • Reusable Layout Pattern Library: Pre-built templates for common UI patterns including top navigation bars, sidebars, card grids, forms, modals, data tables, and mobile layouts to speed up creation.
  • Structured Workflow & Verification: Step-by-step process for wireframing plus a pre-save checklist to ensure all interactive elements are labelled, primary actions are prominent, and annotations cover non-obvious interactions. Use case: For example, a product team planning a new e-commerce product listing page can use this skill to quickly map out the filter sidebar, product card grid, and pagination controls, align on the structure with stakeholders, and avoid rework later in the design process.

Quick Start

Use the wireframe skill to create an ASCII wireframe for the new user dashboard page, including the sidebar navigation, key metrics cards, and recent activity table.

Frequently Asked Questions about wireframe

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

FAQPage Schema
How do I create low-fidelity wireframes to align teams on UI structure?▼

Low-fidelity ASCII wireframes align cross-functional teams on interface structure using standardized text-based conventions, enabling rapid layout planning for pages, components, and user flows before high-fidelity design begins.

What is ASCII wireframing and when should I use it for UX planning?▼

ASCII wireframing is a tool-agnostic, text-based method for mapping interface structure. Use it during early UX planning to establish information hierarchy and interaction flows across desktop, tablet, and mobile viewports before visual design.

How do I plan responsive layouts for mobile and desktop using text-based wireframes?▼

Plan responsive layouts by applying reusable ASCII pattern templates for sidebars, navigation bars, and card grids, adapting the structural elements to fit mobile, tablet, or desktop viewport requirements.

Can I use pre-built UI patterns for forms and data tables in low-fidelity wireframes?▼

Yes, a reusable layout pattern library provides pre-built ASCII templates for common UI components including forms, modals, data tables, and navigation bars to accelerate the wireframing process.

What's the best way to verify a wireframe captures all required UI interactions?▼

The best way to verify UI interactions is using a structured pre-save checklist that ensures all interactive elements are labeled, primary actions are prominent, and annotations cover non-obvious interactions.

Why use ASCII wireframes instead of high-fidelity design for early product alignment?▼

ASCII wireframes prevent teams from debating visual details prematurely, focusing alignment on core page structure and information hierarchy to reduce rework between product, design, and engineering teams.

Related Skills

Explore More Design & Creative Skills→
lucabattistinilucabattistini

design-structure

Design information hierarchy, layout logic, and interaction patterns for user interfaces.

Community
Intermediate
binan-makerbinan-maker

recreate-screenshot

Recreate UI screens from screenshots or image references with pixel-perfect accuracy.

Community
Advanced
wsmanwsman
18

ux-design

Design UX specifications for screens, flows, HUDs, CLI interactions, and API journeys.

Community
Advanced
DevHive1DevHive1
18

recreate-screenshot

Recreate UI components from static image references into frontend code.

Community
Advanced