# Wireframe Mobile Flow

> |

- **Type:** Skill
- **Install:** `agentstack add skill-nexu-io-open-design-wireframe-mobile-flow`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [nexu-io](https://agentstack.voostack.com/s/nexu-io)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [nexu-io](https://github.com/nexu-io)
- **Source:** https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/wireframe-mobile-flow
- **Website:** https://open-design.ai

## Install

```sh
agentstack add skill-nexu-io-open-design-wireframe-mobile-flow
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Wireframe 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

1. **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).
2. **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").
3. **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").
4. **Write** a single HTML document:
   - `` through ``, 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-id` on the header, each phone screen, the connectors, and the
     annotations.
5. **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 `` tags:

```

...

```

One sentence before the artifact, nothing after.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [nexu-io](https://github.com/nexu-io)
- **Source:** [nexu-io/open-design](https://github.com/nexu-io/open-design)
- **License:** Apache-2.0
- **Homepage:** https://open-design.ai

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-nexu-io-open-design-wireframe-mobile-flow
- Seller: https://agentstack.voostack.com/s/nexu-io
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.