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-id on 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.
1---2name: wireframe-mobile-flow3description: 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 流程".4---5
6# Wireframe Mobile Flow Skill
7
8Produce a single board showing a mobile app's user flow as a row of lo-fi
9phone frames. The point is the *flow* — how a user moves screen to screen —
10not the polish of any one screen. Keep the screens clean grey-boxes (not
11scribbly) but keep the connectors and annotations loose and informal.
12
13## Workflow
14
151. **Skip the DESIGN.md** if it pushes for finished UI. This skill is
16 deliberately low-fidelity: greyboxes, placeholder rects, and bars stand in
17 for real content. Honor type tokens only loosely (system sans for the
18 board, mono for labels and datelines).
192. **Pick the flow steps** from the brief — typically 3–4 connected screens
20 like Onboarding → Home feed → Item detail → Confirm. Name each step so the
21 connector arrows can carry a numbered, verb-first label ("① tap Start",
22 "② open item", "③ add to cart").
233. **Lay out the board**, in order:
24 - **Board header** — bold sans title with a pinned "WIREFRAME v0.1 ·
25 MOBILE" tag (dashed border, slight rotation) and a mono dateline on the
26 right (date / device / fidelity).
27 - **Phone row** — 3–4 rounded device frames (~240–280px wide) in a
28 horizontal row, each with a notch / status bar. Inside each frame put
29 the greybox content for its step: hero image-placeholder (rect + X),
30 title/price bars, list cards (thumbnail X + 2 text bars), category
31 chips, a bottom tab bar, sticky CTA bars, a confirm checkmark — match the
32 screen's role.
33 - **Connectors** — dashed arrows between consecutive phones, each carrying
34 a small mono step label describing the tap that advances the flow.
35 - **Annotations** — 1–2 small sticky / callout notes pinned near a screen
36 to flag intent ("hero must sell value in 3s", "checkout = 1 screen").
374. **Write** a single HTML document:
38 - `<!doctype html>` through `</html>`, CSS inline, no external JS, no
39 external images (CSS/SVG placeholders only).
40 - Use Inter / system-ui for the board and IBM Plex Mono for labels via
41 Google Fonts; a light marker font is allowed for annotations only.
42 - Defined dark device-frame borders, medium-grey content blocks on white
43 screens, and a single accent color for arrows and annotations so the
44 board reads clearly even as a small thumbnail.
45 - `data-od-id` on the header, each phone screen, the connectors, and the
46 annotations.
475. **Self-check**:
48 - The three main phones are visible in a ~1280px viewport; the flow reads
49 left-to-right.
50 - Screens are clean greyboxes (not scribbly); connectors and stickies are
51 the loose, informal parts.
52 - No near-white-on-white regions — every block has a visible grey fill or
53 border. If a screen renders blank as a thumbnail, raise the contrast.
54
55## Output contract
56
57Emit between `<artifact>` tags:
58
59```
60<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
61<!doctype html>
62<html>...</html>
63</artifact>
64```
65
66One sentence before the artifact, nothing after.
gabrielmoreira