Wireframe Mobile Flow
FreeCreate lo-fi mobile app flow wireframes effortlessly.
Free · Opens the source repo
What Wireframe Mobile Flow does
The Wireframe Mobile Flow skill provides a straightforward way to visualize a mobile app's user flow using low-fidelity wireframes. It is designed for developers and designers who need to present a clear sequence of screens without getting bogged down in detailed UI design. This skill focuses on the flow of user interactions, making it ideal for early-stage discussions and brainstorming sessions where the emphasis is on functionality rather than aesthetics.
When using this skill, users will create a board that displays a series of 3 to 4 mobile device frames arranged in a horizontal layout. Each frame represents a step in the user journey, such as onboarding, home feed, item detail, and confirmation. The wireframes are intentionally kept simple, using grey boxes to represent content and dashed arrows to indicate the flow between screens. Annotations can be added to highlight key points or requirements, ensuring that the design intent is communicated effectively.
This skill is particularly useful in scenarios where stakeholders require a visual representation of the app's flow for reviews or feedback. It allows teams to quickly iterate on concepts and make adjustments based on input before committing to high-fidelity designs. The output is a clean HTML document that can be easily shared and viewed, making collaboration seamless.
Overall, the Wireframe Mobile Flow skill is a practical tool for anyone involved in mobile app design, from UX/UI designers to product managers. It streamlines the process of creating wireframes, enabling teams to focus on user experience and flow without the distraction of detailed visual elements.
When to use it
Use this skill during the early stages of app design to outline user flows and gather feedback without needing polished UI elements.
When not to use it
This skill is not suitable for final design presentations or when high-fidelity mockups are required.
What you can build with it
Early Design Discussions
Use the skill to create wireframes for initial discussions with stakeholders, focusing on user flow.
Iterative Feedback Sessions
Generate quick wireframes to gather feedback on user interactions before moving to high-fidelity designs.
Visualizing User Journeys
Map out the user journey in a clear and simple format to communicate design intent across teams.
How to install Wireframe Mobile Flow
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/wireframe-mobile-flow --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioWireframe Mobile Flow Skill
Produce a single board showing a mobile app's user flow as a row of lo-fi phone frames. The point is the flow — how a user moves screen to screen — not the polish of any one screen. Keep the screens clean grey-boxes (not scribbly) but keep the connectors and annotations loose and informal.
Workflow
- Skip the DESIGN.md if it pushes for finished UI. This skill is deliberately low-fidelity: greyboxes, placeholder rects, and bars stand in for real content. Honor type tokens only loosely (system sans for the board, mono for labels and datelines).
- Pick the flow steps from the brief — typically 3–4 connected screens like Onboarding → Home feed → Item detail → Confirm. Name each step so the connector arrows can carry a numbered, verb-first label ("① tap Start", "② open item", "③ add to cart").
- Lay out the board, in order:
- Board header — bold sans title with a pinned "WIREFRAME v0.1 · MOBILE" tag (dashed border, slight rotation) and a mono dateline on the right (date / device / fidelity).
- Phone row — 3–4 rounded device frames (~240–280px wide) in a horizontal row, each with a notch / status bar. Inside each frame put the greybox content for its step: hero image-placeholder (rect + X), title/price bars, list cards (thumbnail X + 2 text bars), category chips, a bottom tab bar, sticky CTA bars, a confirm checkmark — match the screen's role.
- Connectors — dashed arrows between consecutive phones, each carrying a small mono step label describing the tap that advances the flow.
- Annotations — 1–2 small sticky / callout notes pinned near a screen to flag intent ("hero must sell value in 3s", "checkout = 1 screen").
- Write a single HTML document:
<!doctype html>through</html>, CSS inline, no external JS, no external images (CSS/SVG placeholders only).- Use Inter / system-ui for the board and IBM Plex Mono for labels via Google Fonts; a light marker font is allowed for annotations only.
- Defined dark device-frame borders, medium-grey content blocks on white screens, and a single accent color for arrows and annotations so the board reads clearly even as a small thumbnail.
data-od-idon the header, each phone screen, the connectors, and the annotations.
- Self-check:
- The three main phones are visible in a ~1280px viewport; the flow reads left-to-right.
- Screens are clean greyboxes (not scribbly); connectors and stickies are the loose, informal parts.
- No near-white-on-white regions — every block has a visible grey fill or border. If a screen renders blank as a thumbnail, raise the contrast.
Output contract
Emit between <artifact> tags:
<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Frequently asked questions about Wireframe Mobile Flow
Similar skills
Penpot UI/UX Design
Create professional UI/UX designs in Penpot with ease.
UX Theming
Streamline your VS Code theming process with best practices.
Wireframe
Create low-fidelity UI wireframes in SVG format.
Waitlist Page
Create a clean, focused pre-launch landing page.
Hallmark
Design skill for creating unique, structured UIs.
UI Styling
Create beautiful, accessible user interfaces effortlessly.