wireframe-mobile-flow

Generate lo-fi mobile application user flow wireframes using greybox components and annotated connector arrows.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#prototyping #mobile #wireframe #user-flow #lo-fi #Design

One-click install

npx skills add https://github.com/nexu-io/open-design --skill wireframe-mobile-flow

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: wireframe-mobile-flow
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/wireframe-mobile-flow
Command: npx skills add https://github.com/nexu-io/open-design --skill wireframe-mobile-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill addresses the need for rapid, low-fidelity visualization of mobile app user journeys, allowing designers and product managers to communicate flow logic without getting distracted by high-fidelity UI polish.

Core Features & Use Cases

Automated Flow Generation: Creates a horizontal sequence of 3-4 mobile device frames representing a complete user journey.
Standardized Annotations: Includes numbered step labels and sticky-note callouts to clarify user intent and interaction requirements.
Use Case: Quickly prototype an onboarding-to-checkout flow for a new marketplace feature to align stakeholders on the interaction model before committing to final visual design.

Quick Start

Generate a lo-fi mobile wireframe flow for a food delivery app showing the search, selection, and checkout process.

Frequently Asked Questions about wireframe-mobile-flow

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

FAQPage Schema

How do I generate a mobile user flow wireframe?▼

Use the wireframe-mobile-flow skill to create a sequence of mobile screens by defining the flow steps, such as onboarding, home feed, and item detail, which the tool renders as a structured HTML board.

Can I customize the number of screens in the flow?▼

The skill is optimized for 3-4 screens in a row to maintain readability as a single board, but you can adjust the flow steps in the prompt to represent your specific user journey.

What is the purpose of the greybox content?▼

Greybox content focuses the viewer on the user flow and interaction logic rather than visual design, ensuring that stakeholders prioritize the sequence of actions over aesthetic details.

How do I add annotations to the wireframe?▼

The skill automatically includes sticky-note style annotations for flagging specific intent or requirements, which you can define in your prompt to highlight critical interaction points.