wireframe-mobile-flow skill
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 流程".
Is the wireframe-mobile-flow skill safe?
Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.
No findings.
Install the wireframe-mobile-flow skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design mkdir -p ~/.claude/skills cp -r /tmp/open-design/design-templates/wireframe-mobile-flow ~/.claude/skills/wireframe-mobile-flow
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
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
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).
- Skip the DESIGN.md if it pushes for finished UI. This skill is
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").
- Pick the flow steps from the brief — typically 3–4 connected screens
- Lay out the board, in order:
MOBILE" tag (dashed border, slight rotation) and a mono dateline on the right (date / device / fidelity).
- Board header — bold sans title with a pinned "WIREFRAME v0.1 ·
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.
- Phone row — 3–4 rounded device frames (~240–280px wide) in a
a small mono step label describing the tap that advances the flow.
- Connectors — dashed arrows between consecutive phones, each carrying
to flag intent ("hero must sell value in 3s", "checkout = 1 screen").
- Annotations — 1–2 small sticky / callout notes pinned near a screen
- Write a single HTML document:
external images (CSS/SVG placeholders only).
- <!doctype html> through , CSS inline, no external JS, no
Google Fonts; a light marker font is allowed for annotations only.
- Use Inter / system-ui for the board and IBM Plex Mono for labels via
screens, and a single accent color for arrows and annotations so the board reads clearly even as a small thumbnail.
- Defined dark device-frame borders, medium-grey content blocks on white
annotations.
- data-od-id on the header, each phone screen, the connectors, and the
- Self-check:
left-to-right.
- The three main phones are visible in a ~1280px viewport; the flow reads
the loose, informal parts.
- Screens are clean greyboxes (not scribbly); connectors and stickies are
border. If a screen renders blank as a thumbnail, raise the contrast.
- No near-white-on-white regions — every block has a visible grey fill or
Output contract
Emit between tags:
<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>One sentence before the artifact, nothing after.
More skills from nexu-io/open-design
- Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
- Acard-twitterTwitter quote or data card designed to pair with a post.
- Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
- Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
- Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.