wireframe-mobile-flow

nexu-io/open-design · plugins/_official/examples/wireframe-mobile-flow/SKILL.md

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 流程".

No license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/wireframe-mobile-flow · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/wireframe-mobile-flow" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/wireframe-mobile-flow" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/wireframe-mobile-flow

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so wireframe-mobile-flow is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

wireframe-mobile-flow

nexu-io/open-design · plugins/_official/examples/wireframe-mobile-flow/SKILL.md

No license★ 91788⑂ 10564commit 9881cff

What this skill does

Wireframe Mobile Flow Skill

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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/wireframe-mobile-flow · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/wireframe-mobile-flow" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/wireframe-mobile-flow" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/wireframe-mobile-flow

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so wireframe-mobile-flow is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

wireframe-mobile-flow

What this skill does

Wireframe Mobile Flow Skill

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

wireframe-mobile-flow

What this skill does

Wireframe Mobile Flow Skill

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits