wireframe-mobile-flow
A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames laid out in a row on a board, showing a connected user flow (Onboarding → Home feed → Item detail → Confirm).
Install / Use
npx skills add nexu-io/open-design --skill wireframe-mobile-flowInstalls into whichever agent you are using.
SKILL.md
Installable skill definition
Quality Score
Category
MarketingSupported Platforms
Tags
Our assessment of wireframe-mobile-flow
wireframe-mobile-flow scores 90/100 on our quality scale, 24th of 111 Marketing skills we index (top 22%).
Its SKILL.md is 4.1 KB long, split into 3 sections with 1 code example: a solid amount of guidance for an agent.
With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.
Maintenance, license and trust
- The repository was last updated today, so wireframe-mobile-flow is actively maintained.
- It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
- Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
wireframe-mobile-flow compared with similar skills
All 4 of these similar skills score higher than wireframe-mobile-flow; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| wireframe-mobile-flow (this skill)by nexu-io | 90 | 97.9k | today | SKILL.md |
| algorithmic-artby anthropics | 100 | 177.9k | 2d ago | SKILL.md |
| pptxby anthropics | 100 | 177.9k | 2d ago | SKILL.md |
| designby nextlevelbuilder | 100 | 130.2k | 3d ago | SKILL.md |
| ui-ux-pro-maxby nextlevelbuilder | 100 | 130.2k | 3d ago | SKILL.md |
Frequently asked questions
- How do I install wireframe-mobile-flow?
- Run
npx skills add nexu-io/open-design --skill wireframe-mobile-flow. The install tabs above show the steps for each supported agent. - Which AI agents does wireframe-mobile-flow work with?
- It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
- Is wireframe-mobile-flow safe to use?
- It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is wireframe-mobile-flow still maintained?
- The repository was last updated today, so wireframe-mobile-flow is actively maintained.
Skill content
View source on GitHubname: wireframe-mobile-flow description: | A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames laid out in a row on a board, showing a connected user flow (Onboarding → Home feed → Item detail → Confirm). Grey-box content inside each device, dashed connector arrows + numbered step labels between screens, and a couple of annotation callouts. Reads like an app flow pinned to a whiteboard before any pixels are committed. Use when the brief asks for "mobile wireframe", "app flow", "user flow wireframe", "lo-fi mobile", "low fidelity", "线框图", "移动端线框", or "App 流程". triggers:
- "mobile wireframe"
- "app flow"
- "user flow"
- "lo-fi mobile"
- "wireframe"
- "low fidelity"
- "移动端线框"
- "App 流程图" od: mode: prototype platform: auto scenario: design fidelity: wireframe preview: type: html entry: index.html design_system: requires: false sections: [color, typography, layout, components] example_prompt: "Wireframe a lo-fi mobile flow v0.1 — three phone frames in a row (Onboarding → Home feed → Item detail), grey-box screens, dashed step arrows between them, and two annotation callouts."
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
- 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.
Related Skills
algorithmic-art
177.9kCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
pptx
177.9kUse this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…
design
130.2kComprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG…
ui-ux-pro-max
130.2kUI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation.
Languages
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.