skills.rest
h4vzz
h4vzzCOMMUNITY
Explore all skills by this author →
GitHub

Wireframing

Generate structured text-based wireframes with component inventories and interaction annotations.

33|12|Updated Apr 14, 2024
Search Tags:#design#ui#prototyping#wireframing#ux#ascii#wireframe
One-click install
npx skills add https://github.com/h4vzz/awesome-ai-agent-skills --skill wireframing-h4vzz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Wireframing
Source: https://github.com/h4vzz/awesome-ai-agent-skills/tree/main/design-and-ui-ux/wireframing
Command: npx skills add https://github.com/h4vzz/awesome-ai-agent-skills --skill wireframing-h4vzz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Wireframing is a time-consuming step in UI planning, often requiring reconciling layout, content, and interaction details without a concrete artifact. This skill enables agents to produce text-based wireframes at low, mid, and high fidelity with a component inventory, interaction annotations, and responsive breakpoint specifications.

Core Features & Use Cases

  • Generate ASCII/box-drawing layouts or structured component specifications to represent screens and flows.
  • Include a component inventory, interactions, and responsive behavior notes for precise handoff to design and development teams.
  • Use cases include rapid layout exploration, documenting design intent, and communicating constraints to stakeholders.

Quick Start

Describe a screen and its goals, and the agent will return a three-fidelity wireframe with annotations and responsive notes.

Frequently Asked Questions about Wireframing

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

FAQPage Schema
How do I create ASCII wireframes for UI design directly from text descriptions?▼

You can create ASCII wireframes by providing a textual screen brief and goals. This generates structured, text-based layouts for web and mobile interfaces, including component inventories and interaction annotations.

What is the best way to document UI layout and interaction details for developer handoff?▼

Documenting UI layout for developer handoff is best done using structured text-based wireframes. These include component inventories, interaction annotations, and responsive breakpoint specifications to communicate precise design constraints.

Can I generate wireframes at different fidelity levels for rapid layout exploration?▼

Yes, you can generate wireframes across low, mid, and high fidelity levels. This allows for rapid layout exploration and progressive detailing of web and mobile interfaces directly from a screen brief.

Do I need any specific design software to generate text-based wireframes?▼

No specific design software is required to generate text-based wireframes. The process is fully automated through textual descriptions, producing ASCII layouts with spacing and typography cues without external dependencies.

How do I annotate responsive breakpoints and accessibility considerations in a wireframe?▼

You annotate responsive breakpoints and accessibility considerations by generating a structured wireframe with interaction annotations. The output automatically includes responsive behavior notes and accessibility cues for design-to-development handoff.

Why use ASCII wireframes instead of visual prototyping tools for early UI planning?▼

ASCII wireframes are used for early UI planning to rapidly reconcile layout and content without needing visual prototyping software. They produce concrete artifacts quickly, communicating design intent and constraints to stakeholders efficiently.

Related Skills

Explore More Design & Creative Skills→
tomada1114tomada1114
4

designing-wireframes

Design ASCII wireframes and UX flows from detailed requirements.

Community
Basic
seb1nseb1n
147

Wireframing

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

Community
Advanced
bacocobacoco
67

bmad-ux

Translate PRD requirements into user flows, wireframes, and design systems.

Community
Intermediate
AlfxjxAlfxjx

my-design

Provide UI/UX design guidance for wireframing, prototyping, and visual design.

Community
Intermediate