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 frontend-slidesgit 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/frontend-slides)<a href="https://agentmods.dev/skills/nexu-io/open-design/frontend-slides"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/frontend-slides/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/nexu-io/open-design/frontend-slides"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/frontend-slides.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket warn
- 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.00045 | $0.01865 |
| Opus 5 | $0.00023 | $0.00932 |
| Sonnet 5 | $0.00009 | $0.00373 |
| Haiku 4.5 | $0.00005 | $0.00186 |
Grade A, and why
frontend-slides 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 — 115 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Slides
Zero-dependency, animation-rich HTML presentations that run entirely in the browser. Curated from the MIT-licensed zarazhangrui/frontend-slides.
Start from example.html in this plugin folder. It is the proven seed: copy its stage CSS, slide shell, and the entire SlidePresentation controller script verbatim, then replace slide content. Do not rewrite the stage system, the navigation script, or the design tokens architecture from scratch.
Hard spec (locked — every deck must satisfy all of these)
Fixed 16:9 stage — NON-NEGOTIABLE
- Every deck is authored on a fixed 1920×1080 canvas:
.deck-viewport(fills the window) wraps.deck-stage(1920×1080,transform-origin: 0 0). - JavaScript scales the whole stage uniformly:
factor = min(innerWidth/1920, innerHeight/1080), thentranslate(x, y) scale(factor)to center with letterbox/pillarbox. Re-run onresize. - Never reflow slide content per device. No responsive breakpoints inside slides. All slide measurements are fixed px at the 1920×1080 design size.
- Include the FULL contents of
references/viewport-base.cssin the<style>block (the seed already embeds it).
Slide structure
- Each page is one
<section class="slide">directly inside.deck-stage. Around 10 slides for a standard deck; split content into more slides rather than shrinking type. - Slide switching uses
.active/.visibleclasses togglingvisibility,opacity,pointer-events— neverdisplay: none/block(layout classes likedisplay: flexon children would override it and show every slide at once). - No scrolling, no overflow, no overlapping panels, no text below comfortable reading size at 1920×1080.
Navigation runtime (keep the seed's script)
- Keyboard:
←/→,↑/↓,Space,PageUp/PageDown,Home/End. - Hash routing: current slide mirrored to
#/<index>; deep links andhashchangerestore the slide. - Mouse wheel (debounced ~650ms) and touch swipe (≥40px threshold).
- Page counter chrome lives in
.deck-controls, fixed-positioned outside the scaled stage.
What ships with it
7 files 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 · 115 lines · 45 tokens per session scan A 8b87a615f1d0
frontend-slides is a skill published in the GitHub repository nexu-io/open-design (95,021 stars, last pushed today), licensed Apache-2.0. It adds 45 tokens to every session and 1,865 once invoked, about $0.0002 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
frontend-slides
Open Design as a worked AI-workflow example: how local agents read your files and design on your desktop — concretely. Built as a decision-grade AI literacy deck for teams new to AI, leadership.
ve-terminal-mono
Open Design from the CLI: driving the full design workflow with the od command — scripted, composable, agent-ready. Built as a decision-grade AI literacy deck for developers, power users.
html-ppt-hermes-cyber-terminal
Open Design + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-obsidian-claude-gradient
Open Design's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Built as a decision-grade AI literacy deck for leadership, IT, security.
html-ppt-presenter-mode
Open Design live demo: from a one-line prompt to runnable design in a single session — the flow, live. Built as a decision-grade AI literacy deck for developers, prospects, community.
html-ppt-tech-sharing
Open Design internals: how the agent stream, sandbox, and artifacts work — an engineering deep-dive talk. Built as a decision-grade AI literacy deck for engineers, dev community.