OpenDesign is an open-source, local-first desktop app that lets coding agents create prototypes, dashboards, slide decks, images, video, and design systems as exportable files. It is used by people working with agent runtimes such as Claude Code, Codex, Cursor, and DeepSeek Harness. The catalogue add-ons extend the OpenDesign workflow with skills, instructions, commands, and plugins.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add nexu-io/open-design --skill wireframe-mobile-flowgit clone --depth 1 https://github.com/nexu-io/open-designWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/nexu-io/open-design/wireframe-mobile-flow)<a href="https://agentmods.dev/skills/nexu-io/open-design/wireframe-mobile-flow"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/wireframe-mobile-flow.svg" alt="Measured on agentmods" height="20"></a>- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00141 | $0.01052 |
| Opus 5 | $0.00071 | $0.00526 |
| Sonnet 5 | $0.00028 | $0.00210 |
| Haiku 4.5 | $0.00014 | $0.00105 |
Grade A, and why
wireframe-mobile-flow scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 96 lines — stays where its author put it; the contents beside it link to each section 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
- 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.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 96 lines · 141 tokens per session scan A ff02eacc2c75
wireframe-mobile-flow is a skill published in the GitHub repository nexu-io/open-design (94,527 stars, last pushed yesterday), licensed Apache-2.0. It adds 141 tokens to every session and 1,052 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
mobile-app
A design template for a single-screen iPhone 15 Pro app mockup, including the phone frame, status bar, app header, main content, and bottom navigation.
mobile-onboarding
A visual template showing three mobile-app onboarding screens side by side: a splash screen, a feature introduction, and sign-in.
deck-guizang-editorial
A slide-deck template combining electronic-magazine layouts with an e-ink, printed-paper look. It offers five fixed color palettes and ten reusable page layouts for storytelling and editorial content.
frame-flowchart-sticky
A single-file HTML template for showing a process or system as a whiteboard with coloured sticky notes, curved arrows, and optional mouse interactions.
frame-macos-notification
A template for realistic macOS Big Sur-style notification banners, with an app icon, title, message, and optional action button.
social-reddit-card
A realistic Reddit post card with a community name, author details, title, content, vote controls, comment count, awards, and sharing actions. Reddit is a discussion platform organized into topic-based communities called subreddits.