skills.rest
bipinks
bipinksCOMMUNITY
Explore all skills by this author →
GitHub

wireframing-prototyping

Generate ASCII wireframes, information architecture diagrams, and Mermaid user-flow diagrams from design briefs.

3|Updated Mar 5, 2026
Search Tags:#prototyping#wireframing#ui-design#mockups#information-architecture#user-flow
One-click install
npx skills add https://github.com/bipinks/ghost-office --skill wireframing-prototyping-bipinks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframing-prototyping
Source: https://github.com/bipinks/ghost-office/tree/main/.claude/skills/wireframing-prototyping
Command: npx skills add https://github.com/bipinks/ghost-office --skill wireframing-prototyping-bipinks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Wireframing and prototyping are essential for aligning teams on layouts, navigation, and user flows before investing in code. This section provides ASCII wireframes, information architecture, and diagrams to accelerate product design.

Core Features & Use Cases

  • Low-Fidelity Wireframes (ASCII) for quick layout exploration
  • Information Architecture, navigation patterns, and page structure
  • Mermaid-based User Flow Diagrams and prototype documentation

Quick Start

Create a complete set of UI wireframes and a basic user flow for a dashboard app.

Frequently Asked Questions about wireframing-prototyping

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

FAQPage Schema
How do I generate wireframes for a dashboard app before writing code?▼

You can generate wireframes for a dashboard app by providing a design brief to produce structured layouts, ASCII wireframes, and user-flow diagrams. This accelerates product design by aligning teams on navigation and page structure before engineering handoff.

What is information architecture mapping and when do I need it for UI design?▼

Information architecture mapping organizes navigation patterns and page structure for UI design. You need it during product design and UX reviews to align teams on layouts and user flows before investing in code development.

Can I create user flow diagrams using Mermaid for UX reviews?▼

Yes, you can create Mermaid-based user flow diagrams for UX reviews and prototype documentation. The Skill generates these diagrams from design briefs to facilitate engineering handoffs for forms, dashboards, and multi-step flows.

What is the best way to document UI prototypes for engineering handoffs?▼

The best way to document UI prototypes for engineering handoffs is to generate structured layouts combining ASCII wireframes, information architecture diagrams, and Mermaid-based user flows. This ensures developers understand navigation and page structure clearly.

Do I need design software to plan low-fidelity mockups and user flows?▼

No, you do not need dedicated design software to plan low-fidelity mockups. The Skill produces ASCII wireframes and text-based diagrams directly from design briefs, allowing quick layout exploration without graphical design tools.

Related Skills

Explore More Design & Creative Skills→
Sadiq-KolakarSadiq-Kolakar

uiux-wireframes

Generate structured wireframe layouts and navigation flows for web and mobile.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
JaimeJunrJaimeJunr
2

ux-reference

Evaluate user interfaces using Nielsen's 10 usability heuristics, UX laws, and Gestalt principles.

Community
Basic
Shaarav4795Shaarav4795

wireframe-prototyping

Automate creation of wireframes and interactive prototypes for UI feedback.

Community
Intermediate