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-greyboxgit 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-greybox)<a href="https://agentmods.dev/skills/nexu-io/open-design/wireframe-greybox"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/wireframe-greybox.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.00125 | $0.00997 |
| Opus 5 | $0.00063 | $0.00498 |
| Sonnet 5 | $0.00025 | $0.00199 |
| Haiku 4.5 | $0.00013 | $0.00100 |
Grade A, and why
wireframe-greybox 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 5d 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 — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Wireframe Greybox Skill
Produce a single crisp greybox wireframe page. The whole point is structure, not skin — communicate hierarchy and layout with neutral grey blocks, never with real color, copy, or imagery. Everything is a placeholder: text is grey "lorem bars", images are rectangles with a diagonal cross, numbers are big solid blocks. The only color on the page is the single redline accent reserved for monospace annotations.
Workflow
- Stay structural. Ignore any DESIGN.md that pushes finished UI — this is deliberately low fidelity. Use a clean system sans (Inter / system-ui) for shape and a mono (IBM Plex Mono / JetBrains Mono) for the redline annotations only. No hand-drawn fonts, no brand color.
- Set the greybox palette. Page is a pale neutral (
#f7f7f8), blocks are medium grey (#e3e3e6), borders are crisp and defined (#c9c9cffor soft edges,#1c1b1afor emphasis), and exactly one accent (a blue or coral redline) carries every monospace annotation. Keep contrast high enough to read as a small thumbnail — never near-white-on-white. - Lay out the dashboard, in order, each on its own
data-od-id:- App bar — a logo greybox, a row of nav lorem-bars, and an avatar circle on the right.
- Sidebar nav — icon squares + lorem-bar labels; mark one item active with a filled/inverted block.
- KPI row — four greyboxes, each a small label bar above a big solid "number" bar.
- Chart panel — an inline SVG greybox: axes plus a few hatched/grey bars or a schematic line. No real data.
- List / table panel — a header row plus ~5 rows of lorem bars, with one column of image-placeholders drawn as a box with a diagonal X.
- Annotations — one or two small monospace redlines pinned to the
canvas (e.g.
01 · 12-col grid,max-width 1280).
- Write one self-contained HTML document —
<!doctype html>through</html>, CSS inline, no external JS or images. SVG and CSS draw every placeholder. Amax-widthcontainer plus a media query collapses columns under ~1000px. - Self-check. It should read as a blueprint at thumbnail size: grey blocks, X-crossed image boxes, lorem bars, and exactly one accent color on the monospace redlines. If any greybox is missing, the page looks colored, or it disappears as a blank thumbnail, fix it.
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.
- 5d ago First seen · 90 lines · 125 tokens per session scan A 5f1f2499625d
wireframe-greybox is a skill published in the GitHub repository nexu-io/open-design (94,754 stars, last pushed today), licensed Apache-2.0. It adds 125 tokens to every session and 997 once invoked, about $0.0006 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
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.
social-spotify-card
A Spotify-style now-playing card that shows cover art, a title, artist or subtitle, playback progress, and music controls. It can be sized for video overlays or a website hero section.
social-x-post-card
A realistic X post card that displays a profile, handle, post text, optional quoted content or image area, and engagement figures such as likes, reposts, replies, and views. X is the social platform formerly known as Twitter.