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 motion-ui-morphgit 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-ui-morph)<a href="https://agentmods.dev/skills/nexu-io/open-design/motion-ui-morph"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/motion-ui-morph/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/motion-ui-morph"><img src="https://agentmods.dev/badge/skills/nexu-io/open-design/motion-ui-morph.svg" alt="Reviewed on agentmods" width="80" 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.1 | $0.00066 | $0.01435 |
| Opus 5.5 | $0.00026 | $0.00574 |
| Sonnet 5.5 | $0.00013 | $0.00287 |
| Haiku 4.5 | $0.00007 | $0.00144 |
Grade A, and why
motion-ui-morph 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 7d 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 — 102 lines — stays where its author put it; the contents beside it link to each section on GitHub.
One-Shape UI Motion
A 14-second code-only UI motion piece, rebuilt from the viral original: one shape morphs from a button into a loader, player, slider, toggle, tabs, chart, command palette and toast, driven by a cursor at 120 BPM. example.html is the finished reference — start from it.
The reference timing and beat map describe the demo. Adapt them to the user's requested duration and content; do not force the reference duration or music.
Source
A remake of a viral post by @twoclipping: https://x.com/twoclipping/status/2103273003555402193 (1.03M views · 12K likes · 20K bookmarks on X (as of 2026-10-05)). The composition is rebuilt in code from the published piece; the soundtrack is original.
Reference files
Copy example.html, assets/geist-OFL.txt, assets/geist-medium.ttf, assets/geist-regular.ttf, assets/geist-semibold.ttf, assets/gsap.min.js into the composition, preserving the assets/ path.
Copy the demo soundtrack only if selected under the Sound guidance below.
Font licenses travel with their fonts. Use these frozen local bytes; no runtime
script or font CDN is needed.
Art direction
- Warm light-gray canvas
#EDEDE8, black#0A0A0Aand white components, toggle track#D0D1CA; one soft drop shadow. - Font (SIL OFL, bundled): Geist Regular, Medium and SemiBold.
- The original is a 1440×1440 square; this reference keeps its scale on a 1920×1080 stage.
Beat map (14s)
- 120 BPM, 7 bars: Generate button → loader → check → dynamic island → music player (play/pause morph, scrub) → volume slider that stretches past max → toggle → liquid tab indicator → chart that draws itself with a hover tooltip and a Week switch → ⌘K palette (type "frame", enter) → toast → Generate button.
- The last frame matches the first, so it loops.
Adapting the template
- Replace the UI states in
SHAPEand their contents; keep one shape that never cuts, springs summed per change, and a cursor that causes every change.
How the reference is built
- One composition root with canvas layers. A single
render(t)draws the whole frame from the master timeline timet; constants at the top hold copy, palette and timing so the film can be re-themed in one place. - Every visible value is a pure function of
t(eases, springs or keyframes evaluated from time). No state carries between frames.
What ships with it
9 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.
- 7d ago Changed · +12 lines 8bfb018cb339
- 15d ago First seen · 90 lines · 66 tokens per session scan A 31515253a89f
motion-ui-morph is a skill published in the GitHub repository nexu-io/open-design (104,878 stars, last pushed today), licensed Apache-2.0. It adds 66 tokens to every session and 1,435 once invoked, about $0.0003 per session on Opus 5.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-10-15.
Other skills, from other repositories
deck-swiss-international
A slide-deck template based on Swiss International graphic design: a strict 16-column grid, large clear text, charts, and one fixed bright accent colour. It provides 22 layouts for covers, timelines, comparisons, metrics, and other content.
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-light-leak-cinema
A visual template for a cinematic opening frame or chapter card. It combines warm film light leaks, 35mm-style grain, black letterbox bars, and large serif lettering.
mockup-device-3d
A template for presenting app or product interfaces inside CSS-rendered 3D iPhone and MacBook mockups. CSS is the web styling system used to control layout, colors, and visual effects.
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-glitch-title
A design template for a glitch-style title frame in Chinese, intended for a video transition, hero image, or cyberpunk graphic. It describes dark backgrounds, distorted lettering, colored offsets, scan lines, noise, and timecode details.