Skip to content
Get packs

Mobile Flow Wireframe

Creates a lo-fi, multi-screen mobile app flow wireframe as a single HTML board

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent produces a low-detail wireframe showing three or four phone screens in a row, connected by dashed arrows labeled with the tap that moves the user forward, such as onboarding to home feed to item detail to confirm. Screens are grey placeholder boxes rather than finished visuals, with a few sticky-note style annotations explaining intent. The output is one self-contained HTML page that can be previewed in a browser.

Great for

  • Product managers or designers sketching an app's user flow before committing to visual design
  • Founders or students who want a quick, shareable picture of how screens connect
  • Teams reviewing navigation and step order early in a project

Skip it if

  • Pixel-accurate or branded UI mockups, since the skill deliberately uses grey placeholders and skips finished design
  • Desktop or web-only layouts, because the skill is specific to phone-sized frames

Try asking

  • “Make a lo-fi mobile wireframe of a checkout flow: cart, address, payment, confirmation”
  • “Create an app flow wireframe for onboarding to a home feed to an item detail page”
  • “Sketch a three-screen user flow for a food delivery app with step arrows and annotations”
Step-by-step guide: how to use Mobile Flow WireframeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    wireframe-mobile-flow.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip wireframe-mobile-flow.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip wireframe-mobile-flow.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the flow steps clearly in your request so the arrow labels read as concrete tap actions
  • Ask for three or four screens; the skill's layout is designed for that range
  • Preview the resulting HTML in a browser at around 1280px wide to check the left-to-right reading order

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.