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 agentmods add skills/nexu-io/open-design/motion-framesnpx skills add nexu-io/open-design --skill motion-framesgit 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/motion-frames)<a href="https://agentmods.dev/skills/nexu-io/open-design/motion-frames"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/motion-frames.svg" alt="Measured on agentmods" height="20"></a>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 | $0.00091 | $0.00937 |
| Opus 5 | $0.00046 | $0.00468 |
| Sonnet 5 | $0.00018 | $0.00187 |
| Haiku 4.5 | $0.00009 | $0.00094 |
Grade A, and why
motion-frames 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 yesterday.
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.
Copies of this mod
2 near-identical copies found in the catalogue:
- motion-frames — 100% identical, 0 lines differ
- motion-frames — 97% identical, 1 lines differ
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.
Motion Frames Skill
Produce a single full-bleed motion composition. Inline CSS animations only — the page is the loop. Treat it as a poster frame that an exporter (HyperFrames, Lottie, etc.) can capture into a video.
Workflow
- Read the active DESIGN.md (injected above). Motion lives or dies on typography contrast — pick the most expressive serif / display token in the DS for the headline; the body / mono token labels everything else.
- Compose the canvas as a 16:9 hero with these layers, back to front:
- Stage — full-bleed
<main>. Off-white or DS-canvas background, very subtle dotted grid texture (CSS background,radial-gradientdots at 22–32px intervals). - Concentric rings — 2–3 SVG circles radiating from a focal point. Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These rotate at different speeds (60s, 90s, 180s).
- Focal mark — a wireframe globe, a stylized object, or a typographic monogram drawn as inline SVG. ~28% of the canvas wide.
- Ring labels — short words / phonetic tokens placed around one of
the rings (e.g. "Hola · Bonjour · 你好 · नमस्ते"). They co-rotate with
the ring, with
<text>paths counter-rotated so the words stay upright. - Headline — bottom-left or center-bottom. Display serif, italic
accent on one word. Add a subtle
letterSpacing+ opacity reveal animation (@keyframes type-in). - Frame chrome — corner stamps (top-left lab tag, top-right brand or issue number) and a thin baseline rule. Static.
- Stage — full-bleed
- Animate with
@keyframesonly — no JS:rotate-slow,rotate-med,rotate-fastfor rings.globe-spinfor the focal mark.pulsefor the focal dot, ~2s, easing.marquee-fadeto reveal headline once on load.
- Write a single HTML document:
<!doctype html>through</html>, CSS inline.- All motion uses CSS — no scripts, so HyperFrames or any frame-grabber can capture it deterministically.
data-od-idon stage, focal, ring, headline, chrome.
- Self-check:
- The composition still reads as a poster with motion paused at frame 0.
- At least 3 layers move at different speeds (depth comes from delta velocity, not parallax tricks).
- Accent appears once — usually the italic word in the headline.
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.
- yesterday First seen · 90 lines · 91 tokens per session scan A c6ca317d618a
motion-frames is a skill published in the GitHub repository nexu-io/open-design (94,103 stars, last pushed today), licensed Apache-2.0. It adds 91 tokens to every session and 937 once invoked, about $0.0005 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
电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘).
deck-open-slide-canvas
锁死 1920×1080 画布, React 组件级自由组合, 不绑模板.
frame-flowchart-sticky
SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm.
social-spotify-card
Spotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页.
social-x-post-card
拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享.
video-hyperframes
Hyperframes / Remotion 兼容的连续帧动画, 可自动播放.